How to use ngx-auto-unsubscribe - 10 common examples

import { AfterViewInit, Component, ElementRef, Inject, OnDestroy, OnInit, ViewChild } from '@angular/core';
import { ROUTE_ANIMATIONS_ELEMENTS } from '@ngx-starter-kit/animations';
import { WINDOW } from '@ngx-starter-kit/core';
import { AutoUnsubscribe } from 'ngx-auto-unsubscribe';
import { fromEvent, Subscription } from 'rxjs';
import { debounceTime, distinctUntilChanged, map } from 'rxjs/operators';
// import * as Trianglify from 'trianglify';
declare var Trianglify: any;

/** @dynamic */
@AutoUnsubscribe()
@Component({
  selector: 'ngx-about',
  templateUrl: './about.component.html',
  styleUrls: ['./about.component.scss'],
})
export class AboutComponent implements OnInit, OnDestroy, AfterViewInit {
  routeAnimationsElements = ROUTE_ANIMATIONS_ELEMENTS;
  @ViewChild('trianglify', { static: true }) trianglifyCanvasRef: ElementRef;
  color = 'YlGnBu'; // 'random'
  private sub: Subscription;
  constructor(private elementRef: ElementRef, @Inject(WINDOW) private window: Window) {}

  ngOnInit() {
    fromEvent(this.window, 'resize')
      .pipe(
        debounceTime(100),

import { Store } from '@ngrx/store';
import { AppState } from '../../../store';
import { UserProfile } from './user-profile';
import { Utils } from 'shared-library/core/services';
import {  UserActions } from 'shared-library/core/store';
import { AutoUnsubscribe } from 'ngx-auto-unsubscribe';
import { ActivatedRoute } from '@angular/router';

@Component({
  selector: 'user-profile',
  templateUrl: './user-profile.component.html',
  styleUrls: ['./user-profile.component.scss'],
  changeDetection: ChangeDetectionStrategy.OnPush
})

@AutoUnsubscribe({'arrayName': 'subscriptions'})
export class UserProfileComponent extends UserProfile implements OnDestroy {

  // Properties
  subscriptions = [];

  constructor(public route: ActivatedRoute,
    public store: Store,
    public userAction: UserActions,
    public cd: ChangeDetectorRef,
    public utils: Utils) {
    super( store, userAction, utils, cd, route);


  }

  ngOnDestroy() {

HostBinding,
  ChangeDetectorRef,
  HostListener,
  Inject,
} from '@angular/core';
import { Router, NavigationEnd } from '@angular/router';
import { Observable, Subject, Subscription } from 'rxjs';

import { MatSnackBar, MatSnackBarConfig } from '@angular/material/snack-bar';
import { MenuItem, MenuService, SidenavState } from '@ngx-starter-kit/navigator';
import { AutoUnsubscribe } from 'ngx-auto-unsubscribe';
import { WINDOW } from '@ngx-starter-kit/core';
// import { sidenavAnimation } from '@ngx-starter-kit/animations';

/** @dynamic */
@AutoUnsubscribe()
@Component({
  selector: 'ngx-sidenav',
  templateUrl: './sidenav.component.html',
  styleUrls: ['./sidenav.component.scss'],
  // animations: [sidenavAnimation]
  encapsulation: ViewEncapsulation.None,
})
export class SidenavComponent implements OnInit, OnDestroy {
  private destroyed$ = new Subject();

  items: MenuItem[];

  constructor(
    private router: Router,
    private menuService: MenuService,
    private snackBar: MatSnackBar,

import { WindowRef, Utils } from 'shared-library/core/services';
import { AppState, appState } from '../../../store';
import { Dashboard } from './dashboard';
import { RouterExtensions } from 'nativescript-angular/router';
import { User, Game } from 'shared-library/shared/model';
import { AutoUnsubscribe } from 'ngx-auto-unsubscribe';
import { Page } from 'tns-core-modules/ui/page/page';

@Component({
  selector: 'dashboard',
  templateUrl: './dashboard.component.html',
  styleUrls: ['./dashboard.component.scss', './dashboard.scss'],
  changeDetection: ChangeDetectionStrategy.OnPush
})

@AutoUnsubscribe({ 'arrayName': 'subscriptions' })
export class DashboardComponent extends Dashboard implements OnInit, OnDestroy {

  gameStatus: any;
  subscriptions = [];
  // This is magic variable
  // it delay complex UI show Router navigation can finish first to have smooth transition
  renderView = false;


  constructor(public store: Store,
    questionActions: QuestionActions,
    gameActions: GameActions,
    userActions: UserActions, windowRef: WindowRef,
    @Inject(PLATFORM_ID) platformId: Object,
    ngZone: NgZone,
    utils: Utils,

import { Component, OnInit } from '@angular/core';

import { EventBusService, Events } from './core/services/event-bus.service';
import { Customer } from './shared/interfaces';
import { Subscription } from 'rxjs';
import { DataService } from './core/services/data.service';
import { AutoUnsubscribe } from 'ngx-auto-unsubscribe';

@AutoUnsubscribe()
@Component({ 
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent implements OnInit { 
  customers: Customer[];
  customer: Customer;
  eventbusSub: Subscription;
  customersChangedSub: Subscription;
  
  constructor(private eventbus: EventBusService, private dataService: DataService) { }

  ngOnInit() {
    //Example of using an event bus to provide loosely coupled communication (mediator pattern)
    this.eventbusSub = this.eventbus.on(Events.CustomerSelected, (cust => this.customer = cust));

import { Component, OnInit, OnDestroy } from '@angular/core';
import { Invitation, Category, userCardType, User } from 'shared-library/shared/model';
import { Store, select } from '@ngrx/store';
import { CoreState, coreState, categoryDictionary } from './../../../../core/store';
import { Observable, combineLatest } from 'rxjs';
import { AutoUnsubscribe } from 'ngx-auto-unsubscribe';

@Component({
  selector: 'app-notification',
  templateUrl: './notification.component.html',
  styleUrls: ['./notification.component.scss']
})

@AutoUnsubscribe({ 'arrayName': 'subscriptions' })
export class NotificationComponent implements OnInit, OnDestroy {

  user: User;
  friendInvitations: Invitation[] = [];
  subscriptions = [];
  categoryDict$: Observable<{ [key: number]: Category }>;
  categoryDict: { [key: number]: Category };
  notifications = [];
  userCardType = userCardType;
  constructor(public store: Store) {
  }

  ngOnInit() {
    this.categoryDict$ = this.store.select(categoryDictionary);
    this.subscriptions.push(this.categoryDict$.subscribe(categoryDict => this.categoryDict = categoryDict));
    this.subscriptions.push(this.store.select(coreState).pipe(select(s => s.user)).subscribe(user => {

import { FormBuilder } from '@angular/forms';
import { MatDialogRef } from '@angular/material';
import { CoreState, UIStateActions } from '../../store';
import { Store } from '@ngrx/store';
import { FirebaseAuthService } from './../../auth/firebase-auth.service';
import { Login } from './login';
import { AutoUnsubscribe } from 'ngx-auto-unsubscribe';

@Component({
  selector: 'login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.scss'],
  changeDetection: ChangeDetectionStrategy.OnPush
})

@AutoUnsubscribe({ 'arrayName': 'subscriptions' })
export class LoginComponent extends Login implements OnInit, OnDestroy {

  constructor(public fb: FormBuilder,
    public store: Store,
    public dialogRef: MatDialogRef,
    private uiStateActions: UIStateActions,
    private firebaseAuthService: FirebaseAuthService,
    private cd: ChangeDetectorRef) {
    super(fb, store);
  }

  ngOnInit() { }

  onSubmit() {
    if (!this.loginForm.valid) {
      return;

import { ChangeDetectionStrategy, Component, OnDestroy, OnInit } from '@angular/core';
import { MatSnackBar } from '@angular/material';
import { AuthState } from '@ngx-starter-kit/auth';
import { Crumb } from '@ngx-starter-kit/breadcrumbs';
import { ProfileState } from '@ngx-starter-kit/core';
import { Profile } from '@ngx-starter-kit/models';
import { Select } from '@ngxs/store';
import { AutoUnsubscribe } from 'ngx-auto-unsubscribe';
import { Observable } from 'rxjs';

@AutoUnsubscribe()
@Component({
  selector: 'ngx-profile',
  templateUrl: './profile.component.html',
  styleUrls: ['./profile.component.scss'],
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class ProfileComponent implements OnInit, OnDestroy {
  crumbs: ReadonlyArray = [{ name: 'Dashboard', link: '/dashboard' }, { name: 'Profile' }];

  @Select(AuthState.profile) oidcProfile$: Observable;
  @Select(ProfileState.profile) appProfile$: Observable;
  @Select(ProfileState.loading) loading$: Observable;
  @Select(ProfileState.error) error$: Observable;
  constructor(private snackBar: MatSnackBar) {}

  ngOnInit() {

import { AutoUnsubscribe } from 'ngx-auto-unsubscribe'

import { Observable } from 'rxjs/Observable'

import { IJPPhoto } from 'models/jpphoto'
import { JPPhotosDatasource } from 'app/jpphotos.datasource'
import { IState } from 'app/redux/reducers'
import { LoadPhotosRequestAction } from 'app/redux/actions'
import { Subscription } from 'rxjs/Subscription'

@Component({
  selector: 'rdt-root',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.scss' ],
})
@AutoUnsubscribe()
export class AppComponent implements OnInit {
  public displayedColumns = [ 'albumId', 'id', 'title', 'url', 'thumbnailUrl' ]
  public dataSource: JPPhotosDatasource

  @ViewChild(MdPaginator)
  public paginator: MdPaginator
  @ViewChild(MdSort)
  public sort: MdSort

  private jpphotos$: Observable
  private paginatorSubscription: Subscription = Subscription.EMPTY
  private sortSubscription: Subscription = Subscription.EMPTY

  public constructor(private store: Store) {
    this.jpphotos$ = this.store.select(state => state.app.photos)
  }

import { Store, select } from '@ngrx/store';
import { map, skip, take, filter } from 'rxjs/operators';
import { AppState, appState } from '../../store';
import { AuthenticationProvider } from 'shared-library/core/auth';
import { User } from 'shared-library/shared/model';
import { Location } from '@angular/common';
import { AutoUnsubscribe } from 'ngx-auto-unsubscribe';


@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})

@AutoUnsubscribe({ 'arrayName': 'subscriptions' })
export class AppComponent implements OnInit, OnDestroy {
  title = 'trivia!';
  user: User;
  subscriptions = [];

  theme = '';
  constructor(private renderer: Renderer2,
    private authService: AuthenticationProvider,
    private store: Store,
    public router: Router,
    private location: Location,
  ) {



    this.subscriptions.push(store.select(appState.coreState).pipe(select(s => s.user), skip(1)).subscribe(user => {