TypeScript For loop for nested array in html file

Question

I want to create UI using "for" loop inside my html file, so that will not need to write all the html. This is my model class

export class Industries 
{
  alphaIndex: string = '';
  industries: Array<string> = [];

  constructor(alphaIndex: string, industries: string[]) {
    this.alphaIndex = alphaIndex;
    this.industries = industries; 
  }
}

This data I have added in above model class from component class

industries: Array<Industries> = [];
  
constructor() {
 this.getIndustryData();
      
}

getIndustryData()
{
    let recordAE = new Industries ('A-E',['Aerospace & Defense','Automotive','Banking', 'Capital Market','Enterprise Strategy']);
    this.industries.push(recordAE);

    let recordFO = new Industries ('FO',['Forest Products & Chemicals', 'Industrial','Insurance','Mining','Metals']);
    this.industries.push(recordFO);
    .....
}

This UI want to be repeated

<div class="col-md-2">
 <div class="nav-item dropdown">
    <a href="#" data-toggle="dropdown">Item.alphaIndex
        <i class="bi bi-chevron-right"></i>
    </a>
    <div class="dropdown-menu">
        <a href="#" class="dropdown-item">Item.Data</a>
    </div>
 </div>
</div>

How can I do that ?

ngFor, see angular.io/guide/…

Andrew Allen
– Andrew Allen

2023-01-13 07:03:14 +00:00
Commented Jan 13, 2023 at 7:03 — Andrew Allen
– Andrew Allen, Commented Jan 13, 2023 at 7:03

Arvind Chourasiya · Accepted Answer · 2023-01-13 08:55:32Z

1

Take a look to the docs about structural directive. You can also take a tour of heroes to understand the basic of Angular.

Just iterate over 'industries'

<div *ngFor="let industry of industies">
  <div class="nav-item dropdown">
    <!--see that here you use "industry"
        use "interpolation" to get the value
      -->
    <a href="#" data-toggle="dropdown">{{industry.alphaIndex}}
        <i class="bi bi-chevron-right"></i>
    </a>
    <!--here iterate over industry.Data-->
    <div *ngFor="let data of industry.data" class="dropdown-menu">
           <!--again use interpolation-->
        <a href="#" class="dropdown-item">{{data}}</a>
    </div>
   </div>
</div>

Update there're many errors in before code, we can use

<div class="row gx-0">
  <div class="col-2" *ngFor="let industry of industries; let i = index">
    <button 
      (click)="menu.classList.toggle('show')"
      class="btn btn-secondary dropdown-toggle"
      type="button"
      data-bs-toggle="dropdown"
      aria-expanded="false">
      {{ industry.alphaIndex }}
    </button>
    <ul
      #menu
      class="dropdown-menu">
      <li *ngFor="let data of industry.industries">
        <a class="dropdown-item" href="#">{{ data }}</a>
      </li>
    </ul>
  </div>
</div>

See stackblitz

OR

<div *ngFor="let item of industries" class="col-md-3">
    <div class="nav-item dropdown">
        <a data-toggle="dropdown">{{item.alphaIndex}}
            <i class="bi bi-chevron-right"></i>
        </a>
        <div class="dropdown-menu">
            <a *ngFor="let data of item.industries" class="dropdown-item">{{data}}</a>
        </div>
    </div>
</div>

edited Jan 13, 2023 at 8:55

Arvind Chourasiya

17.7k15 gold badges123 silver badges212 bronze badges

answered Jan 13, 2023 at 7:07

Eliseo

58.9k4 gold badges39 silver badges82 bronze badges

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

3 Comments

Arvind Chourasiya Over a year ago

Thank you for the answer, I think I want to use interpolation/loop even above <div class="col-md-2"> so that this div will be repeated.

Eliseo Over a year ago

::glup:: I formatted bad the code (just corrected) and the interpolation not showed. But you're true, I should use the *ngFor in a the div you indicate.

Eliseo Over a year ago

@R15 I make a little stackblitz here

Collectives™ on Stack Overflow

TypeScript For loop for nested array in html file

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related