CODEWITHSUNDEEP
angular
Lestoroer
Lestoroer

Reputation: 531

*ngFor specific condition Angular 2

I have this code with *ngFor

settings = dropDownLists: [
   {name: 'Fac'},
   {name: 'Type'},
   {name: 'Course'},
   {name: 'Group'}
]

<div class="alingFloat" *ngFor="let dropDownList of settings.dropDownLists">
    <div class="scheduleText"> {{dropDownList.name}} </div>
</div>

HOW to print result like that?

<div class="alingFloat">
    <div class="scheduleText"> Fac </div>
    <div class="scheduleText"> Type </div>
</div>
<div class="alingFloat">
    <div class="scheduleText"> Curse </div>
    <div class="scheduleText"> Group </div>
</div>

Upvotes: 1

Views: 3896

Answers (3)

Lestoroer
Lestoroer

Reputation: 531

Solution 1

<ng-container *ngFor="let dropDownList of settings.dropDownLists; let i = index;
                                                                  let even = even;">
    <div class="alingFloat" *ngIf="even">
        <div class="scheduleText"> {{settings.dropDownLists[i].name}} </div>
        <div class="scheduleText" *ngIf="settings.dropDownLists[i+1]?.name"> 
            {{settings.dropDownLists[i+1].name}} 
        </div>
    </div>
</ng-container>

Solution 2 and where I was staying

<ng-container *ngFor="let dropDownList of settings.dropDownLists; let i = index; 
                                                                  let even = even;
                                                                  let last = last;">
    <div class="alingFloat" *ngIf="even">
        <div class="scheduleText" *ngFor="let dropDownList2 of settings.dropDownLists | 
                                                slice:0: last ? 1 : 2; let k = index;">
            {{settings.dropDownLists[i+k].name}} 
        </div>
    </div>
</ng-container>

Upvotes: 2

Vova Bilyachat
Vova Bilyachat

Reputation: 19504

I dont know whole case but if you want print div with two elements I would do smth like this

var initArray = [{ name: 'Fac' },
    { name: 'Type' },
    { name: 'Course' },
    { name: 'Group' }
    ];
    var settings =  initArray.reduce(function (prev, item) {
      var index = initArray.indexOf(item) % 2;
      if (!prev[index]) prev[index] = [];
      prev[index].push(item);
      return prev;
    }, []);

Then in template

<div class="alingFloat" *ngFor="let dropDownList of settings;">
    <div class="scheduleText" *ngFor="let element of dropDownList;"> {{element.name}} 1</div>
</div>

Result

<div _ngcontent-axv-3="" class="alingFloat">
    <!--template bindings={}--><div _ngcontent-axv-3="" class="scheduleText"> Fac</div><div _ngcontent-axv-3="" class="scheduleText"> Course</div>
  </div>
  <div _ngcontent-axv-3="" class="alingFloat">
    <!--template bindings={}--><div _ngcontent-axv-3="" class="scheduleText"> Type</div><div _ngcontent-axv-3="" class="scheduleText"> Group</div>
  </div>

Upvotes: 0

Pardeep Jain
Pardeep Jain

Reputation: 86790

Simply refine your array/*ngFor on the basis of index no. and put the condition you want like this

settings = dropDownLists: [
   {name: 'Fac'},
   {name: 'Type'},
   {name: 'Course'},
   {name: 'Group'}
]



<div class="alingFloat" *ngFor="let dropDownList of settings.dropDownLists; let i=index">
    <div class="scheduleText" *ngIf='i == 0'> Fac </div>
    <div class="scheduleText" *ngIf='i == 1'> Type </div>
</div>
<div class="alingFloat" *ngFor="let dropDownList of settings.dropDownLists; let i=index">
    <div class="scheduleText" *ngIf='i == 2'> Curse </div>
    <div class="scheduleText" *ngIf='i == 3'> Group </div>
</div>

But this method is not generally preferred if you have undefined no of entry's in the array

Upvotes: 0

Related Questions