Use an on destroy service provider instead of creating a subject and destroying it for every component

angular-sample.ts

// Service
@Injectable()
export class OnDestroyService implements OnDestroy {

  triggered$ = new Subject()

  ngOnDestroy() {
    this.triggered$.next()
    this.triggered$.complete()
  }
}

// Use in providers
@Component({
  selector: 'my-component',
  templateUrl: './my.component.html',
  styleUrls: ['./my.component.scss'],
  providers: [
    OnDestroyService
  ]
})
export class MyComponent implements OnInit {
  
  constructor(private onDestroy: OnDestroyService, private fooService: FooService) { }
  
  ngOnInit() {
    fooService
      .getData
      .pipe(takeUntil(this.onDestroy.triggered$))
      .subscribe((v) => console.log(v))
  }
}