---
# System prepended metadata

title: 6. Data Binding & Pipes
tags: [Angular Getting Started]

---

---
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"**
```app.component.html
<img [src]='product.imageUrl'
     [title]='product.productName'
>
```
** Interpolation also can be used here:
```
<img src={{product.imageUrl}}>
```
![](https://i.imgur.com/ZGqDiX6.png)


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

Example: Toggle Image
```app.component.html
<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>
```

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

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

```


| Show Image | Hide Image | 
| -------- | -------- | 
| ![](https://i.imgur.com/Gj90q7L.png)   | ![](https://i.imgur.com/7vlwFjN.png) | 


## 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";
}
```
![](https://i.imgur.com/XelAGtj.png)

** Rita is a default value.


## Transfer data with Pipe

![](https://i.imgur.com/7mw1I8U.png)

\
\
**PIPE Example**
![](https://i.imgur.com/bMd2pOX.png)





