Angular 6: How to render nested array value as matrix way?

Question

I would like to display the records in a matrix way so that my actual output will look as below.

Lorium 001
Lorium 002
Lorium 003
----------
Ipsum 001
Ipsum 002
Ipsum 003

Currently it is generating in a one line as below.

Lorium
001
002
003
Ipsum
001
002
003

Code snippet and also please review StackBlitz working demo

<div class="container">
    <div class="row" *ngFor="let element of data">
        <div class="col s4">
            <mat-form-field class="">
                <input matInput type="text" value={{element.value}} readonly>
        </mat-form-field>
        </div>
        <div class="sub-collection">
            <div class="col s4" *ngFor="let subElement of element.sizes">
                <mat-form-field class="">
                    <input matInput type="text" value={{subElement.subValue}} readonly>
        </mat-form-field>
            </div>
        </div>
    </div>
</div>

MoxxiManagarm · Accepted Answer · 2020-10-05 09:39:13Z

1

Try

<div class="container">
    <div class="row" *ngFor="let element of data; let first = first">
    <div *ngIf="!first">----------</div>
    <ng-container *ngFor="let subElement of element.sizes">
      <div class="col s4">
        <mat-form-field class="">
          <input matInput type="text" value={{element.value}} readonly>
        </mat-form-field>
        <mat-form-field class="">
          <input matInput type="text" value={{subElement.subValue}} readonly>
        </mat-form-field>
      </div>
    </ng-container>
    </div>
</div>

See modified stackblitz: https://stackblitz.com/edit/angular-dxyzqb?file=src/app/app.component.html

answered Oct 5, 2020 at 9:39

MoxxiManagarm

9,2214 gold badges20 silver badges51 bronze badges

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

2 Comments

TMA Over a year ago

Thank you so much for your valuable response !!! It works as what I am looking. Btw did not get that concept of let first = first ? Is it a concept of Indexing ?

MoxxiManagarm Over a year ago

first is a local variable of the ngForOf directive. You can't use it unless you assign it. You could also write e.g. let isFirst = first to avoid naming confusion. Read further angular.io/api/common/NgForOf#local-variables

Collectives™ on Stack Overflow

Angular 6: How to render nested array value as matrix way?

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