Activity 11: Research Angular Directives

1. Definition of Angular Directives

Angular Directives are markers on a DOM element that tell Angular to attach a specified behavior to that DOM element or even to transform the DOM element and its children. They enhance the functionality of HTML in Angular applications.

2. Types of Angular Directives

A. Component Directives

• Definition: These are directives with a template. A component directive creates a new component and is defined with a class.

• Use Case: Used for creating reusable components, such as buttons, forms, or cards.

Example Code:

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

@Component({
  selector: 'app-button',
  template: '<button (click)="handleClick()">{{ label }}</button>',
})
export class ButtonComponent {
  label: string = 'Click Me';

  handleClick() {
    alert('Button clicked!');
  }
}

B. Structural Directives

• Definition: These directives change the structure of the DOM by adding or removing elements. They are usually prefixed with an asterisk (*).

• Common Examples:

  • *ngIf: Conditionally includes a template based on a boolean expression.

  • *ngFor: Iterates over a list and generates a template for each item.

Example Code (ngIf):

<div *ngIf="isVisible">Content is visible</div>

Example Code (ngFor):

<ul>
  <li *ngFor="let item of items">{{ item }}</li>
</ul>

C. Attribute Directives

• Definition: These directives change the appearance or behavior of an existing element, component, or another directive.

• Common Examples:

  • ngClass: Dynamically binds classes to an element.

  • ngStyle: Dynamically binds inline styles.

Example Code (ngClass):

<div [ngClass]="{ 'active': isActive, 'inactive': !isActive }">Status</div>

Example Code (ngStyle):

<div [ngStyle]="{ 'color': isError ? 'red' : 'black' }">Message</div>

3. Use Cases of Angular Directives

• Component Directives: Ideal for encapsulating UI elements with their own logic, making it easy to maintain and reuse.

• Structural Directives: Useful for dynamically managing the display of elements based on application state, such as showing or hiding content based on user input.

• Attribute Directives: Great for applying styles and classes conditionally, enhancing user interaction without needing additional logic in the component.

4. Code Snippets and Examples

Conditional Rendering with *ngIf

<div *ngIf="user.isLoggedIn">Welcome, {{ user.name }}!</div>

Looping through items with *ngFor

<ul>
  <li *ngFor="let task of tasks">{{ task.title }}</li>
</ul>

Dynamic Class Binding with ngClass

<div [ngClass]="{ 'highlight': isHighlighted }">This is highlighted</div>

Dynamic Style Binding with ngStyle

<div [ngStyle]="{ 'font-size': fontSize + 'px' }">Resizable text</div>

References:

https://v17.angular.io/guide/built-in-directives

https://angular.dev/guide/directives