One way data binding in angular

The one way data banding allows to flow the data in one direction. It can be achieved in angular in two different ways, between the component and view and it can be either from component to view or view to component and between the angular components either parent component to child component and child component to parent component.

One way data binding types

1. Component and view2. Between the components (parent to child and child to parent)

Component and view

In this data binding, the component binds the data with its template and it can be of either side, from component to view or from view to component.

1. from component to view2. from view to component

⇢ Data binding between component and view

Example

 1 <h1>Interpolation examples</h1>
 2 
 3 <!-- property binding -->
 4 <div class={{defaultTheame}}>
 5   <!-- string interpolation -->
 6   <div> {{ title }} </div>
 7 
 8   <!-- mathematical interpolation -->
 9   <div> {{ 10 + 20 }} </div>
 10 
 11   <!-- method call in interpolation -->
 12   <div> {{ getHostUrl() }}</div>
 13 
 14   <!-- template reference variable in interpolation -->
 15   <div>
 16     <!-- (input)="1" trigger the change event to update view -->
 17     <input (input)="1" #searchText /> : {{ searchText.value }}
 18   </div>
 19 
 20   <!-- Pipes in interpolation -->
 21   <div>
 22     {{ title | uppercase }}
 23   </div>
 24 </div>

Between the components

In this data binding, the component binds the data with its child components and it can be of either side, from parent component to child and child to parent. To achieve this angular provides two decorator @Input to receive from the parent component and @Output to send data from the child component to parent.

1. from parent to child2. from child to parent

from parent to child

 1 <h1> Event binding </h1>
 2 
 3 <input type="text" [(ngModel)]="parentValue" />
 4 
 5 <!-- Parent component property binding with child -->
 6 <app-child [parentProperty]="parentValue"></app-child>

Child component

 1 import { Component, Input } from "@angular/core";
 2 
 3 @Component({
 4     selector: 'app-child',
 5     templateUrl: 'child.component.html',
 6     styleUrls: ['./child.component.less']
 7 })
 8 export class ChildComponent {
 9 
 10     @Input()
 11     parentProperty: string = '';
 12 }