Approach:

• To create a service you have to use the following command:

  ng g s snackBar

• Now import MatSnackBar from @angular/core and define the function openSnackBar (you can always use a different name).

import { Injectable } from ‘@angular/core’;
import {MatSnackBar} from ‘@angular/material/snack-bar’;

@Injectable({
providedIn: ‘root’
})
export class SnackBarService {

//create an instance of MatSnackBar

constructor(private snackBar:MatSnackBar) { }

/* It takes three parameters
1.the message string
2.the action
3.the duration, alignment, etc. */

openSnackBar(message: string, action: string) {
this.snackBar.open(message, action, {
duration: 2000,
});
}
}

Import the snackBarService and inject it inside the constructor of the component, in which you want to use the Snackbar. This will create an instance of the service say snackBService.
Now call the openSnackBar function wherever it is required, with the help of snackBService.

import { Component, OnInit } from ‘@angular/core’;
import {SnackBarService} from ‘../snack.service’;

@Component({
selector: ‘app-profile’,
templateUrl: ‘./snackBar.html’,
styleUrls: [‘./snackBar.css’]
})
export class SnackBar {

// create an instance of SnackBarService

constructor(private snackBService:SnackBarService) { }

//defining method for display of SnackBar

trigger(message:string, action:string)
{
this.snackBService.openSnackBar(message, action);
}

}

By repeating these steps we can use the snackBar inside any component.
Example:

<button (click)=”trigger(‘This is a ‘, ‘SnackBar’)”>
SnackBarButton
</button>

Output: