In this video we are going to learn about Class Binding.
Class binding is used to set a class property of a view element.
We can add and remove the CSS class name from an element's class attribute with class binding.
Alright, So lets see how can we use class binding in angular 10.
Switch to the project just open app.component.css file and here just create some css classes.
Now lets bind these classes.
Before binding these classes.
Lets create some properties so go to app.component.ts and create some properties.
Now go to app.component.html file and write the following code.
Alright now lets check it.
So switch to the browser and you can see here the class has been applied on these text.
Now lets see the conditional class binding.
For that lets create one new property.
Now go to the app.component.ts file and here add one more paragraph.
If hasError value is true then this error class will be applied on this p tag otherwise it will not applied.
So this time hasError value is false.
So lets check it in browser and you can see the text in normal color.
If I change it into true.
You can see the text is now becomes in red in color.
Ok it means error class has been applied here.
Now lets see the multiple classes binding For that just go to the app.component.ts file create a property.
Now lets bind this so goto the app.component.ts file.
Now lets check it.
and here you can see the the success and special both class are apllied.
Now lets see the conditional applied multiple class binding.
For that just crate one new property into the app.component.ts file.
Now lets bind it.
So go to the app.component.html file and create a new paragraph.
Now lets check it.
This time hasError value you can see is false.
Now switch to the browser and you can see the color.
If is change it into true.
Then it becomes into red in color.
So in this way you can do class binding in angular 10.
Class binding is used to set a class property of a view element.
We can add and remove the CSS class name from an element's class attribute with class binding.
Alright, So lets see how can we use class binding in angular 10.
Switch to the project just open app.component.css file and here just create some css classes.
.success{
color:green;
}
.error{
color:red;
}
.special{
font-weight: 700;
text-decoration: underline;
}
Now lets bind these classes.
Before binding these classes.
Lets create some properties so go to app.component.ts and create some properties.
success='success';
error = 'error';
special='special';
Now go to app.component.html file and write the following code.
<p [class]=\"success\">Success Message Here…</p>
<p [class]=\"error\">Error Message Here…</p>
<p [class]=\"special\">Special Message Here…</p>
Alright now lets check it.
So switch to the browser and you can see here the class has been applied on these text.
Now lets see the conditional class binding.
For that lets create one new property.
hasError=false;
Now go to the app.component.ts file and here add one more paragraph.
<p [class.error]=\"hasError\">Conditonal Message Here. .</p>
If hasError value is true then this error class will be applied on this p tag otherwise it will not applied.
So this time hasError value is false.
So lets check it in browser and you can see the text in normal color.
If I change it into true.
You can see the text is now becomes in red in color.
Ok it means error class has been applied here.
Now lets see the multiple classes binding For that just go to the app.component.ts file create a property.
multiClasses = [\"success\",\"special\"];
Now lets bind this so goto the app.component.ts file.
<p [class] = \"multiClasses\">Multiple Class Binding</p>
Now lets check it.
and here you can see the the success and special both class are apllied.
Now lets see the conditional applied multiple class binding.
For that just crate one new property into the app.component.ts file.
conditionalMultiClasses={
\"success\":!this.hasError,
\"error\":this.hasError.
};
Now lets bind it.
So go to the app.component.html file and create a new paragraph.
<p [class] = \"conditionalMultiClasses\">Conditional Multiple Class Binding</p>
Now lets check it.
This time hasError value you can see is false.
Now switch to the browser and you can see the color.
If is change it into true.
Then it becomes into red in color.
So in this way you can do class binding in angular 10.
