Em vez de usar o método open
você deve utilizar o método openFromComponent
que permite você personalizar o conteúdo do Snackbar.
Crie um componente e um template, segue um pequeno exemplo:
Arquivo app.component.ts
import { Component } from '@angular/core';
import { MatSnackBar, MatSnackBarRef } from '@angular/material';
@Component({
selector: 'material-app',
templateUrl: 'app.component.html'
})
export class AppComponent {
constructor(public snackBar: MatSnackBar) {}
/** Método para abrir o Snackbar. */
openSnackBarMensagem(){
this.snackBar.openFromComponent(SnackbarMensagemComponent);
}
}
/** Componente SnackbarMensagem. */
@Component({
selector: 'snackbar-mensagem',
templateUrl: 'snackbar.mensagem.html'
})
export class SnackbarMensagemComponent {
constructor(public snackBarRef: MatSnackBarRef<SnackbarMensagemComponent>) { }
// Método para fechar
closeSnackBarMensagem(){
this.snackBarRef.dismiss();
}
}
Arquivo snackbar.mensagem.html
<p>Obrigado por ser inscrever</p><a href="" class="link">Clique aqui</a> para logar.
<button mat-button (click)="closeSnackBarMensagem()">Fechar</button>
No arquivo app.module.ts você deve importar o componente SnackbarMensagemComponent
import {AppComponent, SnackbarMensagemComponent} from './app.component';
Continuando no arquivo app.module.ts, você deve declarar o mesmo como no exemplo abaixo:
@NgModule({
imports: [
...
],
entryComponents: [ SnackbarMensagemComponent ],
declarations: [AppComponent, SnackbarMensagemComponent],
...
})
Arquivo app.component.html
<p>
<button mat-button (click)="openSnackBarMensagem()">Exibir mensagem</button>
</p>
Você pode ver funcionando no stackblitz.io
Referência