RXJS using Take while

main.ts

import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app/app.module';
import { environment } from './environments/environment';

// Common rxjs operators
import 'rxjs/add/operator/takeWhile';

if (environment.production) {
  enableProdMode();
}

platformBrowserDynamic().bootstrapModule(AppModule);

takewhile.component.ts

import { Component, OnInit, OnDestroy } from '@angular/core';
import { SearchCriteriaService } from 'app/search/main/search-panel/search-criteria.service';
import { SearchCriteria } from 'app/search/types/search-criteria.type';
import { Subscription } from 'rxjs/Subscription';

//import 'rxjs/add/operator/takeWhile';

@Component({
  selector: 'app-search-panel-criteria',
  templateUrl: './search-panel-criteria.component.html',
  styleUrls: ['./search-panel-criteria.component.scss']
})
export class SearchPanelCriteriaComponent implements OnDestroy, OnInit {
  isActive = true;
  searchCriteria = [];

  constructor(public searchCriteriaService: SearchCriteriaService) { }

  ngOnInit() {
    this.searchCriteriaService.items$
      .takeWhile(() => this.isActive)
      .subscribe((searchCriteria: SearchCriteria[]) => {
        this.searchCriteria = searchCriteria;
      });
  }

  onRemoveClicked(criteria: SearchCriteria) {
    this.searchCriteriaService.removeItem(criteria);
  }

  ngOnDestroy() {
    this.isActive = false;
  }

}