title: How to dismiss/close an Angular Snackbar element from inside element
body: <p>I currently have a <code>snackbar</code> element with a <code>mat-progress-bar</code> inside it. I'd like to close the <code>snackbar</code> element. My code currently looks like this.</p>
  <pre class="lang-js prettyprint-override"><code>import { MAT_SNACK_BAR_DATA, MatSnackBar } from '@angular/material';
  import { map } from 'rxjs/operators';
  
   @Component({
    selector: 'app-upload-progress-snackbar',
    template: `
    Progress:
    &lt;mat-progress-bar mode=&quot;determinate&quot; [value]=&quot;progress | async&quot; *ngIf=&quot;progress !== undefined&quot;&gt;&lt;/mat-progress-bar&gt;`,
    styles: [`mat-progress-bar { margin-top: 5px;}`],
  })
  export class UploadProgressComponent {
    constructor(@Inject(MAT_SNACK_BAR_DATA) public data) { }
  
    private started = false;
    public progress = this.data.uploadProgress.pipe(
      map(({ loaded, total }) =&gt; {
        if (loaded === undefined) {
          return !this.started ? 0 : 100;
        } else {
          this.started = true;
          return Math.round(loaded / (total || loaded) * 100);
        }
      },
    ));
  }
  
  </code></pre>