Angular HTTP observable of tuple

Question

In my service I have getTasks() method:

getTasks(): Observable<TaskDto[]> {
  let url = `/tasks/gettasks`;
  return this.http
    .get(url)
    .subscribe(res => res);
}

That works fine, but now I want to read response header and return it's value along with the payload. So instead of Observable<TaskDto[]> the method should return observable of tuple: Observable<[TaskDto[],Number]>

getTasks(): Observable<[TaskDto[],Number]> {
  let url = `/tasks/gettasks`;
  return this.http
    .get<TaskDto[]>(url, {observe: 'response'})
    .subscribe(res => {
      let payload:TaskDto[] = res.body;
      let page:Number = Number(res.headers.get('X-Pagination'));
      let output = [payload, page];
    });
}

I was able to read header value, but how can I return Observable<[TaskDto[],Number] from getTasks() ?

Answer 1

You should use map in your getTasks method to map your http response into the tuple that you really want to return. Something like this:

getTasks(): Observable<[TaskDto[],Number]> {
  let url = `/tasks/gettasks`;
  return this.http
    .get<TaskDto[]>(url, {observe: 'response'})
    .pipe(map(res => {
      let payload:TaskDto[] = res.body;
      let page:Number = Number(res.headers.get('X-Pagination'));
      let output: [TaskDto[],Number] = [payload, page];
      return output;
    }));
}

Then subscribe to this method from the calling component.