monet

Activity 12: Research Angular Directives

Monette Nicolas's photo
Monette Nicolas
·

4 min read

Angular Directives

Directives are extensions of HTML that enable the attachment of custom behaviors to DOM elements or the creation of new ones. They play a crucial role in Angular's declarative approach to user interfaces, CSS styling, and input management.

Types of Directives

Component Directives:

Component directives are the fundamental components of Angular applications, controlling a part of the user interface. They are created using the @Component decorator and define the view, styles, and behavior of a UI element.

Key Features:

  • Component directives are the most common directive type in Angular.

  • Defined using the @Component decorator.

  • Each component directive manages a portion of the user interface, encapsulating the template, styles, and logic.

  • They have lifecycle hooks (e.g., ngOnInit, ngOnDestroy), which allow interaction with the component's lifecycle.

Use Cases:

  • Reusing the same component across multiple parts of the application, enhancing modularity.

Importing Component

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

Purpose: Imports the Component decorator from Angular, allowing you to define a component.

The @Component Decorator

@Component({
  selector: 'app-hello-world',  // Custom HTML tag for the component
  template: `<h1>Hello, World!</h1>`,  // HTML template for the component
})

Defines a custom HTML tag (<app-hello-world>) to use in your templates.

Contains the HTML to render for the component (e.g., <h1>Hello, World!</h1>).

The HelloWorldComponent Class

export class HelloWorldComponent {
  // Component logic can go here
}

Class: Represents the component’s logic. You can add properties and methods to handle data and behavior.

Attribute Directives:

Attribute directives, applied as attributes on HTML elements like ngClass, ngStyle, and ngModel, alter the appearance or behavior of an element, component, or another directive.

Key Features:

  • Structural directives change the DOM layout by adding or removing elements.

  • They are prefixed with an asterisk (*), e.g., *ngIf, *ngFor.

  • Structural directives manage the structure of the view based on conditions (e.g., loops, conditional rendering).

Use Cases:

  • Conditionally displaying elements using *ngIf.

  • Looping through collections and dynamically rendering lists using *ngFor.

  • Implementing switch-case logic in the UI using *ngSwitch.

Using ngClass

<div [ngClass]="{'active': isActive, 'inactive': !isActive}">
  This div is conditionally styled.
</div>

Applies CSS classes conditionally based on component properties.

If isActive is true, the class active is added; if false, the class inactive is added.

Using ngStyle

<div [ngStyle]="{'color': textColor, 'font-size': fontSize + 'px'}">
  This text has dynamic styles.
</div>

Purpose: Applies inline styles dynamically based on component properties.

Sets the text color and font size based on the values of textColor and fontSize, respectively.

Structural Directives:

Structural Directives: Structural directives modify the DOM structure by adding or removing elements. The most well-known structural directives are ngIf, ngFor, and ngSwitch.

Key Features:

  • Attribute directives change the behavior or appearance of an element without altering its structure.

  • They can modify element styles, classes, and other attributes dynamically.

  • Attribute directives are used by binding values to properties, such as ngClass and ngStyle.

Use Cases:

  • Dynamically applying styles based on component state using ngStyle.

  • Adding and removing CSS classes conditionally using ngClass.

  • Implementing dynamic behavior on UI elements (e.g., showing active/inactive states).

Using *ngIf

<div *ngIf="isLoggedIn">Welcome back!</div>

Conditionally renders an element based on a boolean expression.

The <div> is displayed only if isLoggedIn is true. If false, it is not rendered.

Using *ngFor

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

Iterates over a collection to create multiple elements.

Generates a list item (<li>) for each item in the items array, displaying the value of item.

Example and Code Snippets:

Example of Component Directives:

// Define a Component Directive
import { Component } from '@angular/core';

@Component({
  selector: 'app-hello-world',  // Custom HTML tag for the component
  template: `<h1>Hello, World!</h1>`,  // HTML template for the component
})
export class HelloWorldComponent {
  // Component logic can go here
}

Example of Attribute Directives:

Using ngClass:

<div [ngClass]="{'active': isActive, 'inactive': !isActive}">
  This div is conditionally styled.
</div>

Using ngStyle:

<div [ngStyle]="{'color': textColor, 'font-size': fontSize + 'px'}">
  This text has dynamic styles.
</div>

Example of Structural Directives:

Using *ngIf:

<div *ngIf="isLoggedIn">Welcome back!</div>

Using *ngFor:

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

Reference

https://medium.com/@drissi.dalanda8/demystifying-directives-in-angular-a-beginners-guide-fdb6e199b80a

https://www.w3schools.com/angular/angular_directives.asp

Angular