Angular directives are an essential part of building web applications with Angular. Directives allow you to manipulate the DOM and add behavior to HTML elements, making your application more dynamic and interactive. In this guide, we will cover how to use built-in directives like ngIf and ngFor, as well as creating custom directives.
Built-in Directives
Angular comes with several built-in directives that you can use to add functionality to your application. These directives are simple to use and provide a lot of power.
ngIf
The ngIf directive allows you to conditionally render HTML based on a boolean expression. For example, if you only want to show a button if a user is logged in, you could use the ngIf directive like this:
<button *ngIf="isLoggedIn()">Logout</button>
In this example, the isLoggedIn() method returns a boolean value. If the value is true, the button will be rendered. If the value is false, the button will not be rendered.
ngFor
The ngFor directive allows you to iterate over a collection of items and render HTML for each item. For example, if you have an array of users that you want to display in a table, you could use the ngFor directive like this:
<table>
<tr *ngFor="let user of users">
<td>{{ user.name }}</td>
<td>{{ user.email }}</td>
</tr>
</table>
In this example, the users array contains several items. The ngFor directive will iterate over the array and render an HTML table row (<tr>) for each item. The {{ user.name }} and {{ user.email }} expressions will be replaced with the corresponding values from the array.
Custom Directives
In addition to the built-in directives, you can also create your own custom directives. This allows you to encapsulate complex behavior and reuse it throughout your application.
To create a custom directive, you use the @Directive decorator. For example, let’s say you want to create a directive that adds a CSS class when an element is clicked. You could create a directive like this:
import { Directive, ElementRef, HostListener } from '@angular/core';
@Directive({
selector: '[clickClass]'
})
export class ClickClassDirective {
constructor(private el: ElementRef) {}
@HostListener('click') onClick() {
this.el.nativeElement.classList.add('clicked');
}
}
In this example, the ClickClassDirective class is decorated with @Directive, indicating that it is a directive. The selector property specifies the HTML attribute that the directive will be attached to. In this case, the directive will be attached to elements with the clickClass attribute.
The constructor method takes an ElementRef parameter, which provides access to the element that the directive is attached to. The @HostListener decorator is used to specify that the onClick method should be called when the element is clicked.
Then, in your HTML, you can use the clickClass directive like this:
<button clickClass>Click me!</button>
When the button is clicked, the clicked class will be added to the button’s class list.
That’s it! With these examples, you should have a good understanding of how to use Angular directives to manipulate the DOM and add behavior to HTML elements. By using built-in and custom directives, you can create powerful and dynamic web applications that provide an excellent user experience.
