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 tried some Stackoverflow post I can't set it .

code:

this.snackBar.open('You are already registered.Please log in.','', { duration: 2000 });

I want to set the icon as in the image but I have the below snackbar without icon .I don't know how to add this .

can anyone help me to add this.

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

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.