Angular7 Data Binding

Angular7 Data Binding

Data Binding is available directly from AngularJS, and all later released versions of Angular. For data binding we use curly braces-{}; {this process is called interpolation. In our previous examples we have already seen how we declared the value to the title of the variable, and the same is printed in the browser.

The variable in the file app.component.html is referred to as {{title}} and the title value is initialized in the file app.component.ts, and the value is shown in app.component.html.

Let's build month dropdown in the browser now. We created an array of months for this in app.component.ts as follows –

import { Component } from '@angular/core';

@Component({ 
   selector: 'app-root', 
   templateUrl: './app.component.html', 
   styleUrls: ['./app.component.css'] 
}) 
export class AppComponent {
   title = 'Angular 7'; 
   
   // declared array of months. 
   months = ["January", "February", "March", "April", "May", "June", "July", 
      "August", "September", "October", "November", "December"];
}

The list of the month shown above shall be shown in a dropdown in the browser.

With choice we built the standard select tag. We used the for loop, as an option. The for loop is used to iterate over the list of months, which in turn will create the option tag with the value in the months current.

The syntax for in Angular is as follows −

*ngFor = "let I of months"

and to get the value of months we are displaying it in −

{{i}}

The two curly brackets help in binding data. You declare the variables in your app.component.ts file, and use the curly brackets to replace the same.

With the curly brackets, the variable that is defined in app.component.ts can be binded inside the app.component.html. For instance:{{}}.

Let's view the data on condition in the browser now. We added a variable here, and assigned the value as true. We can hide / reveal the content to view using the if statement.

import { Component } from '@angular/core';

@Component({
   selector: 'app-root', 
   templateUrl: './app.component.html', 
   styleUrls: ['./app.component.css'] 
}) 
export class AppComponent { 
   title = 'Angular 7'; 
   
   // declared array of months. 
   months = ["January", "February", "March", "April", "May", "June", "July", 
      "August", "September", "October", "November", "December"]; 
   
   isavailable = true; //variable is set to true
}

<!--The content below is only a placeholder and can be replaced.--> 
<div style = "text-align:center"> 
   <h1> Welcome to {{title}}. </h1> 
</div>

<div> Months : 
   <select> 
      <option *ngFor = "let i of months">{{i}}</option> 
   </select> 
</div> 
<br/>

<div> 
   <span *ngIf = "isavailable">Condition is valid.</span>  
   //over here based on if condition the text condition is valid is displayed. 
   //If the value of isavailable is set to false it will not display the text. 
</div>

Let's clarify the example above using condition IF THEN ELSE.

import { Component } from '@angular/core';
@Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
})
export class AppComponent {
   title = 'Angular 7';
   
   // declared array of months.
   months = ["January", "Feburary", "March", "April", "May","June", "July", 
      "August", "September", "October", "November", "December"];
   
   isavailable = false; //variable is set to true
}

We rendered the isavailable variable as false in this case. To print the other condition, the ng-template must be generated as follows –

<ng-template #condition1>Condition is invalid</ng-template>

The full code is given below –

<!--The content below is only a placeholder and can be replaced.--> 
<div style = "text-align:center"> 
   <h1> Welcome to {{title}}. </h1> 
</div>

<div> Months : 
   <select> 
      <option *ngFor = "let i of months">{{i}}</option>
   </select>
</div> 
<br/>

<div> 
   <span *ngIf = "isavailable; else condition1">Condition is valid.</span> 
   <ng-template #condition1>Condition is invalid</ng-template> 
</div>

If the other condition is used, and the used variable is condition1. The same is allocated to the ng-template as an I d, and when the available variable is set to null, it shows the text Condition invalid.

Let us now use the if then else condition.

import { Component } from '@angular/core';
@Component({
   selector: 'app-root', 
   templateUrl: './app.component.html', 
   styleUrls: ['./app.component.css'] 
}) 
export class AppComponent { 
   title = 'Angular 7'; 
   
   // declared array of months. 
   months = ["January", "February", "March", "April", "May", "June", "July", 
      "August", "September", "October", "November", "December"]; 
   
   isavailable = true; //variable is set to true 
}

Now, we are going to make the variable as true usable. In html, the condition is written as follows –

<!--The content below is only a placeholder and can be replaced.--> 
<div style = "text-align:center"> 
   <h1> Welcome to {{title}}. </h1> 
</div>

<div> Months : 
   <select> 
      <option *ngFor="let i of months">{{i}}</option>
   </select> 
</div> 
<br/>

<div> 
   <span *ngIf = "isavailable; then condition1 else condition2">
      Condition is valid.
   </span> 
   <ng-template #condition1>Condition is valid</ng-template> 
   <ng-template #condition2>Condition is invalid</ng-template> 
</div>