Directives

Basically, directives are used to extend the power of the HTML attributes and to change the appearance or behavior of a DOM element.

Directive in Angular is a javascript class, which is declared as @directive. Angular has 3 types of directives, which are listed below –

Angular 7 Directives

Component Directives

This is the special directive which is always present in an angular app where each of our HTML page associated with this directive.(The directive with a template.)

Component Directive is a class with @Component decorator function. As we know that angular app contains at least one component called AppComponent which is present inside the App-compoennt.ts file.

In this file, we see with the help of selector, @Component which is a decorator function is used to create a component directive.

Even if we create our own component, we will use this decorator function and creating a component directive. It is not possible to render our template without using “selector” property, so with the help of this property, we will create a component directive.

Structural Directives

Structural directive modifies or manipulates the structure of DOM by adding or removing DOM elements. We can say that basically, it works on the structure of a DOM.

Angular provides several structural directives which have a * sign before the directive.

For example, *ngIf and *ngFor.

Attribute Directives

Attribute directives deal with the changing of look and behavior of the dom element, component or another directive. It is also used as attributes of elements.

The built-in NgStyle directive in the Template Syntax guide,

for example, it can change styles of several elements simultaneously. By default, angular provide two attribute directives, which are,

NgClass

By using this we can dynamically, add or remove CSS class on the basis of the certain conditions.

NgStyle

By using this we can dynamically, add or remove styles on the basis of the certain conditions.