Koronuma's Blog

Activity 11: Research Angular Directives

Koronuma's photo
Koronuma
·

4 min read

  1. Research the Definition of Angular Directives:

    Angular directives are one of the core building blocks of the Angular framework. They allow developers to extend HTML's capabilities by creating new HTML elements, attributes, classes, and comments. Directives can be used to manipulate the DOM, apply styles, manage forms, and more.

Three types of Directives

  • Component Directives -They combine both the user interface (HTML template) and the logic (TypeScript code) into one reusable package.

  • Structural Directives -These are like the architects, reshaping your DOM by adding or removing elements. Also prefixed with *ng, they are used for more complex structural changes.

  • Attribute Directives - Attribute directives in Angular are used to change the appearance or behavior of an existing DOM element by manipulating its attributes.

    Examples

    • ngClass : The ngclass directive allows you to dynamically apply CSS classes to an element based on conditions or expressions.

    • ngStyle : The ngStyle directive lets you apply inline styles to an element based on conditions or expressions.

    • ngModel : The ngModel directive is used for two-way data binding with form elements like input, select, and textarea.

    • ngIf : While ngIf is primarily a structural directive, it's also an attribute directive when used as an attribute to conditionally render elements.

    • ngFor : Similar to ngIf, the ngFor directive is a structural directive used for iteration, but it's also an attribute directive when used as an attribute to iterate over elements.

    • ngDisabled : The ngDisabled directive is used to disable or enable form elements based on a condition.

    • ngReadOnly : The ngReadOnly directive is used to set the read-only property of form elements.

    • ngSwitch and ngSwitchCase : The ngSwitch directive is used to conditionally render content based on a given expression, and ngSwitchCase is used to specify the cases.

    • ng-container : While not a traditional structural directive, <ng-container> is often used to group elements when you need to apply structural directives to multiple elements without introducing an additional wrapping element in the DOM.

Use Cases of Angular Directives:

  1. Components

A component is essentially a directive with a template. It allows you to encapsulate the view logic and behaviors into reusable, independent pieces.

Practical Use Case:

@Component({
  selector: 'app-user-card',
  templateUrl: './user-card.component.html'
})
export class UserCardComponent {
  @Input() user: User;
}

  1. Structural directives

Structural directives are used to modify the structure of the DOM by adding, removing, or manipulating elements.

Practical use cases:

Conditional Rendering: The built-in *ngIf directive allows you to conditionally add or remove elements from the DOM based on a boolean value.

<div *ngIf="isLoggedIn; else notLoggedIn">
  Welcome, user!
</div>
<ng-template #notLoggedIn>
  <div>Please log in to continue.</div>
</ng-template>

  1. Attribute directives

    Attribute directives change the appearance or behavior of an element. These are usually used to modify existing elements.

    Practical Use Case:

    Custom Styling: You can create a custom attribute directive to highlight an element when it's hovered over.

@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;
  }
}

Examples of code snippets in Angular directives:

Component

Explanation:

This userCardComponent receives a user object as input and displays the user’s name and email in a reusable UI component.

@Component({
  selector: 'app-user-card',
  template: `
    <div class="user-card">
      <h3>{{ user.name }}</h3>
      <p>{{ user.email }}</p>
    </div>
  `,
  styles: [
    `
      .user-card {
        border: 1px solid #ddd;
        padding: 10px;
        margin: 10px;
        border-radius: 5px;
      }
    `,
  ],
})
export class UserCardComponent {
  @Input() user!: { name: string; email: string };
}

Template usage:

<app-user-card [user]="currentUser"></app-user-card>

2.Structural

Explanation:
The *ngIf directive is used to conditionally render a block of HTML if isLoggedIn is true. If false, the ng-template shows the "Please log in" message.

<div *ngIf="isLoggedIn; else notLoggedIn">
  Welcome, user!
</div>
<ng-template #notLoggedIn>
  <div>Please log in to continue.</div>
</ng-template>

Component class

// app.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
})
export class AppComponent {
  isLoggedIn = false;
}

3.Attribute

The HighlightDirectives listens for mouse enter and leave events on an element and changes its background color. The @HostListener decorator is used to bind the events to the directive.

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 | null) {
    this.el.nativeElement.style.backgroundColor = color;
  }
}

template usage:

<p appHighlight>This text will be highlighted on hover.</p>

For references: