6. Software IndustrySultan Ahmed Sagor
What are Data Binding?
Data binding is a connection bridge between view and the business logic (view model)
of the application.
9. Software IndustrySultan Ahmed Sagor
Interpolation
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
}
10. Software IndustrySultan Ahmed Sagor
Interpolation
<!--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>
13. Software IndustrySultan Ahmed Sagor
Property Binding
❖ In Angular 7, property binding is used to pass data from the component class (component.ts) and
setting the value of the given element in the user-end (component.html).
❖ Property binding is an example of one-way databinding where the data is transferred from the
component to the class.
❖ The main advantage of property binding is that it facilitates you to control elements property.
14. Software IndustrySultan Ahmed Sagor
Property Binding
❖ Now we will see property binding in action.
❖ imageUrl:string = '../../assets/logo.png' ;
❖ <img [src]="imageUrl" alt="">
❖ We will see same thing as like as before.
17. Software IndustrySultan Ahmed Sagor
Event Binding
❖ When a user interacts with an application it generates an event .
❖ Some examples of the events are:
❖ keyboard movement,
❖ a mouse click
❖ a mouseover
❖ These events need to be handled to perform some kind of action.
❖ This is where event binding comes into picture.
❖ Now we will see event binding in real life example.
18. Software IndustrySultan Ahmed Sagor
Event Binding
❖ Let us generate a component by the following command.
❖ In databind.component.html file type in the following code.
❖ We will see a textbox in the browser.
ng g c databind
<input type=”text” value=”MagnetBrains” />
19. Software IndustrySultan Ahmed Sagor
Event Binding
❖ Let us generate a component by the following command.
❖ In databind.component.html file type in the following code.
❖ We will see a textbox in the browser.
ng g c databind
<input type=”text” value=”MagnetBrains” />
20. Software IndustrySultan Ahmed Sagor
Event Binding
❖ we have to do the event binding so update the following code indatabind.component.html file.
❖ In databind.component.ts file write up the following code to define the function showvalue() –
❖ After this again click on input box and you would notice events being passed on console tab.
<input type=”text” value=”MagnetBrains” (click)="showvalue($event)" />
showvalue(event){
console.log(“event”);
}
21. Software IndustrySultan Ahmed Sagor
Event Binding
❖ Let pass values from presentation layer (view) to component.
❖ Now we will see the log message in the console when we will click the textbox.
showvalue(event){
console.log('event.target.value');
}
23. Software IndustrySultan Ahmed Sagor
2 Way Data binding
❖ Two-way data binding in Angular will help users to exchange data from the component to view and
from view to the component.
❖ It will help users to establish communication bi-directionally.
❖ Two-way data binding can be achieved using a ngModel directive in Angular.
❖ The below syntax shows the data binding using (ngModel),
24. Software IndustrySultan Ahmed Sagor
2 Way Data binding
❖ Let us define a text box :
❖ Corresponding business logic may be as following:
<h2>Two-way Binding Example</h2>
<input [(ngModel)]="fullName" /> <br/><br/>
<p> {{fullName}} </p>
export class AppComponent {
fullName: string = "Hello JavaTpoint";
}
27. Software IndustrySultan Ahmed Sagor
Parent to Child Component
❖ In this situation, the parent component has a message.
❖ Let us pass this message to child component, in the child component HTML, displaying the message:
❖ So call the child component like as following:
parentMessage:string = 'Data is passing' ;
<app-heroes [message]='parentMessage'></app-heroes>
28. Software IndustrySultan Ahmed Sagor
Parent to Child Component
❖ The child components typescript class must have to change like as following:
❖ Now print the message from child components view file:
@Input() message;
<p>{{message}}</p>