Classic pattern

app.component.ts

import { Component, OnDestroy, OnInit } from '@angular/core';
import { Subscription } from 'rxjs';
import { TodoService } from './todo.service';
import { ToDo } from './model';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent implements OnInit, OnDestroy {
  subscription: Subscription;
  data: ToDo;

  constructor(private todoService: TodoService) {}
  ngOnInit(): void {
    this.subscription = this.todoService
      .getTodo()
      .subscribe((todo) => (this.data = todo));
    console.log(this.data);
  }

  ngOnDestroy(): void {
    this.subscription.unsubscribe();
  }
}