Angular8 Directives

Angular8 Directives

The DOM is manipulated through the Angular 8 directives. You may change the appearance, behavior or layout of a DOM element by using the Angular directives. It helps to expand HTML, too.

Angular 8 directives can be classified into 3 categories according to their behaviour:

• Component Directives
• Structural Directives
• Attribute Directives

Component Directives: Component directives are used in main class. They contain the detail of how the component should be processed, instantiated and used at runtime.

Structural Directives: Structural guidelines begin with a * sign. These directives are used to modify and change the DOM entity structure. For example, directory * ngIf, directive * ngSwitch, and directive * ngFor.

* ngIf Directive: ngIf lets us add / remove DOM Element.

* ngSwitch: * ngSwitch enables us to add / remove DOM elements. It is identical to the C # switch statement.

* ngFor Directive: * ngFor directive is used to repeat a portion of the HTML template from an iterable list (Collection) once per object.

Attribute Directives: Attribute Directives are used to alter the DOM elements look and actions. For example: directive ngClass, and directive ngStyle etc.

• NgClass Directive: ngClass is used for adding or removing CSS classes to an HTML element.
• NgStyle Directive: The ngStyle directive makes it easier for you to change the style of an HTML element by using the term. You may also dynamically adjust the style of your HTML item using ngStyle directive.