O'Reilly logo

Mastering Angular Components by Gion Kunz

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Loading data in the task service

It's time to change our task service and make use of the Angular HTTP client to obtain the task data from our database. Let's open up the src/app/tasks/task.service.ts file and change the file content to the following:

import {Injectable} from '@angular/core';import {HttpClient} from '@angular/common/http';import {BehaviorSubject} from 'rxjs';import {Task} from '../model';@Injectable()export class TaskService {  private tasks = new BehaviorSubject<Task[]>([]);  constructor(private http: HttpClient) {    this.loadTasks();  }  private loadTasks() {    this.http.get<Task[]>('/api/tasks')      .subscribe((tasks) => this.tasks.next(tasks));  }  getTasks() {    return this.tasks.asObservable();  }  addTask(task: Task) { return this.http ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required