CODEWITHSUNDEEP
jsonangular
Rijo
Rijo

Reputation: 3043

Angular JSON object break up into new line is not working

I'm creating custom table configuration, Some lengthy header names i need to break up into new line, i tried '\n' and <br>, but it doesn't work for me.

app.component.ts

columnDefs = [
      {headerName: 'Make <br> Production', field: 'make', edit:true },
      {headerName: 'Model/\n\nLatest Model', field: 'model', dropdown: true },
      {headerName: 'Price', field: 'price', edit:true}
  ];

app.component.html

<tr style="background:#f5f5;">
    <ng-container *ngFor="let item of columnDefs" >
      <td>{{ item.headerName }}</td>
    </ng-container>
  </tr>

Is any work around for this?

Slackblitz

Upvotes: 0

Views: 735

Answers (2)

Antediluvian
Antediluvian

Reputation: 723

It is a bad idea to put HTML tags into your model data.

Please use CSS to do the line break. You can give your table cell a max width and the browser will break it up into multiple lines if necessary.

Upvotes: 0

Christopher Peisert
Christopher Peisert

Reputation: 24134

You can use the [innerHTML] property binding to interpret the HTML <br> tags.

<ng-container *ngFor="let item of columnDefs" >
  <td [innerHTML]="item.headerName"></td>
</ng-container>

However, it is generally better to keep formatting logic separate from data. Therefore, CSS would be preferred to set column widths and let lines automatically wrap.

Upvotes: 2

Related Questions