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

@Component({
  selector: 'bh-effects',
  standalone: true,
  imports: [],
  template: `<button type="button" (click)="count.set(2)">Update count</button>
    <p data-result>{{ count() }} {{ count() === 1 ? 'tool' : 'tools' }}</p>`,
})
export class App {
  count = signal(1);
  private doc = inject(DOCUMENT);
  constructor() {
    effect((onCleanup) => {
      const before = this.doc.title;
      this.doc.title = 'Tools ' + this.count();
      onCleanup(() => {
        this.doc.title = before;
      });
    });
  }
}