Ion-item with *ngFor in a dropdown - ionic-framework

Question

I would like to set a button that opens and hides some ion-item in a dropdown.
I know that there might be a solution in the docs but I am unable to find it
<ion-header>
<ion-toolbar>
<ion-title>Technical Information</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-list>
<ion-list-header>
<ion-label>Manuales</ion-label>
</ion-list-header>
<ion-item *ngFor="let m of manuals">
<ion-label>{{m}}</ion-label>
</ion-item>
</ion-list>
<!-- Other <ion-list-header>s and <ion-item>s -->
</ion-content>
I would like to hide and show all Items when clicking on each ion-list-header, show his own ion-item with *ngFor, like if there are 20 manuals, dropdown all 20 manuals and hide others ion-list-headers...
Is there a way to do it with this structure or maybe with another?

Answer 1

Try this:
<ion-header>
<ion-toolbar>
<ion-title>Technical Information</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-list *ngFor="let m of manuals; let i=index">
<ion-list-header>
<ion-label (click)="showOrHide(i)">Manuales</ion-label>
</ion-list-header>
<ion-list id="{{i}}" style="display:none">
<ion-item *ngFor="let m of m.list">
<ion-label>{{m}}</ion-label>
</ion-item>
</ion-list>
</ion-list>
</ion-content>
In .ts component:
import { Component } from '#angular/core';
import { NavController , AlertController } from 'ionic-angular';
#Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage {
manuals = [{
id:1,
list: ["1","2","3"]
},
{
id:2,
list: ["1","2","3"]
},
{
id:3,
list: ["1","2","3"]
},
{
id:4,
list: ["1","2","3"]
}]
constructor() {
}
showOrHide(id){
const listItemShow = document.getElementById(id);
if(listItemShow.style.display === "none")
listItemShow.style.display = "block"
else
listItemShow.style.display = "none"
}
}