To add line break in snack bar Angular 4

Question

I want to add multiline text message with proper line breaks that are provided by me.

  this.sampleStringErrorMsg = 'The sample is not valid:\n' +
            '- The key and key value are required in the sample.\n ' +
            '- The delimiter must be entered when the sample contains several key-value pairs.\n' +
            '- The delimiter must not be equal to the key or key value.\n';

sampleStringErrorMsg is the text I show in snackbar. Right now snackbar ommit \n from the text and aligns the the whole message as shown in the image below

Answer 1

I just added white-space: pre-wrap

// ts

const msg: string = `Registration successful. \n Please, confirm your email`;   
this._snackBar.open(msg, '', {
    duration: 8000,
    panelClass: ['success-snackbar']
});

//css

.success-snackbar {
  background: #1fcd98;
  white-space: pre-wrap
}