Home php Angular 14 Directives – Component, Structural & Attribute

Angular 14 Directives – Component, Structural & Attribute

by Shahriar Sagor

Angular 14 Directives are a powerful feature of the Angular framework that allows developers to add behavior and functionality to elements in an HTML template. Directives come in three different types: Component, Structural, and Attribute. In this blog post, we will take a closer look at each type of directive and provide examples of how they can be used in an Angular application.

Component Directives

Component Directives are used to create custom components in Angular. They are created using the @Component decorator and can be used to define the template, styles, and logic of a component. These directives are used to create reusable components that can be used throughout an application. For example, let’s say we want to create a custom button component that can be reused in multiple parts of our application. We can create a new component directive called “app-button” like this:

import { Component } from '@angular/core';

@Component({
  selector: 'app-button',
  template: `
    <button (click)="onClick()">{{label}}</button>
  `,
  styles: [`
    button {
      background-color: blue;
      color: white;
    }
  `]
})
export class ButtonComponent {
  label: string;

  onClick() {
    console.log('Button clicked!');
  }
}

We can then use this component in our template like this:

<app-button [label]="'Click me'"></app-button>

This will create a blue button with the label “Click me” that will log a message to the console when clicked.

Structural Directives

Structural Directives are used to change the structure of the DOM. They are used to add or remove elements from the DOM based on certain conditions. These directives are prefixed with an asterisk (*) and are used to create dynamic templates. For example, let’s say we have an array of items that we want to display in a list, but only if the list is not empty. We can use the *ngIf directive to achieve this:

<ul *ngIf="items.length > 0">
  <li *ngFor="let item of items">{{item}}</li>
</ul>
<p *ngIf="items.length === 0">No items to display</p>

This will only display the list and its items if the “items” array is not empty, otherwise it will display a message saying “No items to display”.

Attribute Directives

Attribute Directives are used to change the behavior or appearance of an element. They are not as powerful as Component and Structural Directives, but they can be used to add functionality to an existing element without creating a new component. For example, let’s say we want to change the background color of an element when it is hovered over. We can use the ngStyle directive to achieve this:

<div [ngStyle]="{'background-color': hover ? 'red' : 'white'}"></div>

In conclusion, Angular 14 Directives are a powerful feature of the Angular framework that allows developers to add behavior and functionality to elements in an HTML template. Understanding the different types of Directives, such as Component, Structural, and Attribute Directives, and how to use them effectively can help you create dynamic and interactive web applications using Angular. Component Directives are used to create custom, reusable components, Structural Directives are used to change the structure of the DOM, and Attribute Directives are used to change the behavior or appearance of an element. By understanding the use cases and examples of these directives, you can create more efficient, user-friendly and maintainable Angular applications.

Read Also: Angular 14 NgModule Tutorial with Example

Thanks for read. I hope it help you. For more you can follow us on facebook.

close

You may also like