Angular Directives Tutorial 🎯

Welcome to our comprehensive Angular Directives tutorial! In this lesson, we'll delve into the world of Angular directives, a powerful tool that enhances HTML's capabilities for building dynamic and interactive web applications. Let's get started!

What are Angular Directives? 📝

Directives are special attributes, elements, or comments in Angular that let you extend HTML's syntax to create custom, reusable components. They enable you to add dynamic behavior to HTML elements and can be used to create custom tags, modify existing elements, and bind data to the UI.

Why Use Angular Directives? 💡

Directives make it easy to create reusable and modular components, which can help improve the structure and maintainability of your Angular applications. They allow you to separate concerns, make your code more testable, and create a more intuitive and efficient user interface.

Angular Directive Types 📝

There are three types of Angular directives:

Attribute Directives: Modify the behavior of existing HTML elements.
Component Directives: Create custom HTML elements with their own template and behavior.
Structural Directives: Alter the DOM structure by adding, removing, or moving elements.

Attribute Directives 📝

Attribute directives are used to modify the behavior of existing HTML elements. They are added as attributes to HTML elements.

Let's create a simple attribute directive that highlights text when the mouse hovers over it.

Example - HighlightDirective 💡

html

<!-- app.component.html -->
<h1 highlight="'yellow'">This text will be highlighted when hovered!</h1>

typescript

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
})
export class AppComponent {
  @Attribute('highlight') highlightColor: string;
}

html

<!-- highlight.directive.ts -->
import { Directive, Input } from '@angular/core';

@Directive({
  selector: '[highlight]',
})
export class HighlightDirective {
  @Input('highlight') highlightColor: string;

  constructor() {
    this.highlightElement();
  }

  highlightElement() {
    // Implement highlighting logic here
  }
}

📝 Note: We'll cover more about Angular components and inputs in later lessons.

Quiz 🎯

That's it for our introduction to Angular directives! In the next lessons, we'll dive deeper into attribute, component, and structural directives and build more complex examples. Stay tuned! 🚀