Własna dyrektywa atrybutowa

ng generate directive nowa-40-1/podswietl
# CREATE src/app/nowa-40-1/podswietl.spec.ts
# CREATE src/app/nowa-40-1/podswietl.ts

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

@Directive({
  selector: '[appPodswietl]',
})
export class Podswietl {}

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

@Directive({
    selector: '[appPodswietl]',
    host: {
        '(mouseenter)': 'nad.set(true)',
        '(mouseleave)': 'nad.set(false)',
        '[class.table-warning]': 'nad()',
    }
})
export class Podswietl {
    readonly nad = signal(false);
}

import { Component } from '@angular/core';
import { Podswietl } from './podswietl';

@Component({
    selector: 'app-demo',
    imports: [Podswietl],
    templateUrl: './demo.html'
})
export class Demo {
    readonly gracze = [
        { nick: 'Pixel', punkty: 980 },
        { nick: 'Bajt', punkty: 870 },
        { nick: 'Kursor', punkty: 815 },
        { nick: 'Ping', punkty: 640 },
    ];
}

<div class="p-3">
  <table class="table" style="max-width: 28rem">
    <thead><tr><th>Gracz</th><th>Punkty</th></tr></thead>
    <tbody>
      @for (g of gracze; track g.nick) {
        <tr appPodswietl><td>{{ g.nick }}</td><td>{{ g.punkty }}</td></tr>
      }
    </tbody>
  </table>
</div>

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

@Directive({
    selector: '[appPodswietl]',
    host: {
        '(mouseenter)': 'nad.set(true)',
        '(mouseleave)': 'nad.set(false)',
        '[class]': 'klasa()',
    }
})
export class Podswietl {
    readonly appPodswietl = input('');
    readonly nad = signal(false);

    readonly klasa = computed(() => {
        if (!this.nad()) {
            return '';
        }
        return 'table-' + (this.appPodswietl() || 'warning');
    });
}

import { Component } from '@angular/core';
import { Podswietl } from './podswietl';

@Component({
    selector: 'app-demo',
    imports: [Podswietl],
    templateUrl: './demo.html'
})
export class Demo {
    readonly gracze = [
        { nick: 'Pixel', punkty: 980 },
        { nick: 'Bajt', punkty: 870 },
        { nick: 'Kursor', punkty: 815 },
        { nick: 'Ping', punkty: 640 },
    ];
}

<div class="p-3">
  <h6>Ranking</h6>
  <table class="table" style="max-width: 28rem">
    <thead><tr><th>Gracz</th><th>Punkty</th></tr></thead>
    <tbody>
      @for (g of gracze; track g.nick; let pierwszy = $first) {
        <tr [appPodswietl]="pierwszy ? 'success' : ''">
          <td>{{ g.nick }}</td><td>{{ g.punkty }}</td>
        </tr>
      }
    </tbody>
  </table>

  <h6>Najbliższe wydarzenia</h6>
  <table class="table" style="max-width: 28rem">
    <tbody>
      <tr appPodswietl="info"><td>Turniej retro</td><td>piątek</td></tr>
      <tr appPodswietl="info"><td>Noc robotów</td><td>sobota</td></tr>
      <tr appPodswietl="danger"><td>Warsztat druku 3D</td><td>odwołany</td></tr>
    </tbody>
  </table>
</div>

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

@Directive({
    selector: '[appAutoFokus]'
})
export class AutoFokus {
    private readonly element = inject(ElementRef<HTMLElement>);

    constructor() {
        afterNextRender(() => {
            this.element.nativeElement.focus();
        });
    }
}

import { Component, signal } from '@angular/core';
import { AutoFokus } from './auto-fokus';

@Component({
    selector: 'app-demo',
    imports: [AutoFokus],
    templateUrl: './demo.html'
})
export class Demo {
    readonly szukaj = signal(false);
}

<div class="p-3">
  <div style="max-width: 26rem">
    <input class="form-control mb-3" placeholder="Imię (fokus przy starcie)" appAutoFokus>
    <input class="form-control mb-3" placeholder="Nazwisko">

    <button class="btn btn-outline-primary mb-2" (click)="szukaj.set(!szukaj())">Pokaż wyszukiwarkę</button>
    @if (szukaj()) {
      <input class="form-control" placeholder="Szukaj… (fokus po pokazaniu)" appAutoFokus>
    }
  </div>
</div>

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

@Directive({
    selector: '[appTylkoCyfry]',
    host: {
        '(keydown)': 'sprawdz($event)',
        'inputmode': 'numeric',
    }
})
export class TylkoCyfry {
    private readonly dozwolone = ['Backspace', 'Delete', 'Tab', 'ArrowLeft', 'ArrowRight', 'Home', 'End', 'Enter'];

    sprawdz(zdarzenie: KeyboardEvent): void {
        const klawisz = zdarzenie.key;
        const cyfra = klawisz >= '0' && klawisz <= '9' && klawisz.length === 1;
        const skrot = zdarzenie.ctrlKey || zdarzenie.metaKey;      // Ctrl+C, Ctrl+V…
        if (!cyfra && !skrot && !this.dozwolone.includes(klawisz)) {
            zdarzenie.preventDefault();
        }
    }
}

import { Component, signal } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { TylkoCyfry } from './tylko-cyfry';

@Component({
    selector: 'app-demo',
    imports: [FormsModule, TylkoCyfry],
    templateUrl: './demo.html'
})
export class Demo {
    readonly telefon = signal('');
    readonly pin = signal('');
}

<div class="p-3">
  <div style="max-width: 24rem">
    <label class="form-label" for="tel">Telefon (9 cyfr)</label>
    <input id="tel" name="tel" class="form-control mb-1" maxlength="9" appTylkoCyfry [(ngModel)]="telefon">
    <p class="small text-secondary">Wpisano {{ telefon().length }} z 9 cyfr.</p>

    <label class="form-label" for="pin">PIN</label>
    <input id="pin" name="pin" type="password" class="form-control mb-1" maxlength="4" appTylkoCyfry [(ngModel)]="pin">
    <p class="small text-secondary">PIN: {{ pin().length === 4 ? 'kompletny' : 'za krótki' }}</p>
  </div>
</div>