adrianfaciu

import { TestBed, async, ComponentFixture } from "@angular/core/testing";

import { Component } from "@angular/core";
import { By } from "@angular/platform-browser";

@Component({
  selector: "dh-app-div",
  template: `
    <span *ngFor="let item of foo | keyvalue">
      {{ item }}

adrianfaciu

const trace = x => (console.log(x), x)
const two = trace(2); //? 2

adrianfaciu

    selectStep(stepIndex: number) {
        const step = this._steps.toArray()[stepIndex];
        if (step) {
            step.select();
        }
    }

adrianfaciu

<ng-container *ngIf="data.text; else templateRef">
  {{ data.message }}
</ng-container>

<ng-template #templateRef>
  <ng-container *ngTemplateOutlet="data.template; context: data.templateContext">
  </ng-container>
</ng-template>

adrianfaciu

export class ToastData {
  type: ToastType;
  text?: string;
  template?: TemplateRef<any>;
  templateContext?: {};
}

adrianfaciu

  public static forRoot(config = defaultToastConfig): ModuleWithProviders {
      return {
          ngModule: ToastModule,
          providers: [
              {
                  provide: TOAST_CONFIG_TOKEN,
                  useValue: { ...defaultToastConfig, ...config },
              },
          ],
      };

adrianfaciu

export const defaultToastConfig: ToastConfig = {
    position: {
        top: 20,
        right: 20,
    },
    animation: {
        fadeOut: 2500,
        fadeIn: 300,
    },
};

adrianfaciu

export interface ToastConfig {
    position?: {
        top: number;
        right: number;
    };
    animation?: {
        fadeOut: number;
        fadeIn: number;
    };
}

adrianfaciu

    onFadeFinished(event: AnimationEvent) {
        const { toState } = event;
        const isFadeOut = (toState as ToastAnimationState) === 'closing';
        const itFinished = this.animationState === 'closing';

        if (isFadeOut && itFinished) {
            this.close();
        }
    }

adrianfaciu

<div class="toast"
     [@fadeAnimation]="{value: animationState, params:
        { fadeIn: 1000, fadeOut: 1000 }}">
  <mat-icon>{{ iconType }}</mat-icon>
  <div>{{ data.text }}</div>
  <mat-icon (click)="close()">close</mat-icon>
</div>