Activity 11: Research Angular Directives

Angular Directives:

Angular directives are a way to extend the functionality of HTML elements in an Angular application. They are used to bind application data to the view, manipulate the DOM, and add behavior to HTML elements. Directives can be used to create reusable components, conditional rendering, and dynamic styling.

Types of Directives

There are three types of directives in Angular:

1. Component Directives: These directives are used to create reusable UI components. They can contain HTML templates, CSS styles, and TypeScript code.

2. Structural Directives: These directives are used to modify the structure of the DOM by adding or removing elements. Examples of structural directives include *ngIf, *ngFor, and *ngSwitch.

3. Attribute Directives: These directives are used to add behavior or style to an existing HTML element. Examples of attribute directives include ngClass, ngStyle, and ngModel.

Use Cases of Angular Directives:

1. Conditional Rendering: Use the *ngIf directive to conditionally render an HTML element based on a boolean expression.

   

2. Looping: Use the *ngFor directive to loop over an array or collection of data

   

3. Dynamic Class Binding: Use the ngClass directive to dynamically add or remove classes from an HTML element.

   

4. Dynamic Style Binding: Use the ngStyle directive to dynamically add or remove styles from an HTML element.

   

   Code Snippets

Conditional Rendering:

Looping:

Dynamic Class Binding:

Dynamic Style Binding:

REFERENCES:

• Angular Attribute Directives

• Angular Directive Tutorial by FreeCodeCamp

• Angular Directives: A Beginner's Guide

• Angular Directive Examples on GitHub