CODEWITHSUNDEEP
angularngfor
patel.milanb
patel.milanb

Reputation: 5992

how to add row and col in ng-for every 3 elements

I am currently doing a refactoring of the code and stuck at this point where i need to add a row and 3 col inside a row every 3 elements. here is what i tried.

OLD component html which i want to replicate.

    <div class="kt-grid__item kt-grid__item--fluid">
      <div class="row">
        <div class="col">
          <aic-multiselect [searchFilters]="searchFilters"></kt-aic-multiselect>
        </div>
        <div class="col">
          <provider-multiselect [searchFilters]="searchFilters"></provider-multiselect>
        </div>
        <div class="col">
          <territory-multiselect [searchFilters]="searchFilters"></territory-multiselect>
        </div>
      </div>
      <br />
      <div class="row">
        <div class="col">
          <cob-dropdown [searchFilters]="searchFilters"></cob-dropdown>
        </div>
        <div class="col">
          <physician-mutiselect [searchFilters]="searchFilters"></physician-mutiselect>
        </div>
        <div class="col">
          <state-dropdwon [searchFilters]="searchFilters"></state-dropdwon>
        </div>
      </div>
      <br />
  </div>

New component which i refactored and want to replicate above html

This is what i tried and i know its wrong but cant seem to get the logic. 

  <div class="kt-grid__item kt-grid__item--fluid" *ngIf="reportFields$">
  <div *ngFor="let field of reportFields$ | async let _i = index">
    <div class="row" *ngIf="(_i % 3) == 0">
      <div class="col">
        <h6 class="subheader__title"><b>{{field.DisplayHeaderText}}</b></h6>

        <kendo-multiselect *ngIf="field.Type == 'MultiSelect'"
                           [data]="field.SelectOptions"
                           textField="DisplayName"
                           valueField="Value"
                           [autoClose]="false"
                           [kendoMultiSelectSummaryTag]="1"
                           [popupSettings]="'{
                    width: auto,
                    height: auto
                  }'"
                           (open)="loadDataForField(field)"
                           (valueChange)="markAsSelected($event, field)"
                           [loading]="isLoading"
                           [virtual]="virtualDropDown">
          <ng-template kendoMultiSelectGroupTagTemplate
                       let-dataItems>
            {{ dataItems.length }} more selected
          </ng-template>
        </kendo-multiselect>

        <kendo-dropdownlist *ngIf="field.Type == 'DropDown'"
                            style="width: 100%"
                            [popupSettings]="{
                            width: 350,
                            height: 150
                        }"
                            textField="DisplayName"
                            valueField="Value"
                            [data]="field.SelectOptions"
                            (open)="loadDataForField(field)"
                            (valueChange)="markAsSelected($event, field)">
        </kendo-dropdownlist>
      </div>
    </div>
    <br />
  </div>
</div>

please help. your time and help appreciated.

Upvotes: 0

Views: 419

Answers (2)

altoqueperro
altoqueperro

Reputation: 379

easy way mi perro, over the ts class, just chunk the array in 3 parts:

let reportFieldsRows = this.reportFields$.pipe(map(arr => arr.reduce((p, n) => {
     const last = p[0];
     if (last.length < 3) last.push(n);
     else p.unshift([n]);
     return p;
   }, [[]]).reverse()));

   reportFieldsRows.subscribe(chunkArray=>this.chunkArray);

this will chunk the array into a bidimensional one [[n],[n+]]

and then you do a nested ng-repeat something like this for example:

 <div *ngFor="let row of chunkArray;let _i = index">
     <div class="row" >
        <div class="col" *ngFor="let col of row">
            {{col}}
        </div>
     </div>
 </div>

and all is that, maybe you can find another more fancy way to chunk the array.

Upvotes: 1

IkeMtz
IkeMtz

Reputation: 357

The easiest way to resolve your issue is to change the following:

  <div class="row" *ngIf="(_i % 3) == 0">

To this:

  <div [ngClass]="{'row': (_i % 3) === 0}">

Hope this helps, Isaac

Upvotes: 0

Related Questions