CODEWITHSUNDEEP
javascriptangulardom
luifon
luifon

Reputation: 198

Is it possible to create a breakline in HTML via JS string?

export class MessageComponent implements OnInit {

  list: Foo[] = [{name: 'Name 1', groupName: 'Group 1'}, {name: 'Name 1', groupName: 'Group 1'}]
  message = '';

  constructor() { }

  ngOnInit() {
    this.message = this.confirmRemoval(this.list);
  }

  confirmRemoval(messageList: Foo[]): string {
  return `The following products already belong to a group and will be removed from it: ${messageList.map(v => 
  `- ${v.name} belongs to the group ${v.groupName}`).join("<br/>\n")}. Do you wish to continue?`;
  }
}

export interface Foo {
  name?: string;
  groupName?: string;
}
<h3>This is what it looks like: 
</h3>
<p>{{message}}</p>

<h3>What I wanted was to see if I could make the message have breaklines where the join is.

I have an arrow function that creates a string.

That string I pass as a message to a component that creates an alert.

Said component displays the message to the user.

So this is my arrow function:

export const confirmRemoval = (list: PersonalizedType[]): string =>
  'The following products already belong to a group and will be removed from it: ${list
    .map(v => `- ${v.name} belongs to the group ${v.groupName}`)
    .join(',')}. Do you wish to continue?';

How do I go about making the join statement create a new line in HTML? Is it possible to use only literal JS to do this or would I need to do something else?

Right now it serves the purpose it's needed by creating a comma between each message, but I kinda wish it would create a new line for a better user experience.

Not sure if it's relevant but I'm working with Angular 2+ on this project.

Thanks in advance and sorry for the formatting, I'm new to asking questions here.

Edit: Forgot to mention this but I've tried using '\n' and 'HTML breakline tag' in the join method but it didn't work.

Link from a working stackblitz with an example:

https://stackblitz.com/edit/angular-hkyki9?file=src%2Fapp%2Fapp.module.ts

Upvotes: 0

Views: 129

Answers (2)

iY1NQ
iY1NQ

Reputation: 2514

Angular is escaping the <br> tag for security reasons. You can explicitly bypass this by using the following binding:

<p [innerHTML]="message"></p>

See this question: How to render string with html tags in Angular 4+?

A better approach is to use templates without the need to manually generate new html tags:

<ng-template #fooitem let-foo>
  - {{foo.name}} belongs to the group {{foo.groupName}}
</ng-template>

<ng-template #alert let-message>
  <p>{{message.header}}</p>
  <p *ngFor="let foo of message.foo">
    <ng-container [ngTemplateOutlet]="fooitem" [ngTemplateOutletContext]="{ $implicit: foo }"></ng-container>
  </p>
  <p>{{message.footer}}</p>
</ng-template>

<ng-container [ngTemplateOutlet]="alert" [ngTemplateOutletContext]="{ $implicit: message }"></ng-container>

https://stackblitz.com/edit/angular-b3zftr

... or even better break up the templates in new sub-components.

Upvotes: 1

whmkr
whmkr

Reputation: 3085

Try joining on a br tag instead of a comma like this:

.join("<br>")

Upvotes: 0

Related Questions