effect i sprzątanie: DestroyRef

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

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

    constructor() {
        effect(() => {
            const n = this.wKoszyku();
            document.title = n === 0 ? 'Sklepik ZSMI' : '(' + n + ') Sklepik ZSMI';
            console.log('effect: w koszyku jest', n);
        });
    }

    dodaj(): void {
        this.wKoszyku.update(n => n + 1);
    }
}

<div class="p-3">
  <p class="fs-5">W koszyku: {{ wKoszyku() }}</p>
  <button class="btn btn-primary me-2" (click)="dodaj()">Dodaj</button>
  <button class="btn btn-outline-secondary" (click)="wKoszyku.set(0)">Opróżnij</button>
</div>

import { Component, effect, signal } from '@angular/core';
import { FormsModule } from '@angular/forms';

@Component({
    selector: 'app-demo',
    imports: [FormsModule],
    templateUrl: './demo.html'
})
export class Demo {
    readonly klucz = 'notatka-klubu';
    readonly notatka = signal(localStorage.getItem(this.klucz) ?? '');

    constructor() {
        effect(() => {
            localStorage.setItem(this.klucz, this.notatka());
        });
    }

    wyczysc(): void {
        this.notatka.set('');
    }
}

<div class="p-3">
  <div style="max-width: 30rem">
    <label class="form-label" for="notatka">Notatki przed turniejem</label>
    <textarea id="notatka" name="notatka" class="form-control mb-2" rows="5" [(ngModel)]="notatka"></textarea>
    <button class="btn btn-sm btn-outline-danger" (click)="wyczysc()">Wyczyść</button>
    <p class="small text-secondary mt-2">Znaków zapisanych w przeglądarce: {{ notatka().length }}</p>
  </div>
</div>

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

@Component({
    selector: 'app-stoper',
    imports: [],
    template: `<div class="alert alert-info mb-0">Stoper: {{ sekundy() }} s</div>`
})
export class Stoper {
    readonly sekundy = signal(0);

    constructor() {
        setInterval(() => {
            this.sekundy.update(s => s + 1);
            console.log('tyk', this.sekundy());
        }, 1000);
    }
}

import { Component, signal } from '@angular/core';
import { Stoper } from './stoper';

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

<div class="p-3">
  <div style="max-width: 24rem">
    <button class="btn btn-primary mb-3" (click)="widoczny.set(!widoczny())">
      {{ widoczny() ? 'Ukryj stoper' : 'Pokaż stoper' }}
    </button>
    @if (widoczny()) {
      <app-stoper />
    }
  </div>
</div>

import { Component, DestroyRef, inject, signal } from '@angular/core';

@Component({
    selector: 'app-stoper',
    imports: [],
    template: `<div class="alert alert-success mb-0">Stoper: {{ sekundy() }} s</div>`
})
export class Stoper {
    readonly sekundy = signal(0);

    constructor() {
        const numer = setInterval(() => {
            this.sekundy.update(s => s + 1);
            console.log('tyk', this.sekundy());
        }, 1000);

        inject(DestroyRef).onDestroy(() => {
            clearInterval(numer);
            console.log('stoper zatrzymany po', this.sekundy(), 's');
        });
    }
}

import { Component, signal } from '@angular/core';
import { Stoper } from './stoper';

@Component({
    selector: 'app-demo',
    imports: [Stoper],
    templateUrl: './demo.html'
})
export class Demo {
    readonly widoczny = signal(true);
    readonly ilePokazan = signal(1);

    przelacz(): void {
        if (!this.widoczny()) {
            this.ilePokazan.update(n => n + 1);
        }
        this.widoczny.set(!this.widoczny());
    }
}

<div class="p-3">
  <div style="max-width: 24rem">
    <button class="btn btn-primary mb-3" (click)="przelacz()">
      {{ widoczny() ? 'Ukryj stoper' : 'Pokaż stoper' }}
    </button>
    @if (widoczny()) {
      <app-stoper />
    }
    <p class="small text-secondary mt-2">Stoper tworzony już {{ ilePokazan() }} raz(y).</p>
  </div>
</div>