alert-container.component.ts

import { Component } from '@angular/core';
import { Store, select } from '@ngrx/store';
import { GlobalState } from '@app/core/state';
import * as selectors from '@app/degree-planner/store/selectors';
import { Alert } from '@app/core/models/alert';
import { Observable } from 'rxjs';
import { DismissAlert } from '../store/actions/ui.actions';

@Component({
  selector: 'cse-alert-container',
  templateUrl: './alert-container.component.html',
  styleUrls: ['./alert-container.component.scss'],
})
export class AlertContainerComponent {
  public alerts$: Observable<Alert[]>;

  constructor(private store: Store<GlobalState>) {
    this.alerts$ = store.pipe(select(selectors.getAlerts));
  }

  public dismissAlert(key: string, callback?: () => void) {
    this.store.dispatch(new DismissAlert({ key }));
    if (typeof callback === 'function') {
      callback();
    }
  }
}