CODEWITHSUNDEEP
htmlcssangularline
F11
F11

Reputation: 3806

New Line in SPAN

I am returning below sample value from API and binding it in span element.What I am trying to achieve is to Keep every Unit in separate new line/

"Unit1-Employee1 , Unit2- Employee 2, Unit3- Employee 3,Employee 4"

I have tried to append \n before every Unit in API and bind it to span but it is not starting in new line.

Upvotes: 0

Views: 2041

Answers (3)

Akhil Chandran
Akhil Chandran

Reputation: 1

I'm assuming you will be storing each elements in an array. Now, iterate through the array as follows.

<span *ngFor="let item of items" style="display:block">
 {{item}}
</span>

Or, Simply put it inside div 

<div *ngFor="let item of items">
  {{item}}
</div>

Upvotes: 0

Pushprajsinh Chudasama
Pushprajsinh Chudasama

Reputation: 7949

Try this code.

const string = "Unit1-Employee1 , Unit2- Employee 2, Unit3- Employee 3,Employee 4";
const array = string.split(",");

In HTML:

<span *ngFor="let data of array">
  {{data}} <br>
</span>

Demo Link:https://stackblitz.com/edit/angular-5ylntb

Upvotes: 2

Himanshu Singh
Himanshu Singh

Reputation: 2165

Push these units in an array and iterate over these items and display each item in span and put a <br> after each <span>. Like shown below:

<span *ngFor="let item of arr">
  {{item}} <br>
</span>

Working Demo : link

Upvotes: 1

Related Questions