Angular Custom Directives

Angular में Custom Directives आपको खुद की logic लिखकर DOM element का behavior या appearance modify करने की flexibility देती हैं। ये directives reusable और modular होती हैं।

इस chapter में आप सीखेंगे:

• Attribute और Structural custom directives का अंतर
• Attribute custom directives बनाना
• Structural custom directives बनाना
• Metadata और decorators

1. Types of Custom Directives

Angular में दो main types के custom directives होते हैं:

Type	Description
Attribute Directive	Element की behavior या style modify करती हैं, DOM structure नहीं बदलती
Structural Directive	DOM structure को add/remove करती हैं, element को dynamically show/hide करती हैं

2. Attribute Custom Directive

Attribute directives element के style या behavior को modify करती हैं।

Example – appHighlight

import { Directive, ElementRef, HostListener, Input } from '@angular/core';

@Directive({
  selector: '[appHighlight]'
})
export class HighlightDirective {
  @Input() highlightColor: string = 'yellow';

  constructor(private el: ElementRef) {}

  @HostListener('mouseenter') onMouseEnter() {
    this.el.nativeElement.style.backgroundColor = this.highlightColor;
  }

  @HostListener('mouseleave') onMouseLeave() {
    this.el.nativeElement.style.backgroundColor = null;
  }
}

<p appHighlight highlightColor="lightgreen">Hover over me!</p>

Explanation

• @Directive({ selector: '[appHighlight]' }) → directive define करता है
• ElementRef → element access करने के लिए
• HostListener → DOM events listen करता है
• @Input() → directive को external value accept करने देता है
• Mouse enter/leave पर background color change होता है

3. Structural Custom Directive

Structural directives DOM elements को dynamically add/remove करती हैं।

Example – appUnless

import { Directive, Input, TemplateRef, ViewContainerRef } from '@angular/core';

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

  @Input() set appUnless(condition: boolean) {
    if (!condition) {
      this.vcRef.createEmbeddedView(this.templateRef); // element show
    } else {
      this.vcRef.clear(); // element remove
    }
  }
}

<p *appUnless="isVisible">This shows only when isVisible is false</p>
<button (click)="isVisible = !isVisible">Toggle</button>

Explanation

• TemplateRef → access करता है template content
• ViewContainerRef → container manage करता है
• Condition false → element render
• Condition true → element remove

4. Directive Metadata

Property	Description
selector	Directive HTML attribute या element define करता है
inputs	Directive external values accept करती है
host	Host element events और properties bind करती है
providers	Component/Directive-level services inject करने के लिए

5. Best Practices

• Directives small और focused रखें
• Avoid heavy DOM manipulation, use Angular bindings
• Reusable और modular design करें
• Structural directives → DOM add/remove
• Attribute directives → element style/behavior

Summary

इस chapter में आपने सीखा:

• Custom directives का प्रकार: Attribute और Structural
• Attribute directive example: appHighlight
• Structural directive example: appUnless
• Directive metadata और decorators