import { Component, OnInit, Injectable, inject, signal } from '@angular/core';
import { Observable, of } from 'rxjs';
import { bootstrapApplication } from '@angular/platform-browser';

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

@Injectable({ providedIn: 'root' })
export class UserService {
  getUser(id: number): Observable<User> {
    return of({ id, name: 'Ada Lovelace' });
  }
}

@Component({
  selector: 'app-profile',
  standalone: true,
  template: `<p>{{ name() }}</p>`
})
export class ProfileComponent implements OnInit {
  private userService = inject(UserService);
  protected name = signal('Loading...');

  ngOnInit(): void {
    console.log('ngOnInit called');
    this.userService.getUser(1).subscribe(user => this.name.set(user.name));
  }
}

bootstrapApplication(ProfileComponent).catch((err) => console.error(err));