Demonstration of ngIf in AngularJS2

Introduction

In AngularJs 1.x, we had ng-show and ng-hide directives for displaying and hiding the DOM elements respectively. But Angular 2 use ng-If to being the same effect. NgIf works on by adding, removing or replacing a part of the DOM depending on the expression being supplied as parameter. In this article we will look into ngIf with some examples.

Example 1 - Setting ngIf statically

In this example, we will just change the value of *ngIf statically and look into the effect. Let us open the html and write the below

<h1>
	<b>
		<font color="blue">Demonstration of ngIf in AngularJS2 - Example 1</font>
		<p *ngIf="true">This will be controlled using ngIf</p>
	</b>
</h1>

Let us run the application and the output is

The DOM is rendered as under

Change the value of *ngIf='false' and the output becomes

The DOM is rendered as under

ngIf works by adding and removing elements(here p-tag) from the DOM. So when the value of *ngIf="true", the template binding was

template bindings={"ng-reflect-ng-if": "true"}

and the moment it was set to *ngIf="false", the template binding was

template bindings={"ng-reflect-ng-if": null}

Example 2 - Setting ngIf at runtime

Let us first open app.ts file inside the src folder and write the below code

// Annotation section
@Component({
  selector: 'employee-selector',
  templateUrl: 'employee-information-apps.html'
})

// Component controller
export class EmployeeInformation {
  
  hideParagraph: true;
  constructor() { }
}

We have exposed a property call hideParagraph and set it's value to "true". Let us open the html and write the below

<h1>
	<b>
		<font color="blue">Demonstration of ngIf in AngularJS2 - Example 2</font>
		<p *ngIf="hideParagraph">This will be controlled using ngIf</p>
	</b>
</h1>

Let us run the application and the output is

Change the property value to *ngIf="!hideParagraph" and the output is

Example 3 - Setting ngIf conditionally to hide/show rows

In this example, we will demonstrate how to use ngIf conditionally to hide/show 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  *ngIf= "i % 2 === 0 ?false:true">
							    
					  <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 *ngIf= "i % 2 === 0 ?false:true" hides every odd rows based on the condition specified.

The DOM is rendered as under

References

NgIf

Conclusion

In this article we have learnt the use of ngIf of Angular 2 with examples. Hope this will be helpful. Thanks for reading. Zipped file is attached herewith.