angular-take-until-destroyed.ts

import { Component, OnDestroy, OnInit } from '@angular/core';
import { Subject, interval } from 'rxjs';
import { takeUntil } from 'rxjs/operators';

@Component({
    template: `
<div>{{ count }}</div>
<button (click)="startCounting()">Start Counting</button>
`
})
export class CounterComponent implements OnInit, OnDestroy {

    count: number;

    private _destroyed$ = new Subject();

    ngOnInit() {
        this.startCounting();
    }

    ngOnDestroy() {
        this._destroyed$.next();
        this._destroyed$.complete();
    }

    startCounting() {
        interval(1000)
            .pipe(takeUntil(this._destroyed$))
            .subscribe(count => this.count = count);
    }

}