Attribute Directives

import { Directive, ElementRef, inject, Renderer2 } from '@angular/core';

@Directive({
    selector: '[appHighlight]',
    // standalone: true ist seit v17 Default — nicht mehr nötig hinzuschreiben
})
export class HighlightDirective {
    private el = inject(ElementRef<HTMLElement>);
    private renderer = inject(Renderer2);

    constructor() {
        this.renderer.setStyle(this.el.nativeElement, 'background-color', 'yellow');
    }
}

import { Directive, ElementRef, inject, Renderer2, OnInit } from '@angular/core';

@Directive({
    selector: '[appHighlight]',
})
export class HighlightDirective implements OnInit {
    private el = inject(ElementRef<HTMLElement>);
    private renderer = inject(Renderer2);

    ngOnInit() {
        // Style setzen
        this.renderer.setStyle(this.el.nativeElement, 'background-color', '#fff8a8');
        // Klasse hinzufügen
        this.renderer.addClass(this.el.nativeElement, 'is-highlighted');
        // Attribute setzen
        this.renderer.setAttribute(this.el.nativeElement, 'data-highlighted', 'true');
    }
}

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

@Directive({
    selector: '[appHover]',
})
export class HoverDirective {
    @HostBinding('class.is-hover') isHover = false;
    @HostBinding('style.cursor') cursor = 'pointer';

    @HostListener('mouseenter')
    onEnter() {
        this.isHover = true;
    }

    @HostListener('mouseleave')
    onLeave() {
        this.isHover = false;
    }

    @HostListener('window:keydown.escape')
    onEscape() {
        this.isHover = false;
    }
}

import { Directive, signal } from '@angular/core';

@Directive({
    selector: '[appHover]',
    host: {
        '[class.is-hover]': 'isHover()',
        '[style.cursor]': '"pointer"',
        '(mouseenter)': 'isHover.set(true)',
        '(mouseleave)': 'isHover.set(false)',
        '(window:keydown.escape)': 'isHover.set(false)',
    },
})
export class HoverDirective {
    isHover = signal(false);
}

import { Directive, input, effect, inject, Renderer2, ElementRef } from '@angular/core';

@Directive({
    selector: '[appHighlight]',
    host: {
        '[style.background-color]': 'color()',
        '[style.padding]': '"2px 4px"',
    },
})
export class HighlightDirective {
    // Selector-aliased Input: <p [appHighlight]="'yellow'">
    color = input<string>('yellow', { alias: 'appHighlight' });

    // Zweiter, separater Input
    border = input<string | null>(null);

    private el = inject(ElementRef<HTMLElement>);
    private renderer = inject(Renderer2);

    constructor() {
        effect(() => {
            const b = this.border();
            if (b) {
                this.renderer.setStyle(this.el.nativeElement, 'border', b);
            } else {
                this.renderer.removeStyle(this.el.nativeElement, 'border');
            }
        });
    }
}

<p [appHighlight]="'mistyrose'" [border]="'1px solid crimson'">
    Wichtig
</p>

import { Directive, inject, input } from '@angular/core';
import { AnalyticsService } from './analytics.service';

@Directive({
    selector: '[appTrackClick]',
    host: {
        '(click)': 'onClick($event)',
    },
})
export class TrackClickDirective {
    private analytics = inject(AnalyticsService);

    // Aliased Input: <button [appTrackClick]="'cta-hero'">
    event = input<string>('', { alias: 'appTrackClick' });

    onClick(ev: MouseEvent) {
        const name = this.event();
        if (name) {
            this.analytics.track(name, {
                x: ev.clientX,
                y: ev.clientY,
            });
        }
    }
}

import {
    Directive, ElementRef, inject, input, afterNextRender,
} from '@angular/core';

@Directive({
    selector: '[appAutofocus]',
})
export class AutofocusDirective {
    private el = inject(ElementRef<HTMLElement>);

    // Mit boolean-Input optional ein-/aussschaltbar
    enabled = input<boolean>(true, { alias: 'appAutofocus' });

    constructor() {
        afterNextRender(() => {
            if (this.enabled()) {
                this.el.nativeElement.focus();
            }
        });
    }
}

<input type="text" [appAutofocus]="true" placeholder="E-Mail">

<!-- bedingt: nur fokussieren, wenn Form gerade neu eingeblendet wurde -->
<input type="text" [appAutofocus]="isFirstStep()" placeholder="Vorname">

import {
    Directive, ElementRef, inject, output,
    Renderer2, DestroyRef, afterNextRender,
} from '@angular/core';

@Directive({
    selector: '[appClickOutside]',
})
export class ClickOutsideDirective {
    private el = inject(ElementRef<HTMLElement>);
    private renderer = inject(Renderer2);
    private destroyRef = inject(DestroyRef);

    // Output-Event, das gefeuert wird
    clickOutside = output<MouseEvent>({ alias: 'appClickOutside' });

    constructor() {
        // Erst nach erstem Render registrieren, sonst feuert der Listener
        // direkt beim Öffnen-Klick, der das Element überhaupt ins DOM bringt.
        afterNextRender(() => {
            const unlisten = this.renderer.listen('document', 'click', (ev: MouseEvent) => {
                const target = ev.target as Node;
                if (!this.el.nativeElement.contains(target)) {
                    this.clickOutside.emit(ev);
                }
            });

            this.destroyRef.onDestroy(unlisten);
        });
    }
}

@if (open()) {
    <div class="dropdown" (appClickOutside)="open.set(false)">
        <ul>...</ul>
    </div>
}

import { Component, signal } from '@angular/core';
import { HighlightDirective } from './highlight.directive';
import { AutofocusDirective } from './autofocus.directive';
import { ClickOutsideDirective } from './click-outside.directive';

@Component({
    selector: 'app-form',
    standalone: true,
    imports: [HighlightDirective, AutofocusDirective, ClickOutsideDirective],
    template: `
        <input type="text"
               [appAutofocus]="true"
               [appHighlight]="'lightyellow'">

        @if (open()) {
            <div class="menu" (appClickOutside)="open.set(false)">...</div>
        }
    `,
})
export class FormComponent {
    open = signal(false);
}

import { NgModule } from '@angular/core';
import { HighlightDirective } from './highlight.directive';

@NgModule({
    declarations: [HighlightDirective],
    exports: [HighlightDirective],
})
export class HighlightModule { }