angular binding string into separate lines into html

Question

I have an angular controller text file such as in the JSN

 topics: 'ab, bc, cd'

is being read into a td field .

However, it is a long string, but I am trying to cut the string and print each word into its own separate line. I tried creating a function which would cut the string and replace "," with a carriage return, but it still prints it into a single line. I tried also inserting \\n or
directly within the string but it does not work either.

<td style=" background-color: green">{{data.topics}}</td>

The data is work data so I cannot post it but basically this is the gist of the idea. So basically I would like to get into the cell

'ab'
'bc'
'cd'

as opposed to the entire string on one single line of the cell in that table.

Answer 1

As long as topic is a property, why not do.

class SomeComponent implements OnInit{
    topics: Array<string>;
    constructor(service: MyService) {}
    ngOnInit() {
        //not sure how your getting data
        this.service.getData().subscribe(data => {
            this.topics = data.topics.split(',');
        });
    }
}

topics should now be an array. Then you can do ng-repeat.

<td style="background-color: green" *ngFor="topic of topics">{{topic}}</td>