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

Question

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

Answer 1

This how I did it

1. Create a component
2. Create a Service for the snackBar
3. add the component to a module. import it in declarations and entryComponents
4. Use the service

example

my-snackbar.component.ts

 import { Component, OnInit, Inject } from '@angular/core';
 import { MAT_SNACK_BAR_DATA } from '@angular/material/snack-bar';

    @Component({
      selector: 'my-snackbar',
      templateUrl: './snackbar.component.html',
      styleUrls: ['./snackbar.component.scss']
    })
    export class MySnackbarComponent implements OnInit {
      constructor(@Inject(MAT_SNACK_BAR_DATA) public data: any) {
        console.log(data); 
      }

      ngOnInit() {}

      get getIcon() {
        switch (this.data.snackType) {
          case 'Success':
            return 'done';
          case 'Error':
            return 'error';
          case 'Warn':
            return 'warning';
          case 'Info':
            return 'info';
        }
      }
    }

.........

my-snackbar.component.html

<div fxLayout="row" class="snack-container">
  <div>
    <mat-icon>{{getIcon}}</mat-icon>
  </div>
  <div>
    <span>{{data.message}}</span>
  </div>
</div>

.........

my-snack-bar.service.ts

import { Injectable } from '@angular/core';
import { MatSnackBar } from '@angular/material/snack-bar';
import { MySnackbarComponent } from '../components/snackbar/my-snackbar.component';

@Injectable({
  providedIn: 'root'
})
export class MySnackBarService {
  constructor(private snackBar: MatSnackBar) {}
  public openSnackBar(message: string, action: string, snackType?: snackType) {
    const _snackType: snackType =
      snackType !== undefined ? snackType : 'Success';

    this.snackBar.openFromComponent(SnackbarComponent, {
      duration: 2000,
      horizontalPosition: 'end',
      verticalPosition: 'top',
      data: { message: message, snackType: _snackType }
    });
  }
}

........

app.module.ts

@NgModule({
  declarations: [
    SnackbarComponent
  ],
  imports: [
...
  ],
  providers: [],
  bootstrap: [AppComponent],
  entryComponents: [
    SnackbarComponent
  ]
})
export class AppModule {}

.......

other.component.ts

import { Component, OnInit } from '@angular/core';
import { MySnackBarService } from '../../services/my-snack-bar.service';

@Component({
...
})
export class SomeComponent implements OnInit {

  constructor(
    private snack: MySnackService
  ) {}

  ngOnInit() {
  }


  openSnack() {
    this.snack.openSnackBar('Testing snack', '', 'Success');
  }
}

Answer 2

Try openFromComponent or openFromTemplate methods of the MatSnackBar Service instead of plain open.

Answer 3

some extra code in Sivuyile TG Magutywa make it complete:

in Snackbar HTML:

<div class="snack-container box-{{getIcon.type}}">
  <div class="snack-container-message">
    <div>
      <i class="fas {{getIcon.icon}}"></i>
    </div>
    <div>
      <span>{{data.message}}</span>
    </div>
  </div>
  <div class="snack-container-icon">
    <i class="fas close" (click)="closeSnackbar()"></i>
  </div>
</div>

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');
}

Answer 4

For anyone else still looking for this answer, there is a much easier way to do this without creating new components or changing how you call your snackbar.

You can add a class to the material snackbar like this:

this.snackBar.open(message, "Dismiss", {
    panelClass:'error-alert-snackbar'
});

Then in your css, add your class. You might add some colors like this:

.error-alert-snackbar{
    color: white!important;
    background-color:red !important;
   .mat-simple-snackbar-action {
       color:white !important;
   }
}

Next you can use "yourclass:after" to add an icon to that class:

.error-alert-snackbar:after{      
    font-family: "FontAwesome";
    content: "\f071";
}

Where the "content" above is the Unicode version of the font awesome icon name you would normally call. You can always find it on the icon's Font Awesome page under the picture of the icon where if shows you how to call it. In this case its fa-exclamation-triangle. You would normally call it like this

<i class="fa fa-exclamation-triangle" ></i>

But since you dont have access to the material snackbar html you can add the icon directly to your css class as i have shown and then attach that css class to the snackbar on open as shown

EDIT: I don't know if this is new functionality for the snackbar created after Angular 5 or if it existed at the time of this question.

Answer 5

The open method of the MatSnackBar lets you only open snack bars with text, that is to say simple snack bars. If you want to have a more sophisticated snack bar - such as one with an icon added -, you will have to create a distinct component and open that very component with the openFromComponent method.