Activity 12: Research Angular Directives

The Angular directive is a distinctive kind of function that lets developers build reusable parts or behaviors for Angular apps, as well as expand the functionality of HTML elements. The following guidelines can alter how your elements look, behave, or are arranged on the page.

Here are the 3 types of angular directive :

Component Directives: The most used directives in Angular are these directives with a template. They provide UI elements and manage views. A class containing the @Component decorator, which provides metadata like as the HTML element selector, template, styles, and so on, is called a component directive.

Use Case: Creating a reusable button component.

Example: A button component that can be used across the application with different labels and actions.

Structural Directives: These directives add or remove items from the DOM, changing its composition. Examples of Angular's built-in structural directives include *ngIf, *ngFor, and *ngSwitch.
- *ngIf: DOM elements are conditionally included or excluded.
- *ngFor: Each item in a collection has the same element repeated.

Use Case: Displaying a list of items.

Example: Using NgFor to iterate over an array and display each item in a list.

Attribute Directives: By altering its properties, these directives have the ability to alter the appearance or behavior of an element or component that already exists. ngClass, a built-in attribute directive that dynamically inserts and removes CSS classes, is one example.

Use Case: Highlighting text on hover.

Example: A directive that alters the background color of an element when the user hovers over it.

The snippets can be used as templates in Angular projects to quickly generate components, directives, services, and pipes. They help to streamline development and guarantee that best practices are followed.
Conditional Rendering with NgIf

The NgIf directive conditionally includes or excludes a template based on the value of an expression.

Directive Snippet

A custom directive that changes the background color on hover.

Service Snippet

A basic Angular application that retrieves information from an API.

A custom pipe that transforms text to uppercase.

Here are some websites you may check out to learn more about a particular kind of directive or how to make one.

Understanding Angular Directives: Explained with Examples. (2023, July 22). Dopebase. https://dopebase.com/understanding-angular-directives-explained-examples

Ribeiro, C., & Ribeiro, C. (2024, February 13). A Practical guide to angular directives. SitePoint. https://www.sitepoint.com/practical-guide-angular-directives/

Chintanonweb. (2023, October 3). The Power of Angular Directives: A Comprehensive guide. DEV Community. https://dev.to/chintanonweb/the-power-of-angular-directives-a-comprehensive-guide-3m0b