Activity #11: Research Angular Directives

Instructions:

Definition of Angular Directives:

• What are Angular Directives?

  Angular directives are special markers in the DOM that tell Angular to attach specific behavior to that DOM element (or even transform the DOM element and its children). They extend HTML attributes with additional functionality and are a fundamental building block of Angular applications.

Types of Angular Directives

Angular directives are categorized into three main types:

1. Components:

   • Definition: Directives that create a new HTML element with associated templates and logic.

   • Example: <app-user-profile></app-user-profile>

   • Usage: Used to encapsulate functionality and UI elements.

2. Structural Directives:

   • Definition: Directives that change the structure of the DOM by adding or removing elements.

   • Common Examples:

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

     • *ngFor: Repeats a template for each item in a collection.

     • *ngSwitch: Displays one of a set of templates based on a condition.

   • Usage: Used for rendering elements conditionally or dynamically.

3. Attribute Directives:

   • Definition: Directives that change the appearance or behavior of an existing element.

   • Common Examples:

     • ngClass: Adds or removes CSS classes based on conditions.

     • ngStyle: Applies inline styles based on an expression.

     • Custom directives, e.g., to change the behavior of an element on events.

   • Usage: Used to modify element properties or attributes dynamically.

Use Cases of Angular Directives

1. Component Directives:

   • Use Case: Creating reusable UI components like buttons, modals, or form controls.

   • Example: A custom button component that can be used across the application with consistent styling and behavior.

2. Structural Directives:

   • Use Case: Dynamically adding or removing elements from the DOM based on certain conditions.

   • Example: Using *ngIf to show a loading spinner while data is being fetched.

3. Attribute Directives:

   • Use Case: Dynamically changing the appearance of elements based on component state.

   • Example: Using ngClass to apply different styles to a button based on its state (e.g., active, disabled).

     Code Snippets:

   • Structural Directive Example (*ngIf):

           <p *ngIf="user.isAdmin">You have admin privileges</p>
     

Attribute Directive Example (ngClass):

•       <div [ngClass]="{ 'highlight': isHighlighted, 'dim': !isHighlighted }">
          This text is conditionally styled
        </div>
  

  Structural Directive Example (*ngFor):

        <ul>
          <li *ngFor="let user of users">{{ user.name }}</li>
        </ul>
  

Custom Directive Example: Create a custom directive to highlight text on hover

        import { Directive, ElementRef, HostListener } from '@angular/core';

        @Directive({
          selector: '[appHighlight]'
        })
        export class HighlightDirective {
          constructor(private el: ElementRef) {}

          @HostListener('mouseenter') onMouseEnter() {
            this.highlight('yellow');
          }

          @HostListener('mouseleave') onMouseLeave() {
            this.highlight(null);
          }

          private highlight(color: string) {
            this.el.nativeElement.style.backgroundColor = color;
          }
        }