In AngularJs 1.x, we had ng-style directive for specifying the style attribute for the HTML element. But Angular 2 use ngStyle built in directive that offers a simple way to alter the element styles. In this article we will look into ngStyle with some examples.
Introduction
In AngularJs 1.x, we had ng-style directive for specifying the style attribute for the HTML element. But Angular 2 use ngStyle built in directive that offers a simple way to alter the element styles. In this article we will look into ngStyle with some examples.
Example 1: Setting ngStyle conditionally to demonstrate alternate row color
In this example, we will demonstrate how to use ngStyle conditionally to bring the alternate row color effect in table rows.
<h1>
<b>
<font color="blue">Employee Details</font>
</b>
</h1>
<table border="1">
<tr>
<th style="background-color: #4CAF50;">Sl No.</th>
<th style="background-color: #4CAF50;">Name</th>
<th style="background-color: #4CAF50;">Photo</th>
<th style="background-color: #4CAF50;">Gender</th>
<th style="background-color: #4CAF50;">Address</th>
</tr>
<tbody *ngFor="let e of employees; let i = index">
<tr [ngStyle]="{'backgroundColor': (i % 2 === 0)?'#66d9ff':'#cc99ff'}">
<td><span>{{i + 1}}</span></td>
<td><span>{{e.name}}</span></td>
<td><span><img src={{e.photo}} width="100px" height="100px" /></span></td>
<td><span>{{e.gender}}</span></td>
<td><span>{{e.address}}</span></td>
</tr>
</tbody>
</table>
The snippet [ngStyle]="{'backgroundColor': (i % 2 === 0)?'#66d9ff':'#cc99ff'}" sets the backgroundColor of the table rows based on the condition specified.
The DOM is rendered as under
Example 2: Adding multiple properties to ngStyle
We can add multiple properties to ngStyle by specifying comma(,) in between them. Let's follow the below example.
<h1>
<b>
<font color="blue">Employee Details</font>
</b>
</h1>
<table border="1">
<tr>
<th style="background-color: #4CAF50;">Sl No.</th>
<th style="background-color: #4CAF50;">Name</th>
<th style="background-color: #4CAF50;">Photo</th>
<th style="background-color: #4CAF50;">Gender</th>
<th style="background-color: #4CAF50;">Address</th>
</tr>
<tbody *ngFor="let e of employees; let i = index">
<tr [ngStyle]="{'backgroundColor': (i % 2 === 0)?'#66d9ff':'#cc99ff','font-size': '24px' }">
<td><span>{{i + 1}}</span></td>
<td><span>{{e.name}}</span></td>
<td><span><img src={{e.photo}} width="100px" height="100px" /></span></td>
<td><span>{{e.gender}}</span></td>
<td><span>{{e.address}}</span></td>
</tr>
</tbody>
</table>
As can be figure out that, we have included the font-size property along with the backgroundColor property in the ngStyle
and the DOM changes to
Example 3: Conditionally adding multiple properties to ngStyle
We can equally add multiple properties to ngStyle conditionally at runtime as under
<h1>
<b>
<font color="blue">Employee Details</font>
</b>
</h1>
<table border="1">
<tr>
<th style="background-color: #4CAF50;">Sl No.</th>
<th style="background-color: #4CAF50;">Name</th>
<th style="background-color: #4CAF50;">Photo</th>
<th style="background-color: #4CAF50;">Gender</th>
<th style="background-color: #4CAF50;">Address</th>
</tr>
<tbody *ngFor="let e of employees; let i = index">
<tr [ngStyle]="{'backgroundColor': (i % 2 === 0)?'#66d9ff':'#cc99ff','font-size': (i % 2 === 0)?'24px':'12px', 'color': (i % 2 === 0)? 'blue':'red' }">
<td><span>{{i + 1}}</span></td>
<td><span>{{e.name}}</span></td>
<td><span><img src={{e.photo}} width="100px" height="100px" /></span></td>
<td><span>{{e.gender}}</span></td>
<td><span>{{e.address}}</span></td>
</tr>
</tbody>
</table>
Here we are adding the backgroundColor,font-size and color properties based on the conditions specified at run time to ngStyle.
The DOM reflection is as under
References
NgStyle
Conclusion
In this article we have learnt the use of ngStyle of Angular 2 with examples. Hope this will be helpful. Thanks for reading. Zipped file is attached herewith.