Viết một GET request bằng HttpClient và hiển thị kết quả trong component

Đầu tiên bật HttpClient trong cấu hình app, sau đó inject nó và gọi get<T>(). Lời gọi trả về một observable, và chưa có gì được gửi cho đến khi có thứ gì đó subscribe. toSignal subscribe giúp bạn và cho ra một signal để template đọc.

// app.config.ts
export const appConfig: ApplicationConfig = {
  providers: [provideHttpClient()],
}

// users.ts
interface User {
  id: number
  name: string
}

@Component({
  selector: 'app-users',
  template: `
    @for (u of users(); track u.id) {
      <li>{{ u.name }}</li>
    } @empty {
      <li>No users</li>
    }
  `,
})
export class Users {
  private http = inject(HttpClient)
  users = toSignal(this.http.get<User[]>('/api/users'), { initialValue: [] })
}

Generic get<User[]> định kiểu cho response. toSignal cũng tự unsubscribe khi component bị destroy. Bạn có thể dùng subscribe, hoặc async pipe trên observable.

Luôn bật HttpClient bằng provideHttpClient và định kiểu cho response.