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 –
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.
