¿Cómo crear un servicio de SnackBar?

MatSnackBar es una directiva angular que se usa para mostrar una barra de notificaciones específicamente en los dispositivos móviles.
Estos tipos de componentes de interfaz de usuario generalmente se usan varias veces.
Entonces, para evitar la repetición de código, simplemente se puede crear un servicio para usar SnackBar en diferentes componentes.

Acercarse:

Para crear un servicio tienes que usar el siguiente comando:

ng g s snackBar

Ahora importe MatSnackBar desde @angular/core y defina la función openSnackBar (siempre puede usar un nombre diferente).

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

Importe snackBarService e inyéctelo dentro del constructor del componente, en el que desea usar Snackbar. Esto creará una instancia del servicio, digamos snackBService .
Ahora llame a la función openSnackBar donde sea necesario, con la ayuda de 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);
  }
  
}

Repitiendo estos pasos podemos usar el snackBar dentro de cualquier componente.
Ejemplo:

<button  (click)="trigger('This is a ', 'SnackBar')">
    SnackBarButton
</button>

Producción:

Publicación traducida automáticamente

Artículo escrito por vaibhav19verma y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta Cancelar la respuesta