Angular Directives

Angular uses a set of directives for manipulating DOM elements and templates to extend the power of the HTML. The three types of directives in angular:

  • 1) Attribute directives
  • 2) Structural directives
  • 3) Components

Attribute directives

Attribute directives can change the appearance or behavior of DOM element. Its use as attribute of element.

demo
demo
demo
demo

Structural directives

Structural directives can change the behavior of DOM by adding, removing and manipulating DOM elements. The example of structural directive - NgFor, NgSwitch, and NgIf.

NOTE- It is easy to recognize, asterisk (*) precedes the directive attribute name.

*ngIf

demo
demo

*ngFor

demo
demo

*ngSwitch

demo
demo