Showing multiple lines in alert (Angular 8)

Question

I want to show an alert when the user selects the checkbox.We have created alert service as a shared component.Because every module is using that.

My code is like:

     if(this.checkboxvalue)
      {
        this.alertservice.error('Hello again! This is how we add line breaks to an alert box!')
      }

I want to show the alert like

Hello again! This is how we add
line breaks to an alert box!

But it displays in a single line.

I tried \n, \\n ,<br\>

But nothing seems to work.

Can anyone help me with this?

Thanks in advance :)

according to that tryit it works with '\n'. Would you please add the code of this.alertservice.error(...)? — WorksLikeACharm, Feb 06 '20 at 13:56
https://www.w3schools.com/js/tryit.asp?filename=tryjs_alert2 — WorksLikeACharm, Feb 06 '20 at 13:56
@WorksLikeACharm I show it in a .ts file.I will add the code of alertservice.error. It is not like a browser alert.This alertservice is the one which is custom alert — codebuff, Feb 06 '20 at 13:58
I see the error-function now, but how do you consume the subject.next?/how do you show the alert? — WorksLikeACharm, Feb 06 '20 at 14:02
Actually the above code is written as a service.I am using observable in this service and subscriber at another component — codebuff, Feb 06 '20 at 14:13
If your `alertservice` is injecting the string as HTML, you need a line break tag, which is `
` (or `
`), not `
` as you indicate in what you tried. That backslash before the `>` would render the tag ineffective. If the `alertservice` is injecting it as text, you could try `\r\n`. — MikeJ, Feb 07 '20 at 05:50

score 0 · Answer 1 · answered Feb 06 '20 at 14:06

0

User preformatted strings:

const msg = `
aaa
bbb
`;
alert(msg);

answered Feb 06 '20 at 14:06

Paste it in the console and try it. – Roberto Zvjerković Feb 06 '20 at 14:16
console doesn´t sanitize whereas angular does sanitize interpolations like {myError} in it´s template. – WorksLikeACharm Feb 06 '20 at 14:21

score 0 · Answer 2 · answered Feb 06 '20 at 14:11

0

What you need is <br/> and not <br\>:

message = "Hello again! This is how we add<br/>line breaks to an alert box!"

It worked for me. Please let me know if you need a stackblitz.

answered Feb 06 '20 at 14:11

Meziane

It worked for me. What we need is your real code-snippet. – Meziane Feb 06 '20 at 14:16
You are certainly using a function, that transforms the message/string before showing it. – Meziane Feb 06 '20 at 14:22
1

le me check @Meziane – codebuff Feb 06 '20 at 14:24
Hi [ramya](https://stackoverflow.com/users/12779248/ramya); have you solved your problem? – Meziane Feb 10 '20 at 09:08
Meziane... Thank you for your concern. I have solved it – codebuff Feb 10 '20 at 09:14
It wiill be nice if you give us a feedback what was the problem. – Meziane Feb 10 '20 at 09:19
1

I have solved it by adding innerHTML to the particular div.It works – codebuff Feb 10 '20 at 09:58
As you state @codebuff, this is how it should be solved : https://stackoverflow.com/a/52220706/2459449 – Omar May 14 '20 at 13:53

score 0 · Answer 3 · answered Feb 06 '20 at 14:18

0

It seems that you try to output your error like this in your template:

{myError}

But angular sanitizes the text of myError in {myError} for security reasons. Read more here: https://angular.io/guide/security#sanitization-and-security-contexts

answered Feb 06 '20 at 14:18

WorksLikeACharm

3 Answers3