How to Use Two Ngfor in HTML Angular 4

How to use two ngFor in html Angular 4?

Do these two arrays always have the same number of elements? If so you can iterate over one of them, and keep track of index

<div class="col-md-12 property-list-box" *ngFor="let contract of contracts ; let i = index">
  <div>{{contracts[i].id}}</div>
  <div>{{users[i].id}}</div>
</div>

If they don't always have the same number of elements you'll need 2 ngFor directives

How can I put two ngFor in one div

You can't use multiple *ngFors in the same element as those are structural directives and angular handles them in a specific way (basically for each structural directive it creates an ng-template element which then holds the directive itself, you can read more about it here:
https://angular.io/guide/structural-directives, understanding that really makes it very clear why we can't have multiple structutral directives on the same element).

So you cannot use two ngFors on the same element, but you can use the index, if both arrays are of the same size, to check whether or not there is a value.

You did not give an example of the data format, so I'm probably going to give an example that will have to be adapted.

<div class = "checkbox">
    <label formArrayName="coverages" *ngFor="let coverage of coverageFormArray.controls;let i = index;">
        <input type="checkbox" kendoCheckBox [formControlName]="i"/>
        {{ coveragestypes[i] }}
        <div *ngIf="coverage.value">
            <input type = "text">
        </div>
    </label>
</div>

In addition, I recommend using ng-container instead of html tag that are only use to apply an Angular directive.

So my final solution would be.

<div class = "checkbox">
    <label formArrayName="coverages" *ngFor="let coverage of coverageFormArray.controls;let i = index;">
        <input type="checkbox" kendoCheckBox [formControlName]="i"/>
        {{ coveragestypes[i] }}
        <ng-container *ngIf="coverage.value">
            <input type = "text">
        </ng-container>
    </label>
</div>

*ngFor - Loop two arrays in the same level

use let obj of results[i] for this.

<tbody *ngIf="feedbacks.length">
    <ng-container *ngFor="let fd of feedbacks;let i=index">
        <tr>
            <td>{{ i }}</td>
            <td>{{fd}}</td>
            <td colspan="2">
                <ul>
                    <div *ngFor="let obj of results[i]">
                        <td>Test: {{obj.score}}</td>
                    </div>
                </ul>
            </td>
        </tr>
    </ng-container>
</tbody>

multiple ngFor is not working angular 4

You have a typo :

You forgot an asterix in <li ngFor. ( hence the error).

Also -

You are iterating an array of arrays of objects. so you need a prop at the end.

The difference : see {{state.MyStateProperty}}

<div *ngFor="let item of states; let i = index">
   <ul>
        <li *ngFor="let state of item">{{state.MyStateProperty}}</li>
   </ul>
</div>

Here's a basic working plnkr representing your nested structure.

Angular NgFor loop 2 arrays of objects

I fixed some typos on your code and added some edits.

Try to use this example and it should work perfectly with you.

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  competencias = [{id: "1", description: "This is a description"}]
  arrayCompetencias = [{checked: true, id: "1"}]
}

<div *ngFor="let item of competencias; let i = index">
  <input type="checkbox" 
    [value]="item.id" 
    [checked]="arrayCompetencias[i].checked"
    (change)="arrayCompetencias[i].checked = !arrayCompetencias[i].checked">
  <label>
    <strong> {{ item.id }} </strong> : {{ item.description}}
  </label>
</div>

*ngFor displaying 2 arrays in alternate way in Angular 4

updated answer

I recommend to store your bot-messages in an dictionary, with the key of the user-message like this:

botMessage = {};
userMessage = [];

onEnter(value: string) {
    this.userMessage.push(value); 
    var context = this.apiCall.getContext(value); 
    this.apiCall.postValue(value, context, this.output);

    const botMessages = this.apiCall.getMessages();

    // Add all bot messages depending on their user messages
    for(const message of botMessages) {
        this.botMessage[message.userMessageId] = message;
    }
} 

Implied, that your bot-message has the info to which user-message it depends.
With this structure, you can easily access the answer in your html like this:

<ul>
  <li class="bubble" *ngFor="let message of userMessage">
      <div class="user-message>{{ message }}</div>
      <div *ngIf="botMessage[message.id]" class="bot-message>
        {{ botMessage[message.id] }}
      </div>
  </li>
</ul>

Also I'm pretty sure, you have some asynchronous problems, but that's another chapter :-)

is it possible to perform two *ngFor directives on the same element?

As already said the best way is to combine both arrays into one and loop over that one.

But if you really want to do it this way you can use the index if the order and length of the two arrays matches.

     <mat-grid-tile *ngFor="let person of dataArray; let i = index">
        <img height="200px" src={{imageArray[i].src}} alt={{imageArray[i].caption}}>
        <mat-grid-tile-footer>
            <h1>{{person.locationId.tutenUser.firstName}} </h1>
        </mat-grid-tile-footer>
    </mat-grid-tile>

So the person with index 0 has its corresponding image in imageArray[0]

How to use *ngFor in angular 4 to create the table with 2 columns per row

The easiest would be to change the structure of the array to match the desired structure in the view.

here is a way to change the structure :

tableData = columns.reduce((acc, col, i) => {
    if (i % 2 == 0) {
        acc.push({column1: col});
    } else {
        acc[acc.length - 1].column2 = col;
    }       
    return acc;
}, []);

then you can do :

<table>
    <tr *ngFor="let row of tableData">
        <td>{{row.column1.columnName}}</td>
        <td>{{row.column2.columnName}}</td>
    </tr>
</table>

But if you don't want to change the array, you could try something like that :

<table>
    <ng-container *ngFor="let col of columns; let i = index">
        <tr *ngIf="i % 2 == 0">
            <td>{{col.columnName}}</td>
            <td>{{i < columns.length - 1 ? columns[i + 1].columnName : ""}}</td>
        </tr>
    </ng-container>
</table>

---

Related Topics