feat(toast): add ability to pass multiple classes to cssClass

references #7618

Author: brandyscarney

src/components/toast/test/basic/index.ts

@@ -47,7 +47,8 @@ class E2EPage {
   showLongToast() {
     const toast = this.toastCtrl.create({
       message: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea voluptatibus quibusdam eum nihil optio, ullam accusamus magni, nobis suscipit reprehenderit, sequi quam amet impedit. Accusamus dolorem voluptates laborum dolor obcaecati.',
-      duration: 5000
+      duration: 5000,
+      cssClass: 'custom-class my-toast'
     });
 
     toast.onDidDismiss(this.dismissHandler);

src/components/toast/toast-component.ts

@@ -35,7 +35,15 @@ import { ViewController } from '../nav/view-controller';
   },
 })
 export class ToastCmp implements AfterViewInit {
-  private d: any;
+  private d: {
+    message?: string;
+    cssClass?: string;
+    duration?: number;
+    showCloseButton?: boolean;
+    closeButtonText?: string;
+    dismissOnPageChange?: boolean;
+    position?: string;
+  };
   private descId: string;
   private dismissTimeout: number = undefined;
   private enabled: boolean;
@@ -53,7 +61,10 @@ export class ToastCmp implements AfterViewInit {
     this.d = params.data;
 
     if (this.d.cssClass) {
-      renderer.setElementClass(_elementRef.nativeElement, this.d.cssClass, true);
+      this.d.cssClass.split(' ').forEach(cssClass => {
+        // Make sure the class isn't whitespace, otherwise it throws exceptions
+        if (cssClass.trim() !== '') renderer.setElementClass(_elementRef.nativeElement, cssClass, true);
+      });
     }
 
     this.id = (++toastIds);