How do I apply NgClass to single iteration through NgFor using parent/child components?

Question

I am trying to hide/show tiered buttons on a parent button click. Three buttons on tier 1 are generated using ngFor. I am unsure how to select only the desired tier when clicked instead of all of them.

I've gotten it to work on the highest level of buttons (allShow method)on tier 0, but not when there are more than one instance of a button (makesShow method) on li-column-3 or tier 1. I'm thinking I need to pass in the module id or index, but I'm not sure how.

I've used this link to help: https://levelup.gitconnected.com/angular-7-share-component-data-with-other-components-1b91d6f0b93f

child.html

<div class="fas arrow-btn" [ngClass]="{'fa-angle-right' : !allShow, 'fa-angle-down' : allShow}" (click)="outputShowAllMethod()"></div>

parent.html

<ul class="li-column-1">
    <li *ngFor="let module0 of subscriptions.cart.members">
        <app-subscription-button [module]="module0" (allShowOutput)="allShowParent($event)" [subscriptions]="subscriptions" tier="0"></app-subscription-button>
        <ul class="li-column-3" [ngClass]="{'hidden': !allShow && mobile}">
            <li *ngFor="let module1 of module0.members; let i = index">
                <app-subscription-button [module]="module1" (makesShowOutput)="makesShowParent($event, module1.id)" [subscriptions]="subscriptions" [index]="i" tier="1"></app-subscription-button>
                <ul class="li-column-2" [ngClass]="{'hidden': !makesShow && mobile}">
                    <li *ngFor="let module2 of module1.members">
                        <app-subscription-button [module]="module2" [subscriptions]="subscriptions" tier="2"></app-subscription-button>
                    </li>
                </ul>
            </li>
        </ul>
    </li>
</ul>

parent.ts

allShowParent($event) {
    this.allShow = $event;
  }
  makesShowParent($event, moduleId) {
    this.makesShow = $event;

  }

child.ts

@Input() module: object;
  @Input() subscriptions: object;
  @Input() tier: number;
  @Input() index: number;
  @Input() moduleId: number;
  @Output() allShowOutput = new EventEmitter<boolean>();
  @Output() makesShowOutput = new EventEmitter<boolean>();
...

outputShowAllMethod() {
    this.allShow = !this.allShow;
    this.allShowOutput.emit(this.allShow);
  }

  outputShowMakesMethod(mod) {

    if (mod.id === this.moduleId) {
      mod.makesShow = !mod.makesShow;
    }
    this.makesShowOutput.emit(mod);
  }

What happens if I repeat the process for the second tier of buttons, each of the three buttons on the same tier show their options when I only want one to show, removing the 'hidden' class.

Here is the stackblitz: https://stackblitz.com/edit/angular-jkpya4

Answer 1

I found a solution, albeit it's not pretty. I basically had to create three separate booleans on the child component side and feed them into the parent.

Here is the updated stackblitz: https://stackblitz.com/edit/angular-jkpya4

if anyone has a cleaner way to do it, feel free to post.