angular - how to display array as multiple lines in a table cell

Question

Sorry I am new to angular and trying to learning some basics while making some app myself.

I have the following that that outputs an array in the table cell TEST1,TEST2,TEST3

My goal is to make it to display as

TEST1

TEST2

TEST3

getStatus(element.message) returns an array that is constructed by

array.push(match[0]) in a for loop

    <ng-container matColumnDef="ticketStatus">
      <th mat-header-cell *matHeaderCellDef class="text-center w-6">
        Status
      </th>
      <td mat-cell *matCellDef="let element">{{ getStatus(element.message) }}</td>
    </ng-container>

S P · Accepted Answer · 2020-05-28 22:45:05Z

3

I noticed that you are using Angular material. What you could do is populating your cells using a foreach on displayedColumns?

<table cdk-table [dataSource]="dataSource">

  <ng-container *ngFor="let col of displayedColumns" cdkColumnDef="{{ col }}">
     <th cdk-header-cell *cdkHeaderCellDef>{{ col }}</th>
     <td cdk-cell *cdkCellDef="let row; let i = index"> {{ getFieldValue(i, col) }}   </td>
   </ng-container> 

   <tr cdk-header-row *cdkHeaderRowDef="displayedColumns"></tr>
   <tr cdk-row *cdkRowDef="let row; columns: displayedColumns;"></tr>
</table>

Please note: the example is a CDK-table, but it is almost similar to Angular Material Table since it is derived from CdkTable.

I created a Stackblitz. Maybe you can get some inspiration:

https://stackblitz.com/edit/angular-ivy-bes8zf

answered May 28, 2020 at 22:45

S P

4,6432 gold badges20 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

void Over a year ago

thank you for your inspiration. I think I didn't make my question clear. From you example, my question is the if the value in column "Name" can be an array, how can I display it properly as multiple line in the same cell?

void Over a year ago

thank you for your insights again. I made it working using <ng-container matColumnDef="ticketStatus"> <th mat-header-cell *matHeaderCellDef class="text-center w-6"> Status </th> <td mat-cell *matCellDef="let element"><ng-container *ngFor="let status of getStatus(element.message)">{{ status }}<br></ng-container></td> </ng-container>

Collectives™ on Stack Overflow

angular - how to display array as multiple lines in a table cell

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related