Directives In Angular

Hi readers 👋, welcome to the third part of the series, where we get introduced to Directives!

In the last two articles, we talked about Components and Data Bindings. If you are a beginner like me, we might want to go through them first and then hop on to this article.

What is Directives?

Directives are classes that add additional behavior to elements in your Angular applications. It creates DOM elements, change their structure, or behavior in an Angular
application.

There are three types of directives:

• Components - It is the most common type of directive and is used with a template
• Attribute directives - Changes the appearance or behavior of an element, component, or another directive
• Structural directives - Change the DOM layout by adding and removing DOM elements

More Details

The major difference between component directives and attribute and structural directive is - component directive has a template, while the others do not.

• Inbuilt structural directives - *ngIf, *ngFor
• Inbuilt attribute directives - NgStyle, NgModel, NgClass

Attribute Directive

Attribute directives listen to and modify the behavior of other HTML elements, attributes, properties, and components.

Details of the most common attribute directive:

• NgClass- Adds and removes a set of CSS classes.
• NgStyle- Adds and removes a set of HTML styles.
• NgModel- Adds two-way data binding to an HTML form element.

Example of creating a custom directive:

import { Directive, ElementRef, Renderer } from ‘@
angular/core’;
@Directive({
selector: ‘[appChbgcolor]’
})
export class ChangeBgColorDirective {
constructor(private el: ElementRef, private renderer:
Renderer) {
this.ChangeBgColor(‘red’);
}
ChangeBgColor(color: string) {
this.renderer.setElementStyle(this.l.nativeEleme
nt,‘color’, color);
}
}

To create a custom attribute directive, you need to create a class and decorate it with @Directive.
In the constructor of the directive class, we inject the services ElementRef and Renderer. Instances of these two classes are needed to get the reference of the host element and of the renderer.

Structural Directives

Structural directives change the structure of the DOM elements, For eg. *ngIf is a structural directive, which provides an 'if' condition statements that are to be executed. If the condition becomes False, then the elements are removed from DOM. If the condition is True, then the elements are added to DOM. Whereas, *ngFor structure directive creates DOM elements in a loop.

Example of *ngIf:

@Component({
selector: ‘app-notification’,
template:`
<div *ngIf = ‘showNotif’>
Show Notification
</div>
`
})
export class AppNotificationComponent {
showNotif = true;
}

In the above example, the condition is true, thus the elements will be added to DOM.

Conclusion

From this article we see that Directives are an essential part of Angular, depending on our task, we can use the different types of Directives.

Thank you for reading till the end. Happy learning 🌻

For any questions or suggestions, drop them on the comment below or reach out to me @Haimantika.