Angular 6 Data Binding

Angular 6 Data Binding

Data Binding is accessible from AngularJS, Angular 2,4 and now also accessible in Angular 6. For linking info, we use curly braces-{}}; {this method is called interpolation. In our previous examples we have already shown how we proclaimed the meaning to the title of the attribute and the same is displayed in the browser.

The attribute in the file app.component.html is referred to as {{title}} and the label 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. To do so, we built an collection of months as follows in app.component.ts.

import { Component } from '@angular/core';
@Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
})
export class AppComponent {
   title = 'Angular 6 Project!';
   // declared array of months.
   months = ["Jan", "Feb", "Mar", "Apr", "May", 
            "June", "Jul", "Aug", "Sep",
            "Oct", "Nov", "Dec"];
}

The list of the month shown above shall be shown in a dropdown in the browser. We'll use the following line of code − for this

	
<!--The content below is only a placeholder and can be replaced. -->
<div style = "text-align:center">
   <h1>
      Welcome to {{title}}.
   </h1>
</div>
<div> select Months:
   <select>
      <option *ngFor = "let i of months">{{i}}</option>
   </select>
</div>

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

The syntax for in Angular is * ngFor = "let I of months," and we display it in I to get the value of the months.

The two curly brackets assist in binding data. You define the variables in your app.component.ts file, then use the curly brackets to substitute the same.

Using curly brackets, the variable defined in app.component.ts may be related with app.component.html; for example,}}.

Let's view the data on condition in the browser now. We inserted a variable here, and assigned the value as real. We will hide / expose the content to view using the if expression.

Example

import { Component } from '@angular/core';
@Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
})
export class AppComponent {
   title = 'Angular Project!';
   //array of months.
   months = ["Jan", "Feb", "Mar", "Apr",
            "May", "June", "Jul", "Aug", "Sep",
            "Oct", "Nov", "Dec"];
   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> Select Months :
   <select>
      <option *ngFor = "let i of months">{{i}}</option>
   </select>
</div>
<br/>
<div>
   <span *ngIf = "isavailable">Valid condition.</span> 
</div>
	

Let us try the above example using the IF THEN ELSE condition.

Example

import { Component } from '@angular/core';
@Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
})
export class AppComponent {
   title = 'Angular Project!';
   //array of months.
   months = ["Jan", "Feb", "Mar", "Apr",
            "May", "June", "July", "Aug", "Sep",
            "Oct", "Nov", "Dec"];
   isavailable = false;
}

We rendered the isavailable variable as inaccurate in this situation. To print the other state, the ng-template must be generated as follows –

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

The full code looks like this −

	<!--The content below is only a placeholder and can be replaced.-->
<div style = "text-align:center">
   <h1>
      Welcome to {{title}}.
   </h1>
</div>
<div>Select Months :
   <select>
      <option *ngFor="let i of months">{{i}}</option>
   </select>
</div>
<br/>
<div>
   <span *ngIf = "isavailable; else condition1">Valid condition</span>
   <ng-template #condition1>invalid Condition </ng-template>
</div>

When the other condition is used, then the selected variable is condition1. The same is added to the ng-template as an id, and when the usable variable is set to zero, 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 Project!';
   //array of months.
   months = ["Jan", "Feb", "Mar", "Apr",
            "May", "June", "July", "Aug", "Sep",
            "Oct", "Nov", "Dec"];
   isavailable = true;
}

Now, we are going to render the variable as true usable. Throughout html, the description is written as follows –

<div style = "text-align:center">
   <h1>
   Welcome to {{title}}.
   </h1>
</div>
<div> Select Months :
   <select>
      <option *ngFor = "let i of months">{{i}}</option>
   </select>
</div>
<br/>
<div>
   <span *ngIf = "isavailable; then condition1 else condition2"> Valid Condition </span>
   <ng-template #condition1>valid Condition </ng-template>
   <ng-template #condition2>invalid Condition </ng-template>
</div>

If the variable is valid otherwise condition1, condition2 is otherwise. Now two templates with I d #condition1 and #condition2 are built.