What Are Directives in Angular?
In this article, we will learn about the angular built-in directive. It is a custom HTML attribute that changes the behavior of the DOM element and changes the DOM style. In other words, we can say that it is being used to extend the power of the DOM elements.
Types Of Directives in Angular?
- Structural Directive.
- Component Directive.
- Attribute Directive.
1. Structural Directive.
Structure directives manipulate the DOM elements. These directives have a * sign before the directive. For example, *ngIf and *ngFor.
Example:
<div *ngFor="let user of users">{{user.name}}</div>
2. Component Directive.
Special directives in Angular are called Components since this type of directive has a template or template URLs. In effect, it is a component directive that shows something in DOM.
3. Attribute directive.
Attribute directive are used to change the look and behavior of the DOM elements. For example ngClass directive, ngStyle directive, etc.
- ngClass Directive: The ngClass directive is used to add or remove CSS classes to an HTML element.
- ngStyle Directive: The ngStyle directive facilitates you to modify the style of an HTML element using the expression. You can also use ngStyle directive to dynamically change the style of your HTML element.
Quiz App In Angular. Client Side PDF Generation In Angular With jsPDF.