---
title: 6. Data Binding & Pipes
tags: Angular Getting Started
image:
---

# 6. Data Binding & Pipes

* Property binding
* Event binding
* Two-way binding
* Transfer data with Pipes

\
**Data Transfer Map**

Component <---> DOM

Interpolation: Component -> DOM

Properties: Component -> DOM

Events: DOM -> Component

---

## Property Binding

**[src] = "product.imageUrl"**

<img [src]='product.imageUrl'
     [title]='product.productName'
>

** Interpolation also can be used here:

<img src={{product.imageUrl}}>


## Event Binding
**(click) = "toggleImage()"**

Example: Toggle Image

<div class="image-container d-flex aic mt-20">
  <h2 class="mb-4">Try to toggle the image!</h2>
  <button class="button mb-4" (click)="toggleImage()">{{showImage ? "Hide" : "Show"}} Image</button>
  <img [src]="imageTestUrl" alt="beach" *ngIf="showImage"/>
</div>

export class ImageTestComponent implements OnInit {
  
  imageTestUrl = "./assets/images/image01.jpg";
  showImage: boolean = true;

  toggleImage(): void{
    this.showImage = !this.showImage;
  }
}

| Show Image | Hide Image |
| -------- | -------- |
|  |  |

## Two-way Binding

**ngModel**

Remember to import FormsModule in AppModule

import { FormsModule } from '@angular/forms';

app.component.html

<div>
  Please Enter Your Name:
  <input type="text" [(ngModel)] = "listFilter">
</div>

<div>Your name is : {{listFilter}}</div>

app.component.ts

export class AppComponent {
  listFilter: string = "Ruta";
}


** Rita is a default value.

## Transfer data with Pipe


\
\
**PIPE Example**