In this video we are going to learn about Style Binding.
Style binding is used to set a style of a view element.
We can set inline styles with style binding.
Now lets see how can do style binding in angular 10.
So switch to the project and just open app.component.html file.
Now just add a paragraph.

<p>Style Binding….</p> 

Now here for binding the css.

<p [style.color]=\"'blue'\">Style Binding….</p> 

Now save the file lets check it.
So switch to the browser and.
Here you can see text color is blue.
If change color green.
Now The text color is green.
Now lets see the style biniding through property.
For that just crate a property inside the app.component.ts file.

textColor='Blue'; 

Now go to the app.application.html file and here just add another paragraph and bind the style.

<p [style.color]=\"textColor\" >Style Binding using Property…</p> 

Now lets check.
So switch to the browser and here you can see text color blue.
Alright now lets see multiple style property binding.
For that crate new property insidet the app.component.ts file.

textStyle={ 
    color:\"blue\"; 
    fontStyle:\"italic\"; 
    textDecoration:\"underline\"; 
}

Here you cant use hyphen.
You have to use camel case alright Now lets bind it.
So inside the app.component.html file add new paragraph and bind the style.

<p [style]=\"textStyle\">Multiple style binding….</p> 

Nows lets check it.
You can see the text in blue color, italic and underline.
Now lets see the conditional style binding.
For that create new property.

hasError = false; 

Now go to the app.component.html and here add new paragraph tag.

<p [style.color] = \"hasError ? 'red' : 'green'\">Conditonal style binding…</p> 

If hasError value is true then red color applied here otherwie green.
So lets check.
You can see the color is green.
Now lets change the hasError value to true.
Now you can see the color is red.
So in this way can do Style binding in Angular 10.