What are the different types of directives in Angular? Give real-world examples.

In Angular, directives are classes that allow you to manipulate the DOM or component behavior. There are three main types of directives:

🧱 1. Component Directives

• Technically, components are directives with a template.

• They control a section of the screen (UI) and encapsulate logic.

✅ Example:

@Component({
  selector: 'app-user-card',
  template: `<h2>{{ name }}</h2>`
})
export class UserCardComponent {
  name = 'Alice';
}

📌 Real-World Use:

• A ProductCardComponent showing product details on an e-commerce site.

• A ChatMessageComponent displaying individual messages in a chat app.

⚙️ 2. Structural Directives

• These change the DOM layout by adding or removing elements.

✅ Built-in Examples:

• *ngIf: Conditionally includes a template.

• *ngFor: Iterates over a list and renders template for each item.

• *ngSwitch: Switches views based on a condition.

📌 Real-World Use:

<div *ngIf="user.isLoggedIn">Welcome back!</div>
<ul>
  <li *ngFor="let item of cartItems">{{ item.name }}</li>
</ul>

🛠️ Custom Example:

@Directive({
  selector: '[appUnless]'
})
export class UnlessDirective {
  constructor(private templateRef: TemplateRef<any>, private viewContainer: ViewContainerRef) {}

  @Input() set appUnless(condition: boolean) {
    if (!condition) {
      this.viewContainer.createEmbeddedView(this.templateRef);
    } else {
      this.viewContainer.clear();
    }
  }
}

<div *appUnless="isLoggedIn">Please log in</div>

🎨 3. Attribute Directives

• These change the appearance or behavior of an element, component, or directive.

✅ Built-in Examples:

• ngClass, ngStyle, required, etc.

📌 Real-World Use:

<button [ngClass]="{ 'primary': isPrimary }">Submit</button>
<p [ngStyle]="{ color: error ? 'red' : 'green' }">Status</p>

🛠️ Custom Example:

@Directive({
  selector: '[appHighlight]'
})
export class HighlightDirective {
  constructor(private el: ElementRef) {
    el.nativeElement.style.backgroundColor = 'yellow';
  }
}

<p appHighlight>This text is highlighted</p>

✅ Summary Table

Type	Purpose	Built-in Examples	Real-world Use Case
Component	UI + behavior + template	Any Angular component	Reusable UI blocks like cards, modals, widgets
Structural	Add/remove elements in DOM	*ngIf, *ngFor	Conditional rendering, lists
Attribute	Modify element behavior/appearance	ngClass, ngStyle	Highlight, tooltips, dynamic styles