snackBar não está quebrando linha

Front-end
#1

Como colocar quebra de linha

Retorna correto do servidor

image
image.png921×286 10.8 KB

Mostra sem quebra de linha

image
image.png1916×823 130 KB

Testei assim no código:

private ajustarMensagens(mensagens: MensagemModel[]) {
    let mensagemRetorno: string = '';
    mensagens.forEach(m => {
      mensagemRetorno = mensagemRetorno + m.texto + "/n";
    });
    return mensagemRetorno;
  }

No css

.mat-snack-bar-container-error {
    text-align: center !important;
    color: white !important;
    background-color: brown !important;
    .mat-simple-snackbar-action {
        color: white !important;
    };
    white-space: pre-line !important;
}

Alguma ideia ?

Utilizo o public snackBar, https://material.angular.io/components/snack-bar/overview

#2

Já tentou usar <br>?

#3

Sim.

Esqueci de colocar

#4

Se fizer igual ao exemplo da documentação, vai funcionar se alterar o texto pra Pizza <br>party!!!.

1 curtida
#5

@javaflex valeu.

Antes estava assim:

import { Component } from '@angular/core';
import { MatSnackBar } from '@angular/material/snack-bar';

@Component({
  selector: 'app-snack-bar',
  templateUrl: './snack-bar.component.html',
  styleUrls: ['./snack-bar.component.scss']
})
export class SnackBarComponent {
  timeOut = 1500;
  constructor(public snackBar: MatSnackBar) { }
 
  openSnackBar(
    message: string,
    className?: string,
    action?: string,
    verticalPosition?: any,
    horizontalPosition?: any
  ) {
    className = className !== null || className !== undefined ? 'mat-snack-bar-container-' + className : className;
    verticalPosition =
      verticalPosition === null || verticalPosition === undefined
        ? 'bottom'
        : verticalPosition;
    horizontalPosition =
      horizontalPosition === null || horizontalPosition === undefined
        ? 'center'
        : horizontalPosition;
    this.snackBar.open(message, action, {
      duration: this.timeOut,
      verticalPosition: verticalPosition,
      horizontalPosition: horizontalPosition,
      panelClass: [className],
    });
  }
}

Alterei para:

Funcionou. Mas não conseguir passar as mensagens que vem do backend para o componente.
Fiz assim:

import { Component } from ‘@angular/core’;
import { MatSnackBar } from ‘@angular/material/snack-bar’;

@Component({
  selector: 'app-snack-bar',
  templateUrl: './snack-bar.component.html',
  styleUrls: ['./snack-bar.component.scss']
})

export class SnackBarComponent {
  timeOut = 1500;

  constructor(public snackBar: MatSnackBar) { }

  openSnackBar(
    message: string,
    className?: string,
    action?: string,
    verticalPosition?: any,
    horizontalPosition?: any
  ) {
    className = className !== null || className !== undefined ? 'mat-snack-bar-container-' + className : className;
    verticalPosition =
      verticalPosition === null || verticalPosition === undefined
        ? 'bottom'
        : verticalPosition;
    horizontalPosition =
      horizontalPosition === null || horizontalPosition === undefined
        ? 'center'
        : horizontalPosition;
   this.snackBar.openFromComponent(snackBarPartyComponent, {
    duration: this.timeOut,
    verticalPosition: verticalPosition,
    horizontalPosition: horizontalPosition,
    panelClass: [className]
   });
  }
}

@Component({
  selector: 'snack-bar-party-component',
  templateUrl: 'snack-bar-party-component.html',
})
export class snackBarPartyComponent {}

snack-bar-party-component.html

<span>
  {{announcementMessage}}
</span>

A variável message tem que chegar no snack-bar-party-component.html

Sei que tem como fazer com service, mas não queria assim. Tem outra maneira ?

#6

Cria uma variavel nesse component e atribui nele o que retornar do service.