DataBinding in Angular
§ Data
binding is the mechanism for coordinating between the Template (DOM) and Component (Property).
§ Data
binding means data flowing from component to template or data flowing template to component.
§ Data
binding plays an important role in communication between a template and its component, and is also important for communication between parent and child components.
§ In
Angular data-binding can be broadly classified into 3 categories.
|
Data
Binding
|
Description
|
|
One-way data-binding
|
From Component to View Template
|
|
One-way data-binding
|
From View Template to Component
|
|
Two-way data-binding
|
From Component to View Template & From View template to Component
|
v
One-way
data-binding
§ we
will discuss the first one-way data-binding i.e. From Component to View
Template. We achieve this using interpolation
§ Interpolation
is a way of all about data binding.
§ Suppose
We create a new property in the AppComponent class and let's call it
title and assignment the string.
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'Angular-Interpolation-Demo';
}
§ So
now how do we get this title property value into template(app.component.html)
file.
§ The
answer is {{}} double curly braces and inside the {{}} double
curly braces the specified the property in our case it is the title
property and the syntax of a property or an expression within curly braces is
known as interpolation in angular {{propertyName}}
or{{expression}}.
§ By
using interpolation, we are asking angular to evaluate the content inside the double
curly braces and display the value when the component is rendered in the
browser.
§ Using
interpolation technique we can read data on a view template from Component, we
place the component property name in the view template, enclosed in double
curly braces: {{propertyName}}.
Example:-
§ In
Component class(app.component.ts) file we define two property named siteName, siteUrl.now we try to
access component class property into template(app.component.html)file.
import {Component} from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
siteName="Angular-InterPolation-Demo";
siteUrl=window.location.href;
}
Site-Name: {{siteName}} <br/>
Site-URL: {{siteUrl}}
§ You
can specify any valid expression in double curly braces also. For example, you
can have
Sum= {{100+200+300}}
§ The
above expression evaluates to 600
§ The
expression that is enclosed in double curly braces is commonly called as
Template Expression.
§ You
can also use interpolation to set <img> src as shown in the example
below.
§ Creating
images folder: We will place all the images that we are going to use in
"images" folder. We will have the images folder in the
"assets" folder. So, add a new folder in the "assets"
folder and name its "images" and copy the following 3 images. Name
the images virat.png, rohit.png and sachin.png.
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
player1:string="Sachin Ramesh Tendulkar";
player2:string="Virat Kohli";
player3:string="Rohit Gurunath Sharma";
player1photoPath:string="assets/images/sachin.png";
player2photoPath:string="assets/images/virat.png";
player3photoPath:string="assets/images/rohit.png";
}
<table border="5px solid black">
<tr>
<th>Player-Name</th>
<th>Player-Image</th>
</tr>
<tr>
<td>{{player1}}</td>
<td> <img src='{{player1photoPath}}'/></td>
</tr>
<tr>
<td>{{player2}}</td>
<td> <img src='{{player2photoPath}}'/></td>
</tr>
<tr>
<td>{{player3}}</td>
<td> <img src='{{player2photoPath}}'/></td>
</tr>
</table>
We can also call class methods using interpolation
as shown below.
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
fullName:string="Sachin Ramesh Tendulkar";
age:number=46 ;
gender:string="Male";
photoPath:string="assets/images/sachin.png";
getDetails():string{
return this.fullName+ ' '+this.age+' '+this.gender;
}
}
app.component.html
<img src='{{photoPath}}'/><br/>
<p>{{'Player-Details:'+getDetails()}}</p>
Output:-
v You
can also use interpolation to be a
ternary operator as shown in the example below
v Double curly braces contain template expressions
which allow us to read primitive or object values from component properties.You
can also use interpolation to be a
ternary operator as shown in the example below.
app.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
heading = 'PLayer Details';
//creating an object
player:any={
fullName:"Sachin Ramesh Tendulkar",
age:46,
gender:"Male",
country:"India"
}
}
app.component.html
<h2>{{heading}}</h2>
<p>
Name: {{player.gender === 'Male' ? 'Mr.' : 'Ms.'}}
{{player.fullName }}
</p>
<p>Age: {{player.age}}</p>
<p>Contury: {{player.country}}</p>
Now we are using angular material table for designing following template.
§ So first add angular material in our project by
following command
§ ng add @angular/material
§ Now we open Terminal in VSCode
§ To open Terminal in VSCode go to view menu and click
on it and select Integrated Terminal
The ng add command will additionally perform the
following configurations:
§ Add project dependencies to package.json.
§ Add the Roboto font to your index.html.
§ Add the Material Design icon font to your index.html.
§ Add a few global CSS styles to:
§ Remove margins from body
§ Set height: 100% on html and body
§ Set Roboto as the default application font
§ The ng add command will install Angular Material,
the Component Dev Kit (CDK), Angular Animations and ask you the following
questions to determine which features to include:
§ Choose a prebuilt theme name, or "custom"
for a custom theme:
You can choose from prebuilt material design themes or set up an
extensible custom theme
Set up browser animations for Angular Material:
§ Importing the BrowserAnimationsModule into your
application enables Angular's animation system.
§ So When we add angular material in our project then
in app module (app.module.ts)file BrowserAnimationsModule
is imported and added in import’s array.
§ Open the app.module.ts file and check here.
app.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
//declaring players property as an array
//players property container array of player object
players=
[
{
name:'Sachin Ramesh Tendulkar',
photoPath:'assets/images/sachin.png'
},
{
name:'Virat Kohli',
photoPath:'assets/images/virat.png'
},
{
name:'Rohit Gurunath Sharma',
photoPath:'assets/images/rohit.png'
}
];
//list of columns
displayedColumns:string[]=['name','photoPath'];
}
app.component.html
<table mat-table [dataSource]="players" class="mat-elevation-z8">
<!--- Note that these columns can be defined in any order.
The actual rendered columns are set as a property on the row definition" -->
<!-- Name Column -->
<ng-container matColumnDef="name">
<th mat-header-cell *matHeaderCellDef> Name. </th>
<td mat-cell *matCellDef="let player"> {{player.name}} </td>
</ng-container>
<!-- Image Column -->
<ng-container matColumnDef="photoPath">
<th mat-header-cell *matHeaderCellDef> Image </th>
<td mat-cell *matCellDef="let player"> <img src="{{player.photoPath}}"/> </td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>
app.component.css
Author Name
Author Description!
Get Free Email Updates to your Inbox!
Post a Comment