Message no Component Snackbar - Angular 4 Material

Question

I’m using the library of angular material and decided to use the Component of Snackbar.

One of the parameters of Snackbar is the parameter message. My intention is to pass inside the message instead of a string the following code HTML:

<p>Obrigado por ser inscrever</p><br><a href=“” class=“link”>Clique aqui</a> para logar.

How could I inject this HTML in the parameter message, it accepts only one string (no class and HTML tags)?

Answer 1

Instead of using the method open you must use the method openFromComponent that allows you to customize the content of Snackbar.

Create a component and a template, follow a small example:

Filing cabinet app.componentts.

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

Filing cabinet snackbar.messagem.html

<p>Obrigado por ser inscrever</p><a href="" class="link">Clique aqui</a> para logar.
<button mat-button (click)="closeSnackBarMensagem()">Fechar</button>

In the archive app.modulets. you must import the component Snackbarmensagemcomponent

import {AppComponent, SnackbarMensagemComponent} from './app.component';

Continuing in the archive app.modulets., you should declare the same as in the example below:

@NgModule({
    imports: [
        ...
    ],
    entryComponents: [ SnackbarMensagemComponent ],
    declarations: [AppComponent, SnackbarMensagemComponent],
    ...
})

Filing cabinet app.component.html

<p>
    <button mat-button (click)="openSnackBarMensagem()">Exibir mensagem</button>
</p>

You can see running on stackblitz.io

Reference

• Snackbar