Why should you care?

Every AngularVerse dashboard loads data from an API — centralize calls in services, not components.

See it live — copy this example

Run examples in an Angular CLI project (ng serve). Prefer standalone components and TypeScript strict mode.

// app.config.ts
import { provideHttpClient } from '@angular/common/http';
export const appConfig = { providers: [provideHttpClient()] };

// data.service.ts
inject(HttpClient).get<User[]>('/api/users');

What happened?

• provideHttpClient registers the service.
• Generics type the JSON body.
• Prefer relative URLs with a proxy in dev.

Practice next

1. Add provideHttpClient.
2. Create a UsersService with getAll().
3. Subscribe or use async pipe in a component.
4. Add an environment apiUrl.
5. Switch to httpResource if your version supports it.

Remember

HttpClient is injectable. Type responses. Keep HTTP in services.

Load users

Admin table needs rows.

Outcome: Service returns Observable data.