I am using the library of angular material and I have decided to use the Component of Snackbar a>.
One of the Snackbar parameters is the message parameter. My intention is to pass within the message instead of a string the following HTML code:
<p>Obrigado por ser inscrever</p><br><a href=“” class=“link”>Clique aqui</a> para logar.
How could I inject this HTML into the parameter message , where it accepts only one string (without class and HTML tags)?
Instead of using the open method you should use the openFromComponent method that allows you to customize the content of Snackbar .
Create a component and a template, here is a small example:
File 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();
}
}
Archive 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>
In the app.module.ts file you should import the SnackbarCommentComponent component
import {AppComponent, SnackbarMensagemComponent} from './app.component';
Continuing the app.module.ts file, you should declare the same as in the example below:
@NgModule({
imports: [
...
],
entryComponents: [ SnackbarMensagemComponent ],
declarations: [AppComponent, SnackbarMensagemComponent],
...
})
File app.component.html
<p>
<button mat-button (click)="openSnackBarMensagem()">Exibir mensagem</button>
</p>
You can see it working at stackblitz.io