Data Binding - Interpolation in databinding

 Data Binding:

Data binding allows us to communicate between component class and its corresponding view template.

Data Binding - 2Type of Data binding

1.One-way Data Binding

a) String interpolation(.ts --> to .html)

b) Property Binding (.ts --> .html)

c) Class Binding (.ts --> .html)

d) Style Binding(.ts --> .html)

e) Event Binding(.html --> .ts)

2.Two-way Data Binding

a) .html --> .ts

b) .ts --> .html

 

1.One-way Data Binding Ex:- 

.ts 

public name :string = "Sai Ram Krishna"

imgUrl = '../../assets/img/img.jpg'

Employee={
    name : 'Sai',
    age:22
}

EmpFamly=[
         {name:'RamRaj', age:44},
         {name:'NagRaj', age:45},
        {name:'BalRaj', age:46},
]

MyFamly=[
    {fname:'RamRaj', lname:'k', age:44},
    {name:'BalaRaj', lname:'', age:45},
    {name:'LakshmanRaj', lname:'k', age:46},
]

public getMyName(){
return `${this.name}`
}

.html

<h3>My Name is : {{name}}</h3>

<h3>My Name lenght : {{name.length}}</h3>

<h3>My Name UpperCase : {{name.UpperCase}}</h3>

<h3>My Name LowerCase : {{name.toLowerCase}}</h3>

<h3>My Name with method : {{getMyName()}}</h3>

<h2>My Name is : {{Employee.name}}</h2>

<h2>My Name age : {{Employee.age}}</h2>

<h1>{{EmpFamly | json}}</h1>

<h1>{{EmpFamly[1].name}}</h1>

<h2>{{MyFamly.lname ? MyFamly.lname : 'Last name is not available'}}</h2>

<img src={{imgUrl}} />