Angular BaseComponent with handle destroy$ and takeUntil pattern to unsubscribe!

base.component.ts

import { Directive, OnDestroy } from "@angular/core";
import { Subject } from "rxjs";
import { takeUntil } from "rxjs/operators";

@Directive() // Needed only for Angular v9+ strict mode that enforce decorator to enable Component inheritance
export abstract class BaseComponent implements OnDestroy {
	// _destroy$ is LAZY: it'll be created (and allocate memory) only if you use takeUntilDestroy
	private _destroy$?: Subject<void>;
	protected takeUntilDestroy = <T>() => {
		if (!this._destroy$) this._destroy$ = new Subject<void>(); // LAZY Subject
		return takeUntil<T>(this._destroy$);
	};
	ngOnDestroy() {
		if (this._destroy$) {
			this._destroy$.next();
			this._destroy$.complete();
		}
	}
}

sample-use.component.ts

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { BaseComponent } from './base.component';

@Component({
  selector: 'app-sample-use',
  template: `
    <p>
      sample-use works!
      {{ pars | json }}
    </p>
  `
})
export class SampleUseComponent extends BaseComponent implements OnInit {

  public pars: { [key:string]: any } = {};
  constructor(private route: ActivatedRoute) { 
    super()
  }

  ngOnInit() {
    this.sampleSubcribe(true);
  }

  sampleSubcribe(log:boolean = false){
    this.route.paramMap
      .pipe(this.takeUntilDestroy()) //NOTICE takeUntilDestroy PATTERN TO AUTOMATIC unsubscribe!
      .subscribe(pm => {
        const obj = {};
        pm.keys.forEach(k => {
          obj[k] = pm.get(k);
        });
        if (log) console.log({ pm, obj })
        this.pars = obj;
      });
  }

}