Bacia, John Ruzzel A.'s blog
Activity 11: Research Angular Directives

Activity 11: Research Angular Directives

Bacia, John Ruzzel A.'s photo
Bacia, John Ruzzel A.
·

3 min read

Angular Directives: Enhancing Your Angular Applications

Angular directives are a powerful tool for extending HTML's capabilities, allowing you to create dynamic and reusable components in your Angular applications. They act as instructions for Angular to manipulate the Document Object Model (DOM), adding behavior and modifying the structure of your web pages.

Understanding Angular Directives

Angular directives are essentially classes that Angular uses to manipulate the DOM. They are defined using the @Directive decorator and can be applied to HTML elements as attributes, elements, or classes.

Types of Angular Directives

Angular directives fall into three main categories:

1. Component Directives:

  • Definition: Component directives are the most common type of directive in Angular. They represent self-contained units of UI, encompassing their own template, styles, and logic.

  • Key Features:

    • They are responsible for creating reusable components that can be used throughout your application.

    • They encapsulate their functionality, making them easy to maintain and reuse.

  • Implementation:

    • You can create a component directive using the @Component decorator.

    • The @Component decorator takes an object with properties like selector, templateUrl, and styleUrls to define the component's behavior.

  • Example Code:

    import { Component } from '@angular/core'; @Component({ selector: 'app-user-card', templateUrl: './user-card.component.html', styleUrls: ['./user-card.component.css'] }) export class UserCardComponent { name = 'John Doe'; age = 30; }

2. Structural Directives:

  • Definition: Structural directives modify the structure of the DOM by adding or removing elements based on conditions. They are identified by an asterisk (*) preceding the directive name in the HTML template.

  • Key Features:

    • They control the presence or absence of DOM elements.

    • They enable dynamic rendering and conditional display of elements.

  • Implementation:

    • Angular provides several built-in structural directives like *ngIf, *ngFor, and *ngSwitch.

  • Example Code:

a) *ngIf:

<div *ngIf="isLoggedIn"> Welcome, {{ username }}! </div>

b) *ngFor:

<ul> <li *ngFor="let item of items; let i = index"> {{ i + 1 }}. {{ item }} </li> </ul>

3. Attribute Directives:

  • Definition: Attribute directives modify the behavior or appearance of existing elements by applying custom logic to the elements they are attached to.

  • Key Features:

    • They can be used to listen for events, apply styles dynamically, manipulate the DOM, or enhance accessibility.

  • Implementation:

    • Angular provides some built-in attribute directives like ngStyle, ngClass, and ngModel.

  • Example Code:

a) ngClass:

<div [ngClass]="{ 'active': isActive, 'disabled': isDisabled }"> Click me! </div>

b) ngStyle:

<div [ngStyle]="{ 'background-color': backgroundColor }"> Styled text! </div>

Practical Use Cases of Angular Directives

Component Directives:

  • Creating reusable UI components like buttons, forms, and navigation menus.

  • Encapsulating complex functionality and logic within a single component.

  • Promoting code reusability and maintainability.

Structural Directives:

  • *ngIf:

    • Conditionally displaying or hiding elements based on user roles, data availability, or other conditions.

    • Implementing dynamic UI based on user interactions or data changes.

  • *ngFor:

    • Iterating over arrays or collections to display lists of items.

    • Dynamically generating content based on data from an API or a database.

  • *ngSwitch:

    • Conditionally rendering different content based on multiple expressions.

    • Implementing complex UI logic based on data or user input.

Attribute Directives:

  • ngClass:

    • Dynamically applying CSS classes to elements based on conditions or data.

    • Implementing responsive design by changing styles based on screen size or user preferences.

  • ngStyle:

    • Dynamically applying inline styles to elements based on conditions or data.

    • Creating interactive UI elements that change appearance based on user actions.

  • ngModel:

    • Implementing two-way data binding between form elements and component properties.

    • Simplifying form handling and user input management.

References:

TypeScriptAngular