Angular data binding

Software IndustrySultan Ahmed Sagor
Angular 7
A framework for Presentation Layer

Angular Data Binding

Angular Tutorial: Road Covered So Far

What is Data Binding ?
Now we will discuss angular data binding

What are Data Binding?
Data binding is a connection bridge between view and the business logic (view model)
of the application.

Type of Data Binding
Now we will see types of data binding

Type of Data Binding

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
}

Interpolation

<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>

Interpolation

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.

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.

Property Binding

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.

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” />

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”);
}

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');
}

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),

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";
}

2 Way Data binding

Interpolation & Event Binding

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>

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>

Any
question?

Thank You

Angular data binding

More Related Content

What's hot (20)

Similar to Angular data binding (20)

Recently uploaded (20)

Angular data binding