Lets start discussing from types of directives available in Angular. There are two types of directives available in Angular.

1. Structural Directives

Structural directives are the directives which can change the structure of DOM and perform DOM manipulations.

2. Attribute Directives

Attribute directives are the directives that can change the appearance or behavior of DOM elements and Angular components

This article is all about the structural directives. Angular provides few inbuilt structural directives like NgIf, NgFor and NgSwitch. Let’s see an example of NgIf below :-

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

@Component({
  selector: 'my-app',
  template: '<div *ngIf="condition">Hello</div>',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  condition: boolean = true;
}

NgIf is a directive, that displays the element on which its attached only if the condition passed to it is truthy. But lets look at the syntax of it closely. In Angular the directive is named only as ngIf. But here we are using it with an asterisk(*).

As per Angular’s official documentation :-

The asterisk, ***_, syntax on a structural directive, such as _*ngIf_, is shorthand that Angular interprets into a longer form. Angular transforms the asterisk in front of a structural directive into an _**_ that surrounds the host element and its descendants._

#typescript #javascript #html #web #angular