NGXS toast messages with angular 6

message.model.ts

export class Message {

    content: string;
    style: string;
    date: number;

    constructor(content, style) {
        this.content = content;
        this.style = style || 'info';
        this.date = new Date().getTime();
    }
}

shared.actions.ts

import { Message } from './message.model';

// send message
export class SendMessage {
    static readonly type = '[message] send message';
    constructor(public message: Message) {}
}

// dismiss message
export class DismissMessage {
    static readonly type = '[message] dismiss message';
    constructor(public index: number) {}
}

shared.state.ts

import { NgxsOnInit, State, StateContext, Selector, Action } from '@ngxs/store';
import { Message } from './message.model';
import {SendMessage, DismissMessage} from './shared.actions';


export interface SharedStateModule {
    messages: Message[];
}

@State<SharedStateModule>({
    name: 'shared',
    defaults: {
        messages: []
    },
})

export class SharedState implements NgxsOnInit {

    constructor() {}

    @Selector()
    static selMessages(state: SharedStateModule) {
        const newMsgOrder = state.messages;
        return newMsgOrder.sort((a, b) => b.date - a.date);
    }

    // load on store init
    ngxsOnInit(ctx: StateContext<SharedStateModule>) {
        ctx.dispatch(
            [  ]
        );
    }

    // send message
    @Action(SendMessage)
    sendMessage(ctx: StateContext<SharedStateModule>, action: SendMessage) {
        const state = ctx.getState();
        ctx.patchState({
           messages: [
            ...state.messages,
            action.message
           ]
        });
    }

    @Action(DismissMessage)
    dismissMessage(ctx: StateContext<SharedStateModule>, action: DismissMessage) {
        const state = ctx.getState();
        state.messages.splice(action.index, 1);
        ctx.patchState({
            messages: state.messages
        });
    }

}

toast-message.component.html

<div class='wrapper'>
  <aside *ngFor="let message of messages$ | async; let i = index">
    <div class="alert alert-dismissible fade show" role="alert"
    [ngClass]="{
      'alert-primary': message.style === 'prime',
      'alert-warning': message.style === 'warn',
      'alert-danger': message.style === 'danger'
      }"
    >
      <strong>Alert!</strong>  {{message.content}}
      <button type="button" class="close" 
          data-dismiss="alert" aria-label="Close"
          (click)='onDismiss(i)'>
        <span aria-hidden="true">&times;</span>
      </button>
    </div>
</aside>
<button (click)="addMessage()">add message</button>
</div>

toast-message.component.ts

import { Component, OnInit } from '@angular/core';
import { Store, Select } from '@ngxs/store';
import {SharedState} from '../shared.state';
import { SendMessage, DismissMessage } from '../shared.actions';
import { Message } from '../message.model';

@Component({
  selector: 'app-toast-message',
  templateUrl: './toast-message.component.html',
  styleUrls: ['./toast-message.component.css']
})
export class ToastMessageComponent implements OnInit {

  constructor(private store: Store) { }

  @Select(SharedState.selMessages)
  messages$: any;

  ngOnInit() {
  }

  addMessage() {
    this.store.dispatch(new SendMessage(new Message('test 1', 'danger')));
    this.store.dispatch(new SendMessage(new Message('test 2', 'warn')));
    this.store.dispatch(new SendMessage(new Message('test 3', 'danger')));
  }

  onDismiss(index: number) {
     this.store.dispatch(new DismissMessage(index));
  }
}