Demonstration of ngIf in AngularJS2

Rajnilari2015
Posted by in Angular 2 category on for Beginner level | Points: 250 | Views : 662 red flag

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.


 Download source code for 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.

Page copy protected against web site content infringement by Copyscape

About the Author

Rajnilari2015
Full Name: Niladri Biswas (RNA Team)
Member Level: Platinum
Member Status: Member,Microsoft_MVP,MVP
Member Since: 3/17/2015 2:41:06 AM
Country: India
-- Thanks & Regards, RNA Team


Login to vote for this post.

Comments or Responses

Login to post response

Comment using Facebook(Author doesn't get notification)