Data Manipulation using the RxJS tap operator

app.component.ts

import { Component } from '@angular/core';
import { TodoService } from './todo.service';
import { map } from 'rxjs/operators';

interface ToDo {
  userId: number;
  id: number;
  title: string;
  completed: boolean;
}

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  data$ = this.todoService.todo$.pipe(
    map((x: ToDo) => ({
      ...x,
      title: x.title + ' and more',
    }))
  );

  constructor(private todoService: TodoService) {}
}