angular2-toaster custom classes

Question

We are using angular2-toaster in our project and I have faced the problem that I can't add a custom class to toaster instance.

My toaster config looks nex way, and I want to pass customClass array with custom classes for toaster inside.

showToaster(msg: string, customClass: string | string[]) {
   const toast: Toast = {
     type: customClass[0],
     body: msg
   };

   this.toasterService.pop(toast);
}

Answer 1

You can use ToasterConfig and then bind it to your toaster-container.

@Component({
  selector: 'my-app',
  template: `
    <div>
      <toaster-container [toasterconfig]="config"></toaster-container>
      <button (click)="popToast()">pop toast</button><br/>
    </div>
  `,
})
export class App {

  public config : ToasterConfig = new ToasterConfig({
    typeClasses: {
      class1: 'custom-class-1',
      class2: 'custom-class-2',
      class3: 'custom-class-3'
      /* goes on */
    }
  });

   /*
   other stuff of component 
   */
}

Then you can use it as you posted:

showToaster(msg: string, customClass: string | string[]) {
   const toast: Toast = {
     type: customClass[0], // class1 or class2 or class3 or etc
     body: msg
   };

   this.toasterService.pop(toast);
}

References:

https://github.com/Stabzs/Angular2-Toaster/issues/110

https://github.com/Stabzs/Angular2-Toaster/blob/master/src/toaster-config.ts

http://plnkr.co/edit/gZTxVXD8lN3fibqhDYod?p=preview