מעבר מאנגולר 15 לאנגולר 18

// app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { MyComponent } from './my.component';

@NgModule({
  declarations: [AppComponent, MyComponent],
  imports: [BrowserModule],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}

// my.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-my-component',
  template: `<p>My Component works!</p>`,
  standalone: true,
})
export class MyComponent {}

// main.ts
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';

bootstrapApplication(AppComponent);

// counter.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-counter',
  template: `
    <p>Count: {{ count }}</p>
    <button (click)="increment()">Increment</button>
  `,
})
export class CounterComponent {
  count = 0;

  increment() {
    this.count++;
  }
}

// counter.component.ts
import { Component, signal } from '@angular/core';

@Component({
  selector: 'app-counter',
  template: `
    <p>Count: {{ count() }}</p>
    <button (click)="increment()">Increment</button>
  `,
  standalone: true,
})
export class CounterComponent {
  count = signal(0);

  increment() {
    this.count.update((value) => value + 1);
  }
}

// my.service.ts
import { Injectable, OnDestroy } from '@angular/core';
import { Subscription } from 'rxjs';

@Injectable({
  providedIn: 'root',
})
export class MyService implements OnDestroy {
  private subscription: Subscription;

  constructor() {
    this.subscription = someObservable.subscribe();
  }

  ngOnDestroy() {
    this.subscription.unsubscribe();
  }
}

// my.service.ts
import { Injectable, inject, DestroyRef } from '@angular/core';

@Injectable({
  providedIn: 'root',
})
export class MyService {
  private destroyRef = inject(DestroyRef);
  private subscription = someObservable.subscribe();

  constructor() {
    this.destroyRef.onDestroy(() => {
      this.subscription.unsubscribe();
    });
  }
}

// app-routing.module.ts
const routes: Routes = [
  {
    path: 'admin',
    loadChildren: () =>
      import('./admin/admin.module').then((m) => m.AdminModule),
    canLoad: [AuthGuard],
  },
];

// app-routing.module.ts
import { inject } from '@angular/core';

const routes: Routes = [
  {
    path: 'admin',
    loadComponent: () =>
      import('./admin/admin.component').then((m) => m.AdminComponent),
    canMatch: [
      () => inject(AuthService).isLoggedIn(),
    ],
  },
];

// my-component.component.ts
import { Component, Input } from '@angular/core';

@Component({
  selector: 'my-component',
  template: `<p>{{ name }}</p>`,
})
export class MyComponent {
  @Input() name!: string;
}

// my-component.component.ts
import { Component, Input } from '@angular/core';

@Component({
  selector: 'my-component',
  template: `<p>{{ name }}</p>`,
})
export class MyComponent {
  @Input({ required: true }) name!: string;
}

// article.component.ts
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';

@Component({
  selector: 'app-article',
  template: `<p>Article ID: {{ articleId }}</p>`,
})
export class ArticleComponent implements OnInit {
  articleId?: string;

  constructor(private route: ActivatedRoute) {}

  ngOnInit() {
    this.articleId = this.route.snapshot.paramMap.get('articleId') ?? undefined;
  }
}

// app.module.ts
import { RouterModule, withComponentInputBinding } from '@angular/router';

@NgModule({
  imports: [
    RouterModule.forRoot(routes, {
      bindToComponentInputs: true,
    }),
    // or
    RouterModule.forRoot(routes, withComponentInputBinding()),
  ],
})
export class AppModule {}

// app-routing.module.ts
const routes: Routes = [
  {
    path: 'articles/:articleId',
    component: ArticleComponent,
  },
];

// article.component.ts
import { Component, Input } from '@angular/core';

@Component({
  selector: 'app-article',
  template: `<p>Article ID: {{ articleId }}</p>`,
})
export class ArticleComponent {
  @Input() articleId?: string;
}

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { HomeComponent } from './home/home.component';

@NgModule({
  declarations: [AppComponent, HomeComponent],
  imports: [BrowserModule],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}

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

@Component({
  selector: 'app-home',
  template: `<h1>Welcome to the Home Component!</h1>`,
})
export class HomeComponent {}

import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';

@Component({
  selector: 'app-home',
  template: `<h1>Welcome to the Standalone Home Component!</h1>`,
  standalone: true,
  imports: [CommonModule],
})
export class HomeComponent {}

import { Component } from '@angular/core';
import { MyStandaloneComponent } from './my-standalone.component';

@Component({
  selector: 'app-parent',
  template: `
    <h1>Parent Component</h1>
    <app-my-standalone></app-my-standalone>
  `,
  standalone: true,
  imports: [MyStandaloneComponent],
})
export class ParentComponent {}

import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';

bootstrapApplication(AppComponent);

import { Routes } from '@angular/router';

export const routes: Routes = [
  {
    path: 'dashboard',
    loadComponent: () =>
      import('./dashboard/dashboard.component').then((m) => m.DashboardComponent),
  },
];

// component-with-provider.component.ts
import { Component } from '@angular/core';
import { MyService } from './my-service.service';

@Component({
  selector: 'app-component-with-provider',
  template: `<p>Component with a service provider.</p>`,
  standalone: true,
  providers: [MyService],
})
export class ComponentWithProviderComponent {}

// highlight.directive.ts
import { Directive, ElementRef, Renderer2, HostListener } from '@angular/core';

@Directive({
  selector: '[appHighlight]',
  standalone: true,
})
export class HighlightDirective {
  constructor(private el: ElementRef, private renderer: Renderer2) {}

  @HostListener('mouseenter') onMouseEnter() {
    this.highlight('yellow');
  }
  @HostListener('mouseleave') onMouseLeave() {
    this.highlight(null);
  }
  private highlight(color: string | null) {
    this.renderer.setStyle(this.el.nativeElement, 'backgroundColor', color);
  }
}

// truncate.pipe.ts
import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'truncate',
  standalone: true,
})
export class TruncatePipe implements PipeTransform {
  transform(value: string, limit: number = 20): string {
    return value.length > limit ? value.substring(0, limit) + '...' : value;
  }
}

src/
└── app/
    ├── features/
    │   ├── feature1/
    │   │   ├── feature1.component.ts
    │   │   ├── feature1.component.html
    │   │   ├── feature1.service.ts
    │   ├── feature2/
    │       ├── feature2.component.ts
    │       ├── feature2.component.html
    │       ├── feature2.service.ts
    ├── shared/
        ├── components/
        ├── directives/
        ├── pipes/

<!-- Using *ngIf -->
<div *ngIf="condition">
  Content displayed if condition is true.
</div>

<!-- Using *ngFor -->
<ul>
  <li *ngFor="let item of items; trackBy: trackByFn">
    {{ item }}
  </li>
</ul>

<!-- Using *ngSwitch -->
<div [ngSwitch]="value">
  <div *ngSwitchCase="'case1'">Case 1 content</div>
  <div *ngSwitchCase="'case2'">Case 2 content</div>
  <div *ngSwitchDefault>Default content</div>
</div>

<!-- Using @if -->
<div @if="condition">
  Content displayed if condition is true.
</div>

<!-- Using @for -->
<ul>
  <li @for="let item of items; track item.id">
    {{ item }}
  </li>
</ul>

<!-- Using @switch -->
<div @switch="value">
  <div @case="'case1'">Case 1 content</div>
  <div @case="'case2'">Case 2 content</div>
  <div @default>Default content</div>
</div>

// app-routing.module.ts
const routes: Routes = [
  {
    path: 'feature',
    loadChildren: () =>
      import('./feature/feature.module').then((m) => m.FeatureModule),
  },
];

<!-- Template -->
<div @defer (onIdle)="loadComponent()">
  <!-- Content to be loaded lazily -->
</div>

// app-routing.module.ts
const routes: Routes = [
  {
    path: 'feature',
    loadComponent: () =>
      import('./feature/feature.component').then((c) => c.FeatureComponent),
    canActivate: ['defer'],
  },
];

// Defining a custom element
import { Component, NgModule, Injector } from '@angular/core';
import { createCustomElement } from '@angular/elements';

@Component({
  selector: 'my-element',
  template: `<p>My Custom Element</p>`,
})
export class MyElementComponent {}

// Module declaration
@NgModule({
  declarations: [MyElementComponent],
  entryComponents: [MyElementComponent],
})
export class AppModule {
  constructor(private injector: Injector) {
    const el = createCustomElement(MyElementComponent, { injector });
    customElements.define('my-element', el);
  }
}

// Using standalone components
import { Component, inject } from '@angular/core';

@Component({
  selector: 'my-element',
  template: `<p>My Custom Element</p>`,
  standalone: true,
})
export class MyElementComponent {}

// Defining the custom element
const el = createCustomElement(MyElementComponent, {
  injector: inject(Injector),
});
customElements.define('my-element', el);

<div @defer (onIdle)>
  <!-- Content to load when the browser is idle -->
  <app-heavy-component></app-heavy-component>
  <ng-template #loading>
    <p>Loading component...</p>
  </ng-template>
</div>

<div @defer (onVisible)>
  <!-- Content to load when visible in the viewport -->
  <img src="large-image.jpg" alt="Large Image" />
  <ng-template #loading>
    <p>Image is loading...</p>
  </ng-template>
</div>

<div @defer (onTimer)="3000">
  <!-- Content to load after 3 seconds -->
  <app-delayed-content></app-delayed-content>
</div>

<button @defer (onInteraction)>
  Show Details
  <ng-template>
    <!-- Deferred content -->
    <app-details></app-details>
  </ng-template>
</button>

// app-routing.module.ts (Angular 15)
const routes: Routes = [
  { path: 'home', component: HomeComponent },
  { path: 'dashboard', redirectTo: '/user/dashboard' },
];

// app.routes.ts (Angular 18)
import { Routes, Router } from '@angular/router';
import { inject } from '@angular/core';

const routes: Routes = [
  { path: 'home', component: HomeComponent },
  {
    path: 'dashboard',
    redirectTo: (route) => {
      const queryParams = route.queryParams;
      const isAdmin = queryParams['admin'];
      const router = inject(Router);

      if (isAdmin === 'true') {
        return '/admin/dashboard';
      } else if (isAdmin === 'false') {
        return '/user/dashboard';
      } else {
        // Handle error or redirect to not-found
        return '/not-found';
      }
    },
  },
];

// custom-widget.component.ts (Angular 15)
import { Component } from '@angular/core';

@Component({
  selector: 'app-custom-widget',
  template: `
    <ng-content select=".header"></ng-content>
    <ng-content></ng-content>
  `,
})
export class CustomWidgetComponent {}

<app-custom-widget>
  <span class="header">Custom Header</span>
  <p>Custom Content</p>
</app-custom-widget>

// custom-widget.component.ts (Angular 18)
import { Component } from '@angular/core';

@Component({
  selector: 'app-custom-widget',
  template: `
    <ng-content select=".header">Default Header</ng-content>
    <ng-content>Default Content</ng-content>
  `,
})
export class CustomWidgetComponent {}

<!-- Using default content -->
<app-custom-widget></app-custom-widget>

<!-- Overriding default header -->
<app-custom-widget>
  <span class="header">New Header</span>
</app-custom-widget>

// form.component.ts (Angular 15)
import { Component } from '@angular/core';
import { FormControl, Validators } from '@angular/forms';

@Component({
  selector: 'app-form',
  template: `<input [formControl]="nameControl" />`,
})
export class FormComponent {
  nameControl = new FormControl('', Validators.required);

  constructor() {
    this.nameControl.valueChanges.subscribe((value) => {
      console.log('Value changed:', value);
    });

    this.nameControl.statusChanges.subscribe((status) => {
      console.log('Status changed:', status);
    });
  }
}

// form.component.ts (Angular 18)
import { Component } from '@angular/core';
import { FormControl, Validators } from '@angular/forms';

@Component({
  selector: 'app-form',
  template: `<input [formControl]="nameControl" />`,
})
export class FormComponent {
  nameControl = new FormControl('', Validators.required);

  constructor() {
    this.nameControl.events.subscribe((event) => {
      if (event.type === 'valueChange') {
        console.log('Value changed:', event.value);
      } else if (event.type === 'statusChange') {
        console.log('Status changed:', event.status);
      }
    });
  }
}

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';

export interface Item {
  id: number;
  name: string;
}

@Injectable({
  providedIn: 'root',
})
export class DataService {
  private apiUrl = 'https://api.example.com/items';

  constructor(private http: HttpClient) {}

  getItems(): Observable<Item[]> {
    return this.http.get<Item[]>(this.apiUrl);
  }
}

import { Component, OnInit } from '@angular/core';
import { DataService, Item } from '../data.service';

@Component({
  selector: 'app-item-list',
  template: `
    <h2>Items</h2>
    <ul *ngIf="items">
      <li *ngFor="let item of items">{{ item.name }}</li>
    </ul>
  `,
})
export class ItemListComponent implements OnInit {
  items: Item[] = [];

  constructor(private dataService: DataService) {}

  ngOnInit() {
    this.dataService.getItems().subscribe((data) => (this.items = data));
  }
}

import { Injectable, signal } from '@angular/core';
import { HttpClient } from '@angular/common/http';

export interface Item {
  id: number;
  name: string;
}

@Injectable({
  providedIn: 'root',
})
export class DataService {
  private apiUrl = 'https://api.example.com/items';
  items = signal<Item[]>([]);

  constructor(private http: HttpClient) {
    this.fetchItems();
  }

  fetchItems() {
    this.http.get<Item[]>(this.apiUrl).subscribe((data) => this.items.set(data));
  }
}

import { Component } from '@angular/core';
import { DataService } from '../data.service';

@Component({
  selector: 'app-item-list',
  template: `
    <h2>Items</h2>
    <ul>
      <li *ngFor="let item of items()">{{ item.name }}</li>
    </ul>
  `,
})
export class ItemListComponent {
  items = this.dataService.items;

  constructor(private dataService: DataService) {}
}

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';

export interface ItemDetails {
  id: number;
  name: string;
  description: string;
  // Other properties...
}

@Injectable({
  providedIn: 'root',
})
export class DataService {
  private apiUrl = 'https://api.example.com/item-details';

  constructor(private http: HttpClient) {}

  getItemDetails(id: number): Observable<ItemDetails> {
    const body = { id: id };
    return this.http.post<ItemDetails>(this.apiUrl, body);
  }
}

import { Component, OnInit } from '@angular/core';
import { DataService, ItemDetails } from '../data.service';

@Component({
  selector: 'app-item-detail',
  template: `
    <h2>Item Details</h2>
    <div *ngIf="itemDetails">
      <p><strong>ID:</strong> {{ itemDetails.id }}</p>
      <p><strong>Name:</strong> {{ itemDetails.name }}</p>
      <p><strong>Description:</strong> {{ itemDetails.description }}</p>
      <!-- Display other properties as needed -->
    </div>
  `,
})
export class ItemDetailComponent implements OnInit {
  itemDetails?: ItemDetails;
  itemId = 1; // Example id; in a real app, this might come from route parameters or user input.

  constructor(private dataService: DataService) {}

  ngOnInit() {
    this.dataService.getItemDetails(this.itemId).subscribe(
      (data) => {
        this.itemDetails = data;
      },
      (error) => {
        console.error('Error fetching item details:', error);
      }
    );
  }
}

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { ItemDetails } from './item-details.model';

@Injectable({
  providedIn: 'root',
})
export class DataService {
  private apiUrl = 'https://api.example.com/item-details';

  constructor(private http: HttpClient) {}

  getItemDetails(id: number) {
    const body = { id: id };
    return this.http.post<ItemDetails>(this.apiUrl, body);
  }
}

import { Component, signal, effect } from '@angular/core';
import { DataService } from '../data.service';
import { ItemDetails } from '../item-details.model';
import { toSignal } from '@angular/core/rxjs-interop';

@Component({
  selector: 'app-item-detail',
  template: `
    <h2>Item Details</h2>
    <div *ngIf="itemDetails()">
      <p><strong>ID:</strong> {{ itemDetails().id }}</p>
      <p><strong>Name:</strong> {{ itemDetails().name }}</p>
      <p><strong>Description:</strong> {{ itemDetails().description }}</p>
    </div>
  `,
})
export class ItemDetailComponent {
  itemId = signal<number>(1); // Signal holding the ID
  itemDetails = signal<ItemDetails | null>(null); // Signal for item details

  constructor(private dataService: DataService) {
    effect(() => {
      const id = this.itemId();
      if (id) {
        // Fetch data when itemId changes
        const itemDetails$ = this.dataService.getItemDetails(id);
        const itemDetailsSignal = toSignal(itemDetails$, { initialValue: null });
        this.itemDetails.set(itemDetailsSignal());
      }
    });
  }
}

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { debounceTime } from 'rxjs/operators';

@Component({
  selector: 'app-form',
  template: `
    <form [formGroup]="myForm">
      <input formControlName="name" placeholder="Enter your name" />
      <div *ngIf="nameError">{{ nameError }}</div>
    </form>
  `,
})
export class FormComponent implements OnInit {
  myForm: FormGroup;
  nameError: string = '';

  constructor(private fb: FormBuilder) {
    this.myForm = this.fb.group({
      name: ['', Validators.required],
    });
  }

  ngOnInit() {
    this.myForm
      .get('name')
      ?.valueChanges.pipe(debounceTime(300))
      .subscribe((value) => {
        if (value.length < 3) {
          this.nameError = 'Name must be at least 3 characters';
        } else {
          this.nameError = '';
        }
      });
  }
}

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

@Component({
  selector: 'app-form',
  template: `
    <form>
      <input [formControl]="nameControl" placeholder="Enter your name" />
      <div *ngIf="nameError()">{{ nameError() }}</div>
    </form>
  `,
})
export class FormComponent {
  nameControl = new FormControl('');
  nameError = signal<string>('');

  constructor() {
    effect(() => {
      const value = this.nameControl.value;
      if (value.length < 3) {
        this.nameError.set('Name must be at least 3 characters');
      } else {
        this.nameError.set('');
      }
    });
  }
}

import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs';

@Injectable({
  providedIn: 'root',
})
export class CounterService {
  private _counter = new BehaviorSubject<number>(0);
  counter$ = this._counter.asObservable();

  increment() {
    this._counter.next(this._counter.value + 1);
  }
}

import { Component, OnInit } from '@angular/core';
import { CounterService } from '../counter.service';

@Component({
  selector: 'app-counter-display',
  template: `<p>Counter: {{ counter }}</p>`,
})
export class CounterDisplayComponent implements OnInit {
  counter: number = 0;

  constructor(private counterService: CounterService) {}

  ngOnInit() {
    this.counterService.counter$.subscribe((value) => (this.counter = value));
  }
}

import { Component } from '@angular/core';
import { CounterService } from '../counter.service';

@Component({
  selector: 'app-counter-button',
  template: `<button (click)="increment()">Increment</button>`,
})
export class CounterButtonComponent {
  constructor(private counterService: CounterService) {}

  increment() {
    this.counterService.increment();
  }
}

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

@Injectable({
  providedIn: 'root',
})
export class CounterService {
  counter = signal<number>(0);

  increment() {
    this.counter.update((value) => value + 1);
  }
}

import { Component } from '@angular/core';
import { CounterService } from '../counter.service';

@Component({
  selector: 'app-counter-display',
  template: `<p>Counter: {{ counter() }}</p>`,
})
export class CounterDisplayComponent {
  counter = this.counterService.counter;

  constructor(private counterService: CounterService) {}
}

import { Component } from '@angular/core';
import { CounterService } from '../counter.service';

@Component({
  selector: 'app-counter-button',
  template: `<button (click)="increment()">Increment</button>`,
})
export class CounterButtonComponent {
  constructor(private counterService: CounterService) {}

  increment() {
    this.counterService.increment();
  }
}

// data.service.ts (Angular 17)
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable, forkJoin } from 'rxjs';
import { map } from 'rxjs/operators';

export interface User {
  id: number;
  name: string;
}

export interface Orders {
  userId: number;
  orders: Order[];
}

@Injectable({
  providedIn: 'root',
})
export class DataService {
  constructor(private http: HttpClient) {}

  getUserWithOrders(userId: number): Observable<{ user: User; orders: Orders }> {
    return forkJoin({
      user: this.http.get<User>(`/api/users/${userId}`),
      orders: this.http.get<Orders>(`/api/orders?userId=${userId}`),
    });
  }
}

import { Component } from '@angular/core';
import { FormControl } from '@angular/forms';
import { Observable } from 'rxjs';
import { debounceTime, distinctUntilChanged, switchMap } from 'rxjs/operators';
import { SearchService } from '../search.service';

@Component({
  selector: 'app-search',
  template: `
    <input type="text" [formControl]="searchControl" placeholder="Search..." />
    <ul>
      <li *ngFor="let item of results$ | async">{{ item.name }}</li>
    </ul>
  `,
})
export class SearchComponent {
  searchControl = new FormControl('');
  results$: Observable<SearchResult[]>;

  constructor(private searchService: SearchService) {
    this.results$ = this.searchControl.valueChanges.pipe(
      debounceTime(300),
      distinctUntilChanged(),
      switchMap((term) => this.searchService.search(term))
    );
  }
}

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable, throwError, timer } from 'rxjs';
import { retryWhen, mergeMap } from 'rxjs/operators';

@Injectable({
  providedIn: 'root',
})
export class DataService {
  constructor(private http: HttpClient) {}

  getData(): Observable<Data> {
    return this.http.get<Data>('/api/data').pipe(
      retryWhen((errors) =>
        errors.pipe(
          mergeMap((error, i) => {
            if (i >= 3) {
              return throwError(error);
            }
            return timer(1000 * (i + 1));
          })
        )
      )
    );
  }
}

import { Directive, ElementRef, OnInit } from '@angular/core';
import { fromEvent } from 'rxjs';
import { switchMap, takeUntil, pairwise } from 'rxjs/operators';

@Directive({
  selector: '[appDraggable]',
})
export class DraggableDirective implements OnInit {
  constructor(private element: ElementRef) {}

  ngOnInit() {
    const mouseDown$ = fromEvent<MouseEvent>(this.element.nativeElement, 'mousedown');
    const mouseMove$ = fromEvent<MouseEvent>(document, 'mousemove');
    const mouseUp$ = fromEvent<MouseEvent>(document, 'mouseup');

    mouseDown$
      .pipe(
        switchMap(() =>
          mouseMove$.pipe(
            takeUntil(mouseUp$),
            pairwise()
          )
        )
      )
      .subscribe(([prev, curr]) => {
        const deltaX = curr.clientX - prev.clientX;
        const deltaY = curr.clientY - prev.clientY;
        // Update element position
        const element = this.element.nativeElement;
        element.style.left = element.offsetLeft + deltaX + 'px';
        element.style.top = element.offsetTop + deltaY + 'px';
      });
  }
}

import { Observable, timer, throwError } from 'rxjs';
import { mergeMap } from 'rxjs/operators';

export function retryWithDelay(retryCount: number, delayMs: number) {
  return (src: Observable<any>) =>
    src.pipe(
      retryWhen((errors) =>
        errors.pipe(
          mergeMap((error, i) => {
            if (i >= retryCount) {
              return throwError(error);
            }
            return timer(delayMs);
          })
        )
      )
    );
}

import { Component } from '@angular/core';
import { interval } from 'rxjs';
import { toSignal } from '@angular/core/rxjs-interop';

@Component({
  selector: 'app-timer',
  template: `<p>Seconds elapsed: {{ secondsElapsed() }}</p>`,
})
export class TimerComponent {
  secondsElapsed = toSignal(interval(1000));
}