Hii,

This is an intresting features of angularJs you can use when you want to change the value of CSS properties dynamically.

Using this feature we can change many value of css properties like background color,text color,border-color,font-size etc.

To learn how it is possible go through the given example below:

In the given examples below ng-init  directive is used to initialise the value css property and ng-model directive is used to bind the css value.

In input tag write css properties inline and instead of writting a static css value  use the initialised the value by ng-init.

Example 1:Change font size

<div ng-app=" " ng-init="textSize='20px'">

<input style="font-size:{{textSize}}" ng-model="textSize" >

</div>

Output:Input value having font-size 20px.

Example 2:Change border-color

<div ng-app=" " ng-init="borderColor='red'">

<input style="border-color:{{borderColor}}" ng-model="borderColor" >

</div>

Output:Input value having border-color red.

Example:3 Change background-color

<div ng-app=" " ng-init="bgColor='red'">

<input style="background-color:{{bgColor}}" ng-model="bgColor" >

</div>

Output:Inputbox background color will be red.

Example:4 Change text-color

<div ng-app=" " ng-init="textColor='red'">

<input style="color:{{textColor}}" ng-model="textColor" >

</div>

Output:Input value text color will be red.