docs(snack-bar): make custom component example more user-friendly (#15116)

Adds the ability to control the duration of the snack bar in the custom snack bar demo. Also bumps the default duration so people have more time to read it.

Fixes #15043.

src/material-examples/snack-bar-component/snack-bar-component-example.html

@@ -1,3 +1,8 @@
+<mat-form-field>
+  <mat-label>Snack bar duration (seconds)</mat-label>
+  <input type="number" [(ngModel)]="durationInSeconds" matInput>
+</mat-form-field>
+
 <button mat-button (click)="openSnackBar()" aria-label="Show an example snack-bar">
   Pizza party
 </button>

src/material-examples/snack-bar-component/snack-bar-component-example.ts

@@ -10,11 +10,13 @@ import {MatSnackBar} from '@angular/material';
   styleUrls: ['snack-bar-component-example.css'],
 })
 export class SnackBarComponentExample {
+  durationInSeconds = 5;
+
   constructor(private snackBar: MatSnackBar) {}
 
   openSnackBar() {
     this.snackBar.openFromComponent(PizzaPartyComponent, {
-      duration: 500,
+      duration: this.durationInSeconds * 1000,
     });
   }
 }