Angular Directives
Written By: Avinash Malhotra
Updated on
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
- Structural
- Attribute
- 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
- NgIf
- NgFor
- 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 AngularNgFor directive
ngFor directive is used to create an element through loop. It is used for Array, Objects and JSON Data.
ngFor in AngularNgSwitch
ngSwitch directive is used to show or hide element based of switch condition.
ngSwitch in AngularAttribute Directive
Attribute directive like ngStyle and ngModel
Type of attribute directives
- ngClass
- ngStyle
- ngModel
Component Directive
Components directive are directives used with a template. Component directives are the most common directive type in Angular.