In this article, we will learn how to implememt NgIF structural directive using angular 9.

NgIf directive overview

NgIf — change the DOM layout by adding and removing DOM elements based on a conditional statement. Placing the ngIf directive on a component, or element, will in fact hide or show that element based on the truthy or falsy of the condition you pass it.

NgIf usage example

Using NgIf directive is very simple, all you need to do is add it to any html element that you want to show/hide.

<div *ngIf="isLoading">
  Loading...
</div>

The div above will be added to the DOM only if isLoading is true.

Implementation

Now that we understand NgIf and how to use it, lets start with our own implementation. We'll call it MyNgIf.

Create project using angular CLI

Open terminal and run ng new ngif-directive, this creates new angular project called ngif-directive.

Directive using angular CLI

cd into the project and run ng g d myNgIf to generate directive template file. Open my-ng-if.directive.ts and paste the following code:

import {
Directive, 
Input, 
TemplateRef, 
ViewContainerRef
} from '@angular/core';

@Directive({
  selector: '[appMyNgIf]'
})
export class MyNgIfDirective {

  @Input() set appMyNgIf(condition: boolean) {
    if (condition) {
      this.viewContainer.createEmbeddedView(this.templateRef);
    } else {
      this.viewContainer.clear();
    }
  }

  constructor(private templateRef: TemplateRef<any>,
              private viewContainer: ViewContainerRef) { }

}

The @Directive decorator is used to configure this class as an directive. The brackets ([]) on selector: '[appMyNgIf]' make this directive an attribute selector. Angular will locates each element in the template that has an attribute 'appMyNgIf' and applies the logic of this directive.

The @Input decorator is used to pass data to the directive from the element our directive is attached to.

TemplateRef represent the element our directive is attached.

ViewContainerRef is a container where one or more template can be attached by calling createEmbeddedView method. To remove attached template(s) we call clear method.

Use appMyNgIf directive

Paste the following code into app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `
    <div *appMyNgIf=condition>
      Loading...
    </div>
    <button (click)="condition = !condition">Show/Hide</button>
  `,
})
export class AppComponent {
  condition = true;
}

If you run the app (npm start) and go to http://localhost:4200, the div with loading... should be rendered.

If you click Show/Hide button, the div should be hidden.

Code available on github