Wednesday, November 22, 2023

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>


No comments:

Post a Comment