Demonstration of ngStyle in Angular2

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.