feat(snackbar-demo): Added ngModel binding for Snackbar demo; change snackbar properties dynamically

Author: trimox

src/demo-app/app/components/snackbar-demo/snackbar-demo.component.html

@@ -43,11 +43,26 @@ <h1 mdc-typography-headline>Methods</h1>
     </div>
   </div>
   <h1 mdc-typography-headline>Examples</h1>
-  <div class="mdc-padding">
-    <button mdc-button [primary]="true" [raised]="true" (click)="showSimple();">Simple</button>
-    <button mdc-button [primary]="true" [raised]="true" (click)="showActionButton();">Show Action</button>
-    <button mdc-button [primary]="true" [raised]="true" (click)="showMultiline();">Show Multiline</button>
-    <button mdc-button [primary]="true" [raised]="true" (click)="showMultilineBottom();">Show Multiline - Bottom</button>
+  <div fxLayout="column" class="mdc-padding">
+    <mdc-form-field>
+      <mdc-checkbox [(ngModel)]="isActionOnBottom"></mdc-checkbox>
+      <label mdc-checkbox-label>Action on Bottom</label>
+    </mdc-form-field>
+    <mdc-form-field>
+      <mdc-checkbox [(ngModel)]="isMultiline"></mdc-checkbox>
+      <label mdc-checkbox-label>Multiline</label>
+    </mdc-form-field>
+    <mdc-form-field>
+      <mdc-checkbox [(ngModel)]="isDismissOnAction"></mdc-checkbox>
+      <label mdc-checkbox-label>Dismiss on Action</label>
+    </mdc-form-field>
+  </div>
+  <div fxLayout="column" fxFlexOffset="1">
+    <mdc-textfield [(ngModel)]="messageText" label="Message text" [required]="true"></mdc-textfield>
+    <mdc-textfield [(ngModel)]="actionText" label="Action button text"></mdc-textfield>
+  </div>
+  <div class="mdc-padding" fxFlexOffset="2">
+    <button mdc-button [primary]="true" [raised]="true" (click)="show();">Show</button>
   </div>
 </div>
 <mdc-snackbar #snack></mdc-snackbar>

src/demo-app/app/components/snackbar-demo/snackbar-demo.component.ts

@@ -9,6 +9,11 @@ import {
   templateUrl: './snackbar-demo.component.html'
 })
 export class SnackbarDemoComponent implements OnInit {
+  isActionOnBottom: boolean;
+  isMultiline: boolean;
+  isDismissOnAction: boolean = true;
+  messageText: string = "Sample text";
+  actionText: string = "Ok";
   @ViewChild('snack') snack;
 
   ngOnInit() {
@@ -21,37 +26,14 @@ export class SnackbarDemoComponent implements OnInit {
     doc.appendChild(script);
   }
 
-  showSimple() {
-    var data = {
-      message: 'Notification received',
-    }
-    this.snack.show(data);
-  }
-  showActionButton() {
-    var data = {
-      message: 'Notification received',
-      actionText: 'Ok',
-      actionHandler: () => { console.log('Action button pressed!') }
-    }
-    this.snack.show(data);
-  }
-  showMultiline() {
-    var data = {
-      message: 'Notification received',
-      actionText: 'Ok',
-      multiline: true,
-      actionHandler: () => { console.log('Action button pressed!') }
-    }
-    this.snack.show(data);
-  }
-  showMultilineBottom() {
-    var data = {
-      message: 'Notification received',
-      actionText: 'Ok',
-      multiline: true,
-      actionOnBottom: true,
-      actionHandler: () => { console.log('Action button pressed!') }
-    }
-    this.snack.show(data);
+  show() {
+    this.snack.show({
+      multiline: this.isMultiline,
+      actionOnBottom: this.isActionOnBottom,
+      dismissOnAction: this.isDismissOnAction,
+      message: this.messageText ? this.messageText : 'Sample text',
+      actionText: this.actionText,
+      actionHandler: this.actionText ? () => { console.log('Action button pressed!') } : null
+    });
   }
 }