What are Angular Directives?
Directives are the instructions in DOM which give the way how to place your components and business Logic in Angular.
Angular Directives start with @Directive and have the prefix ng-.
Let’s discuss the types of directives. There are basically four types of directives as discussed below:
1. Component Directives
Component Directives describe the detail of the component about their instantiation and working during the runtime.
Component Directives tell about-
In component, it consists of three parameters
(i) selector:- It specifies the beginning and end of the component
(ii) templateUrl:-It specifies which template is being used in the component.
(iii) styleUrls:-It specifies which styling is being used in the component.
2. Structural Directives
A Structural directive basically deals with manipulating the DOM elements. So, if the user wants to use the structural directive then we have to include the * sign before the directive.
The directive does not take into account the particular HTML element if the condition gets false.
If it gets true the particular element is added to the DOM.
We use ngFor to fetch the data and to reduce the redundancy in our code.
NgSwitchCase displays one element from a possible set of elements based on conditions.
3. Attribute Directives
Attribute directives deal with changing the look and behavior of the dom element. You can create your own directives as shown below. for example [ngStyle] and [ngClass]
ngClass used to make changes in its classes i.e we can say either in its styling.
ngStyle changes the property or binding to particular attributes when used so we can use [ngStyle] to provide any changes in styling.
4. Custom Directive
When the user wants any change in the attribute or styling then, there is no use for the additional template. In other words, we can say that it is a custom directive.
Angular Directives start with @Directive and have the prefix ng-.It changes the behavior of DOM elements and Angular components with attribute directives.
Thank you for reading, if you really like the blog hit the like button, and to learn more, visit here.