WEB DEVELOPER SITE
PYTHONJAVAPHP7
 

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.

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 "];
}
The day’s 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>
      
   </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}}
  </select>
</div>
<br/>

<div>
   <span *ngIf = "isavailable">Condition is valid. 
   //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
Condition is invalid

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}}
  </select>
</div>
<br/>

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