How to add Icon inside the Angular material Snackbar in Angular 5

后端 未结 5 2014
情书的邮戳
情书的邮戳 2021-02-15 01:34

I am new to angular and I am using Angular Material Design for UI.

In my application I have a snackbar .

Now I want to set an Icon inside the snackbar but I trie

5条回答
  •  深忆病人
    2021-02-15 02:10

    some extra code in Sivuyile TG Magutywa make it complete:

    in Snackbar HTML:

    {{data.message}}

    in SnackBar TS file:

    export class SnackbarComponent implements OnInit {
    
      constructor(@Inject(MAT_SNACK_BAR_DATA) public data: any) {
        console.log(data);
      }
    
      ngOnInit() {}
    
      get getIcon() {
        switch (this.data.snackType) {
          case 'success':
            return {type: this.data.snackType, icon: 'check'};
          case 'error':
            return {type: this.data.snackType, icon: 'faults'};
          case 'warn':
            return {type: this.data.snackType, icon: 'warning_outline'};
          case 'info':
            return {type: this.data.snackType, icon: 'info'};
        }
      }
    
      closeSnackbar() {
        this.data.snackBar.dismiss();
      }
    
    }
    

    in snackbar service:

    export class SnackBarService {
      messageText: string [];
      constructor(
        public snackBar: MatSnackBar,
      ) {
      }
    public openSnackBar(message, type, duration?, verticalPosition?, horizontalPosition?) {
        const _snackType = type !== undefined ? type : 'success';
        this.snackBar.openFromComponent(SnackbarComponent, {
          duration: duration || 4000,
          horizontalPosition: horizontalPosition || 'end',
          verticalPosition: verticalPosition || 'top',
          data: { message: message, snackType: _snackType, snackBar: this.snackBar }
        });
      }
    
    }
    

    usage in other component:

    constructor(private snackBar: SnackBarService) {}
    testSanck() {
       this.snackBar.openSnackBar('User Not Found', 'error');
    }
    

提交回复
热议问题