Ad

Angular Arrays And NgFor

I have a html component with list

<div *ngFor="let item of myArr">
  <ul>
    <li>
      {{ item }}
      <span>
        <mat-icon (click)="expression($event)">add</mat-icon>
      </span>
      <ng-container
        ><h2 *ngFor="let item of textArr">
          {{ item }}
        </h2></ng-container
      >
    </li>
  </ul>
</div>

and component ts with arrays

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

@Component({
  selector: 'app-child',
  templateUrl: './child.component.html',
  styleUrls: ['./child.component.scss'],
})
export class ChildComponent implements OnInit {
  myArr = ['1', '2', '3', '4'];

  abc = ['a', 'b', 'c', 'd'];

  textArr = [];

  constructor() {}

  ngOnInit(): void {}
  expression(ev: Event) {
    console.log(ev);

    this.textArr.push(this.abc);
  }
}

how can I make, that when I click + what is on front of 1, then 'a' form abc will be displayed only under 1, if I click + what is on front of 2, then b from abc should be display under 2, etc...

what I need

Ad

Answer

Use the index in for loop.

I have an example

<h2>Form list</h2>
<div *ngFor="let form of formList; let i = index">
  <ul>
    <li>
      <h4>{{ form.formLable }}</h4> 
       <div>
         <button (click)="loadForm(i)">View {{ form.formLable }}</button>
      </div>
      <div *ngIf="form.isLoaded">
         Do what ever strategy to load a form in
         If many many many forms look at loading components in dynamically
      </div>
    </li>
  </ul>
</div>

Here is a working example.

https://stackblitz.com/edit/angular-8clu3r?file=src%2Fapp%2Fform-list%2Fform-list.component.html

Ad
source: stackoverflow.com
Ad