1

Estou usando a biblioteca do angular material e resolvi utilizar o Component de Snackbar.

Um dos parâmetros do Snackbar é o parâmetro message. Minha intenção é passar dentro do message ao invés de uma string o seguinte código HTML:

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

Como poderia injetar esse HTML no parâmetro message, sendo que ele aceita apenas uma string (sem class e tags HTML)?

1 Resposta 1

0

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

3
  • muito obrigado pela resposta. O problema agora é com o fechar, eu não estou conseguindo reproduzir o label de fechar na snackbar. Consegue me orientar? O meu código está assim: 21/11/2017 às 14:31
  • this.snackBar.openFromComponent(SnackbarMessageComponent, { direction: 'ltr', extraClasses: ['show'], duration: 50000 } ); --- Como posso passar o label fechar para ser exibido na snackbar? 21/11/2017 às 14:32
  • @HitchLeonardo editei a resposta veja como ficou.
    – NoobSaibot
    22/11/2017 às 1:57

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .