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.