How to use services to abstract API endpoints and data models from components

Question

Can i know How to use services to abstract API endpoints and data models from components?

Answer 1

To abstract API endpoints and data models from components in Angular, use services to handle all HTTP calls and data logic.

Steps:

Create a service to manage API calls:

// user.service.ts

@Injectable({ providedIn: 'root' })

export class UserService {

  constructor(private http: HttpClient) {}

  getUsers() {

    return this.http.get<User[]>('/api/users');

  }

  createUser(data: User) {

    return this.http.post('/api/users', data);

  }

}

Use the service in components:

// user.component.ts

this.userService.getUsers().subscribe(users => {

  this.users = users;

});