Angular 9/8 ngIf Tutorial & Example

Angular 9/8 ngIf Tutorial & Example

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

What's the ngIf Directive?

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 9 HTML template based on some condition.

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 with Angular 9 Example

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

Let's see a simple example.

Let's suppose, we have the following Angular 9 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.

Using ngIf in Angular 9

One way of achieving this in Angular 9 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 9.

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.


  • Author: Techiediaries Team


Angular 9 Components: Input and Output
Angular 13 selectors
Picture-in-Picture with JavaScript and Angular 10
Jasmine Unit Testing for Angular 12
Angular 9 Tutorial By Example: REST CRUD APIs & HTTP GET Requests with HttpClient
Angular 10/9 Elements Tutorial by Example: Building Web Components
Angular 10/9 Router Tutorial: Learn Routing & Navigation by Example
Angular 10/9 Router CanActivate Guards and UrlTree Parsed Routes
Angular 10/9 JWT Authentication Tutorial with Example
Style Angular 10/9 Components with CSS and ngStyle/ngClass Directives
Upload Images In TypeScript/Node & Angular 9/Ionic 5: Working with Imports, Decorators, Async/Await and FormData
Angular 9/Ionic 5 Chat App: Unsubscribe from RxJS Subjects, OnDestroy/OnInit and ChangeDetectorRef
Adding UI Guards, Auto-Scrolling, Auth State, Typing Indicators and File Attachments with FileReader to your Angular 9/Ionic 5 Chat App
Private Chat Rooms in Angular 9/Ionic 5: Working with TypeScript Strings, Arrays, Promises, and RxJS Behavior/Replay Subjects
Building a Chat App with TypeScript/Node.js, Ionic 5/Angular 9 & PubNub/Chatkit
Chat Read Cursors with Angular 9/Ionic 5 Chat App: Working with TypeScript Variables/Methods & Textarea Keydown/Focusin Events
Add JWT REST API Authentication to Your Node.js/TypeScript Backend with TypeORM and SQLite3 Database
Building Chat App Frontend UI with JWT Auth Using Ionic 5/Angular 9
Install Angular 10 CLI with NPM and Create a New Example App with Routing
Styling An Angular 10 Example App with Bootstrap 4 Navbar, Jumbotron, Tables, Forms and Cards
Integrate Bootstrap 4/jQuery with Angular 10 and Styling the UI With Navbar and Table CSS Classes
Angular 10/9 Tutorial and Example: Build your First Angular App
Angular 9/8 ngIf Tutorial & Example
Angular 10 New Features
Create New Angular 9 Workspace and Application: Using Build and Serve
Angular 10 Release Date: Angular 10 Will Focus on Ivy Artifacts and Libraries Support
HTML5 Download Attribute with TypeScript and Angular 9
Angular 9.1+ Local Direction Query API: getLocaleDirection Example
Angular 9.1 displayBlock CLI Component Generator Option by Example
Angular 9 Basics Tutorial by Example
Angular 9/8 ngFor Directive: Render Arrays with ngFor by Example
Responsive Image Breakpoints Example with CDK's BreakpointObserver in Angular 9/8
Angular 9/8 DOM Queries: ViewChild and ViewChildren Example
The Angular 9/8 Router: Route Parameters with Snapshot and ParamMap by Example
Angular 9/8 Nested Routing and Child Routes by Example
Angular 9 Examples: 2 Ways To Display A Component (Selector & Router)
Angular 9/8 Tutorial: Http POST to Node/Express.js Example
Angular 9/8 Feature and Root Modules by Example
Angular 9/8 with PHP: Consuming a RESTful CRUD API with HttpClient and Forms
Angular 9/8 with PHP and MySQL Database: REST CRUD Example & Tutorial
Unit Testing Angular 9/8 Apps Tutorial with Jasmine & Karma by Example
Angular 9 Web Components: Custom Elements & Shadow DOM
Angular 9 Renderer2 with Directives Tutorial by Example
Build Progressive Web Apps (PWA) with Angular 9/8 Tutorial and Example
Angular 9 Internationalization/Localization with ngx-translate Tutorial and Example
Create Angular 9 Calendar with ngx-bootstrap datepicker Example and Tutorial
Multiple File Upload with Angular 9 FormData and PHP by Example
Angular 9/8 Reactive Forms with Validation Tutorial by Example
Angular 9/8 Template Forms Tutorial: Example Authentication Form (ngModel/ngForm/ngSubmit)
Angular 9/8 JAMStack By Example
Angular HttpClient v9/8 — Building a Service for Sending API Calls and Fetching Data
Upgrade Angular 8/7 to Angular 9 With Ng Update & Angular CLI v9
Build an Angular 9/8 CRUD Example & Tutorial
Styling An Angular 9/8/7 Example App with Bootstrap 4 Navbar, Jumbotron, Tables, Forms and Cards
Angular 9/8 CLI Commands: Install Angular CLI On Windows 10, Linux and macOS
Angular 8/7 Tutorial By Example: (REST API, HttpClient GET, Components, Services & ngFor)