Angular 7/8 ngIf Tutorial & Example

The ngIf directive in Angular allows you to do conditional rendering of template parts i.e you can show or hide an HTML element on your Angular HTML template based on some condition.

Throughout this quick tutorial, you'll be learning about how you can use ngIf in your Angular 7/8 applications.

Note: In this Angular 8 tutorial, we'll see the ngIf directive in a complete example that consumes data from a third-party API and render it in the HTML template.

Let's get started started!

See this Stackblitz example of how to use ngFor and ngIf in your Angular HTML template:

ngIf by example

The ngIf directive can be very useful in scenarios where you want to show a part of your Angular 8 application UI.

Let's see a simple example.

Let's suppose, we have the following Angular component that lives in the src/app/contact-list/contact-list.component.ts:

import { Component } from '@angular/core';  
@Component({  
  selector: 'contact-list',  
  templateUrl: './contact-list.component.html',  
  styleUrls: ['./contact-list.component.css']  
})  
export class ContactListComponent {  
  showActions: boolean = false;  
  contacts: <> = [
    {name: "test1", email:"test1@test1.com"},
    {name: "test2", email:"test1@test2.com"},
    {name: "test3", email:"test1@test3.com"},
    {name: "test4", email:"test1@test4.com"}
    ]
}  

This component will be used to display a table of contacts with various buttons, in each row, that will be used to update or delete the contacts.

Typically, in this kind of applications, you only want to let users to update or delete items if they are logged in and have the required permissions.

This means, that you either need to disable or hide the delete and update buttons if users are not logged in.

One way of achieving this in Angular 8 applications is through using the ngIf directive.

On the ContactListComponent component, we have added the Boolean showActions variable. You can then listen for the authentication state and set the showActions accordingly.

In the component's template, you need to use the ngIf directive and show or hide the actions' buttons depending on the value of the showActions variable. This is an example of the template:

<h1>Contact List</h1>
<table>
<thead>
<th>Name</th>
<th>Email</th>
<th *ngIf="showActions">Actions</th>
</thead>
<tbody>
<tr *ngFor="let contact of contacts">
<td>
    {{contact.name}}
</td>
<td>
    {{contact.email}}
</td>
<td *ngIf="showActions">
    <button>Delete</button>
    <button>Update</button>
</td>
</tr>
</tbody>
</table>  

This will only show the table cells that contains the actions buttons when showActions is True.

Conclusion

In this quick tutorial, we learned about the ngIf directive in Angular.

If you would like to see a complete example. Read this Angular 8 tutorial where we used ngIf to conditionaly render an HTML fragment while data is being fetched from the API.

Note: We also publish our tutorials on Medium and DEV.to. If you prefer reading in these platforms, you can follow us there to get our newest articles.

You can reach the author via Twitter:

About the author

Ahmed Bouchefra
is a web developer with 5+ years of experience and technical author with an engineering degree on software development. You can hire him with a click on the link above or contact him via his LinkedIn account. He authored technical content for the industry-leading websites such as SitePoint, Smashing, DigitalOcean, RealPython, freeCodeCamp, JScrambler, Pusher, and Auth0. He also co-authored various books about modern web development that you can find from Amazon or Leanpub


Get our Learn Angular 8 in 15 Easy Steps ebook in pdf, epub and mobi formats, plus a new Angular 8 tutorial every 3 days.


Online Courses (Affiliate)

If you prefer learning with videos. Check out one of the best Angular courses online
Angular 8 - The Complete Guide (2019+ Edition)

Angular Crash Course for Busy Developers

comments powered by Disqus
DMCA.com Protection Status