Angular 8 Directives

To modify the DOM, in order to change the appearance, behavior or layout of a DOM element, the Angular 8 directives are used. The Angular 8 directives help to extend HTML too.

Directives in Angular 8 are of 3 types based on their behavior.

  • Component Directives
  • Structural Directives
  • Attribute Directives

Component Directives:

Being used in the main class, the Component directives include the specifications of the way the component should be processed, instantiated and used at runtime.

Structural Directives:

Starting with a * sign, the Structural directives are employed to manipulate and modify the structure of the DOM elements. For instance, *ngIf and *ngFor.

  • *ngIf Directive: Facilitates to Add/Remove DOM Element.
  • *ngSwitch Directive: Facilitates to Add/Remove DOM Element, similar to switch statements of C#.
  • *ngFor Directive: Facilitates to repeat a portion of the HTML template once per each item from an iterable list or a Collection.

Attribute Directives:

To modify the appearance and behavior of the DOM elements, Attribute directives are used. For instance, ngClass and ngStyle.

  • ngClass Directive: Facilitates to add or remove CSS classes to an HTML element.
  • ngStyle Directive: Facilitates to modify the style of an HTML element using the expression and to dynamically change the style of an HTML element.