Issue
I currently have a snackbar
element with a mat-progress-bar
inside it. I'd like to close the snackbar
element. My code currently looks like this.
import { MAT_SNACK_BAR_DATA, MatSnackBar } from '@angular/material';
import { map } from 'rxjs/operators';
@Component({
selector: 'app-upload-progress-snackbar',
template: `
Progress:
<mat-progress-bar mode="determinate" [value]="progress | async" *ngIf="progress !== undefined"></mat-progress-bar>`,
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 }) => {
if (loaded === undefined) {
return !this.started ? 0 : 100;
} else {
this.started = true;
return Math.round(loaded / (total || loaded) * 100);
}
},
));
}
Solution
You can do the following to achieve this.
This snack-bar
is like a mat-dialog
.. you have to call the dismiss()
on a MatSnackBarRef
DI renderer
and MatSnackBarRef
... you don't need renderer if you are going to dismiss some other way, this is just for demonstration purposes.
@Inject(MAT_SNACK_BAR_DATA) public data,
private _snackRef: MatSnackBarRef<UploadProgressComponent>,
private ren:Renderer2
If you wanted to dismiss on progress bar completing you could call dismiss()
in that logic. I am going to dismiss on click.
Create click event listener in your constructor
...
{
setTimeout(()=>{
let snackEl = document.getElementsByClassName('mat-snack-bar-container').item(0);
ren.listen(snackEl, 'click', ()=>this.dismiss())
})
create your dismiss()
dismiss(){
this._snackRef.dismiss();
}
Stackblitz
https://stackblitz.com/edit/angular-mdyher?embed=1&file=app/snack-bar-component-example.ts
Answered By - Marshal
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.