Angular Directives are used to create or change structure and behavior of DOM Elements. They are used to manage forms, lists, tables, styles in Angular.

There are three types of directives in angular.

Types of Directives

  1. Structural
  2. Attribute
  3. Component

Structural directives like *ngFor and *ngIf are used iterate of print only id condition is true.

Attribute directives like NgStyle and NgModel are used to add inline css and declare Model (data logic) of application.

Component directives have their own template unlike Structural and Attribute directives.


Structural Directive

Structural directives are used to change structural of DOM Elements. There are three structural directives in Angular.

Types of Structural Directive

  1. NgIf
  2. NgFor
  3. NgSwitch

NgIf directive

ngIf directive is used to show an element if condition is true. Like display a paragraph only if condition is true, else hide it.

ngIf in Angular

NgFor directive

ngFor directive is used to create an element through loop. It is used for Array, Objects and JSON Data.

ngFor in Angular

NgSwitch

ngSwitch directive is used to show or hide element based of switch condition.

ngSwitch in Angular

Attribute Directive

Attribute directive like ngStyle and ngModel

Type of attribute directives

  1. ngClass
  2. ngStyle
  3. ngModel

Component Directive

Components directive are directives used with a template. Component directives are the most common directive type in Angular.