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.