I have three variables that are strings. However they sit one on top of the other with no spacing. Is there any way to add what would be equivalent to a
in the ts file and not the template. Or am I able to add multiple values to my angular component input and somehow break it up there? I am not certain on how to achieve this. Any guidance would be greatly appreciated.

.ts file

this.myContent= this.content.paragraph1   this.content.paragraph2   this.content.paragraph3;

.html file

            <my-component [myContent]="myContent"></my-component>

CodePudding user response：

I would suggest the following approach:

• Make this.myContent an array, and put this.content.paragraph1, this.content.paragraph2 and so on in it.
• Put an *ngIf on <my-component>, and only display it if the content array has elements in it.
• Put a <p *ngFor="..."> element within <my-component>, and iterate through the content array.

This will display the paragraphs, and will break them up.

CodePudding user response：

maybe you can use inline template literal. So you could assign this.myContent like this

this.myContent = `${this.content.p1}\n${this.content.p2}\n${this.content.p3}`