Solution 1 :

In your component take a boolean instance variable that will act as a toggle for displaying your lists

  • Now when you click on showModels button make it true, that means you will display menuModels
  • Now when you click on showOperators button make it false, that means you will display menuOperators

Try to use Boolean as more as you can rather comparing string. As. boolean will always have 1bit to store.

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

@Component({
  selector: 'xyz-abc',
  templateUrl: './xyz-abc.html',
  styleUrls: ['./xyz-abc.css']
})
export class XYZComponent implements OnInit {
  isDisplayModel: boolean = true;
  constructor(

  ) {

  }

  ngOnInit() {
  }

  showModels(){
    isDisplayModal = true;
  }
  showOperators(){
    isDisplayModal = false;
  }
}

Your HTML code will look like below

<div class="list" *ngIf="models !== undefined && models.length">
<div class="row" *ngIf="isDisplayModal">
    <div class="model" *ngFor="let model of menuModels">
       <div class="name">{{model.name}}</div>
    </div>
</div>

<div class="row" *ngIf="!isDisplayModal">
    <div class="operator" *ngFor="let operator of menuOperators">
        <div class="name">{{operator.name}}</div>
    </div>
</div>

Solution 2 :

You need to wrap the two lists like this :

<!-- First list -->
<div *ngIf="isModel; else myTemplate">
 <div class="list" *ngIf="models !== undefined && models.length">
    <div class="model" *ngFor="let model of menuModels">
        <div class="name">{{model.name}}</div>
    </div>
 </div>
</div>
<!-- Second List -->
<ng-template #myTemplate>
    <div class="operator" *ngFor="let operator of menuOperators">
        <div class="name">{{operator.name}}</div>
    </div>
</ng-template>

now in your ts define a boolean isModel: isModel=true
and switch it when you click :

showModels(){
 this.isModel=true;
}
showOperators(){
this.isModel=false
}

Problem :

I have two lists in my html

<div class="list" *ngIf="models !== undefined && models.length">
    <div class="model" *ngFor="let model of menuModels">
        <div class="name">{{model.name}}</div>
    </div>
    <div class="operator" *ngFor="let operator of menuOperators">
        <div class="name">{{operator.name}}</div>
    </div>
</div>

and I have created two buttons in the same menu to show one or the other, depending on the button selected

    <div class="buttons">
        <div class="btn" (click)="showModels()"><p class="initial">M</p></div>
        <div class="btn" (click)="showOperators()"><p class="initial">O</p></div>
    </div>

Right now both lists are displayed in the same component.
How can I manage an *ngIf through the buttons so that one or the other is shown according to the corresponding button?
Or what would be the best way to do it?
Thank you in advance

Comments

Comment posted by homerThinking

Thank you for your solution, I understand the approach but the problem is that the first list is still fixed, I am not able to show the second

Comment posted by homerThinking

thank you @OAH I understand the approach but the problem is that the first list is still fixed, I am not able to show the second

By

Leave a Reply

Your email address will not be published. Required fields are marked *