Deep-down to Directives in Angular

Table of contents

Reading Time: 3 minutes

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.

Component Directives example — In the above image, we can see the selector, its templateUrl, and styleUrls.

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.

(i) ngIf

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.

In the above image, it checks the condition whether it’s onlyOdd a number or not.

(ii) ngFor

We use ngFor to fetch the data and to reduce the redundancy in our code.

ngFor example of Structural Directives — In the above image using ngFor we can show the numbers if it’s odd.

(iii) ngSwitch

NgSwitchCase displays one element from a possible set of elements based on conditions.

ngSwitch Example of Structural Directives — In the above image using ngSwitch it checks if its value is matching with either of the provided values 5,10 or 100.

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]

(i) ngClass

ngClass used to make changes in its classes i.e we can say either in its styling.

(ii) ngStyle

ngStyle changes the property or binding to particular attributes when used so we can use [ngStyle] to provide any changes in styling.

ngStyle example of Attribute Directives — ngClass and ngStyle respectively are being applied to check odd and to change background-color

ngClass example of Attributes Directives — Output for above ngClass and ngStyle

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.

appBasicHighlight here is the custom directive

Custom Directive example — In the above image custom directive, appBasicHighLight is being used to change the background color.

Conclusion

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.