Angula is a popular framework for building dynamic and interactive web applications. Directive is one of the fundamental building blocks of angular. Directives allow us to extend HTML with new attributes or elements, enabling us to create reusable components. In this blog, we will learn how directives enhance the development process in Angular
What Are Directives?
In Angular, directives are markers on a DOM element that provide information to the angular framework to perform a specific job or apply specific behavior to that element. we can use them to manipulate the DOM, add dynamic behavior, and make our application more interactive. Angular provides various build-in directives and we can also create a custom directive as per our project requirement.
Types of Directives in Angular
There are three types of directives in Angular: structural directives, attribute directives, and component directives. Let’s explain each of them.
1. Structural Directives:
Structural Directives are responsible for changing the structure of the DOM. They work by adding or removing the elements from the DOM, unlike Attribute Directives which just change the element’s appearance and behavior. The most common structural directives in Angular are:
- ngIf: We are using it for conditional rendering so we can add or remove elements from DOM according to condition.
<div *ngIf="condition">This element is displayed when the condition is true.</div>- ngFor: We are using it to render lists or iterate over an array to generate multiple elements.
<ul> <li *ngFor="let item of items">{{ item }}</li> </ul>- ngSwitch: We can use this directive for conditional rendering based on multiple conditions.
<div [ngSwitch]="condition">
<div *ngSwitchCase="'first'">Case first</div>
<div *ngSwitchCase="second'">Case second</div>
<div *ngSwitchDefault>Default Case</div>
</div>2. Attribute Directives:
Attribute directives manipulate the appearance or behavior of an element, typically by modifying its attributes. Some commonly used attribute directives in Angular include:
- ngClass: It dynamically adds or removes CSS classes to elements based on a condition.
<div [ngClass]="{'active': isActive, 'disabled': isDisabled}">Dynamic Classes can add</div>- ngStyle: This directive dynamically applies inline styles to an element based on a condition.
<div [ngStyle]="{'color': isActive ? 'green' : 'red'}">Dynamic Style</div>- ngModel: This directive is used for two-way data binding, ngModel binds the value of an input element to a component property.
<input [(ngModel)]="name" />3. Component Directives:
The component directive is nothing but a simple class that is decorated with the @component decorator.@component decorator provides additional metadata that determines how the component should be processed, instantiated, and used at runtime
Creating a custom component directive is a more advanced topic in Angular, Creating a custom directive is just like creating an Angular component. To create a custom directive we have to replace @Component the decorator with @Directive a decorator.
Conclusion
Directives are a very important part of Angular’s framework that we can use to enhance the functionality and interactivity of web applications. Any type of conditional manipulation or looping and styling can be handled by using it.
For more such posts, please follow our LinkedIn page- FrontEnd Competency.