Angular Material ngFor in mat-chip-list - how to prevent from line-break?

Question

issue case in stackblitz

Problem: How to achieve that the mat-chips in angular-material are in one line (as they are as standard), but when looped via ngFor in a mat-chip-list (which is inside a mat-cell), they get placed all on a seperate line (see column "Name").

Goal: I would like to have it in line next to each until break due to width limit (see column "Weight").

chips of comma seprated string elements of name (e.g. A, Z) should be next to each other on line:

    const ELEMENT_DATA: PeriodicElement[] = [
      {position: 1, name: 'A, Z', weight: 1.0079, symbol: 'H'},
      {position: 2, name: 'this first, this second in line', weight: 4.0026, symbol: 'He'},
    ];

as in

    <ng-container matColumnDef="name">
        <th mat-header-cell *matHeaderCellDef> Name </th>
        <td mat-cell *matCellDef="let element">
          <mat-chip-list class="no-wrap" *ngFor="let n of element.name.split(',')">
            <span class="nobreak">
              <mat-chip class="no-wrap">{{n}}</mat-chip>
            </span>
          </mat-chip-list>
        </td>
    </ng-container>

visualisation issue case with angular-material

Answer 1

Your *ngFor is on the wrong tag, you have to place it on your <mat-chip>, see below :

    <!-- Name Column -->
    <ng-container matColumnDef="name">
      <th mat-header-cell *matHeaderCellDef> Name </th>
      <td mat-cell *matCellDef="let element">
        <mat-chip-list class="no-wrap" >
            <mat-chip class="no-wrap" *ngFor="let n of element.name.split(',')">{{n}}</mat-chip>
        </mat-chip-list>
      </td>
    </ng-container>

With your code you create a mat-chip-list for each element