Data Binding - Class Binding

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

<style>
     .    textSize {
font-size:60px;
}
                .textColor{
                        color:#f60;
                }
</style>

public myClass='textSize'

public myGroup = {
textSize :true,
textColor :true
}

public isRequired: boolean = true

<P [class]="myClass">Class Binding</P>

<P [class]="myGroup">Group Classes Binding</P>

<P [ngClass]="myGroup">Group Classes Binding with ngClass</P>

<P [ngClass]="isRequired ? 'textColor':'textSize'">Group Classes Binding with Ternary operator</P>

<P [class.textSize]="isRequired">Class Binding with . operator</P>

Data Binding - Property Binding

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

To set the property of an element in view to a property defined in the component's class

1. Property Vs Attribute:
2. Attributes and properties are not the same
3. Attributes are defined by HTML
4. Properties are defined by DOM
5. Attribute values can not be change once they are initialized.
6. Property values can change

public name="Sai Krishna"

public isDisabled : boolean = false

<input type="text" value={{name}} id={{name}}>
<input type="text" [value]="name" [id]="name">

<input type="text" [value]="name" [id]="name" disabled>
<input type="text" [value]="name" [id]="name" disabled={{isDisabled}}>
<input type="text" [value]="name" [id]="name" [disabled]="isDisabled">

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