Activity 11: Research Angular Directives

Understanding Angular Directives

Angular directives are powerful tools that allow you to extend HTML with new syntax and functionality. They enhance the behavior and appearance of DOM elements and components within your Angular applications. Let’s break down the different types of Angular directives:

1. Component Directives:

   • Components are a subset of directives that always have an associated template.

   • They encapsulate both the UI (User Interface) and the behavior of a part of the application.

   • Components are the building blocks of Angular applications, allowing you to create reusable and modular UI elements.

   • To define a component, use the @Component decorator. Components typically have a corresponding HTML template.

2. Attribute Directives:

   • Attribute directives modify the appearance or behavior of an element, component, or another directive.

   • They are applied as attributes on HTML elements.

   • Common built-in attribute directives include:

     • NgClass: Adds or removes a set of CSS classes dynamically.

     • NgStyle: Adds or removes a set of HTML styles dynamically.

     • NgModel: Enables two-way data binding for form elements.

3. Structural Directives:

   • Structural directives manipulate the HTML structure in the DOM.

   • They conditionally create, modify, or remove elements.

   • Common built-in structural directives include:

     • NgIf: Conditionally renders an element based on an expression.

     • NgFor: Iterates over an array and repeats a template for each item.

     • NgSwitch: Renders different views based on a specified value.

Use Cases of Angular Directives

1. NgIf:

   • Use it to conditionally render elements based on a boolean expression.

   • Example: Displaying error messages or showing/hiding components based on user authentication.

2. NgFor:

   • Use it to loop through an array and generate dynamic lists of elements.

   • Example: Displaying a list of items fetched from an API.

3. NgClass:

   • Use it to dynamically apply CSS classes based on component properties.

   • Example: Highlighting rows in a table based on certain conditions.

4. NgStyle:

   • Use it to dynamically apply inline styles to elements.

   • Example: Changing the font color or background dynamically.

Code Snippets

Here’s a simple example using NgIf to conditionally render an element:

HTML

<!-- Display a message if user is logged in -->
<p *ngIf="isLoggedIn">Welcome, {{ username }}!</p>

---

References:

• Angular Official Documentation

• FreeCodeCamp: Angular Directives

• SitePoint: Practical Guide to Angular Directives

• Devbrite: Understanding Angular Directives

• GeeksforGeeks: Built-in Directives ¹: Angular Official Documentation ²: FreeCodeCamp: Angular Directives ³: SitePoint: Practical Guide to Angular Directives ⁴: Devbrite: Understanding Angular Directives ⁵: GeeksforGeeks: Built-in Directives