WEB DEVELOPER SITE
PYTHONJAVA
 

Angular 4 Data Binding


Data Binding was available angular 2 as wall as Angular 4. curly braces for data binding {{}}; this process is called interpolation.

app.component.html file is referred as {{title}} and the value of title is initialized in the app.component.ts file and in app.component.html, the value is displayed.

It will deprecate completely going ahead. This is one of the major changes in Angular 4.

we have created an array of days 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 4 Project!';
   // declared array of days.
   days = ["Monday ", "Tuesday ", "Wednesday ", "Thursday", "Friday ", 
            "Saturday ", "Sunday "];
}
array that is shown above is to be displayed in a dropdown in the browser For this, we will use the following line of code-

<div style="text-align:center">
   <h1>
      Welcome to {{title}}.
   </h1>
</div>

<div> days :
  <select>
 <option *ngFor="let i of days">{{i}}</option>
   </select>
</div>
We have created the normal select tag with option. The syntax for in Angular is *ngFor = “let I of days" and to get the value of days we are displaying it in {{i}}. You declare the variables in your app.component.ts file The variable that is set in the app.component.ts can be bound with the app.component.html using the curly brackets; for example, {{}}.

Example


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

@Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
})

export class AppComponent {
   title = 'Angular 4 Project!';
   //array of days.
   days = ["Monday ", "Tuesday ", "Wednesday ", "Thursday", "Friday ", 
            "Saturday ", "Sunday "];
   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> days :
  <select>
      <option *ngFor = "let i of days">{{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>


Using the if statement, we can hide/show the content to be displayed Then try 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 4 Project!';
   //array of days.
  days = ["Monday ", "Tuesday ", "Wednesday ", "Thursday", "Friday ", 
            "Saturday ", "Sunday "];
   isavailable = false;
}
print the else condition, we will have to create the ng-template as follows
<ng-template #condition1>Condition is invalid<ng-template>

code will be look like this

<div style="text-align:center">
  <h1>
      Welcome to {{title}}.
   </h1>
</div>

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

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

We have created the app.sqrt.ts class. We have to import the same in app.module.ts and specify the path of the file. It also has to be included in the declarations as shown above.


If the variable is true, then condition1, else condition2. Now, two templates are created with id #condition1 and #condition2.