This is a multi-level accordion list menu and at the 3rd level i put button(hammer icon) beside in each items. I added a toastController in the button but how can i display each item i clicked in problems to be fix (at the bottom side of the menu). Please guide me guys thank you for your future answers.
form.html
........
<button ion-item (click)="toggleSection(i)" detail-none [ngClass]="{'section-active': item.open, 'section': !item.open}">
<ion-icon item-left name="ios-arrow-forward" *ngIf="!item.open"></ion-icon>
<ion-icon item-left name="ios-arrow-up" *ngIf="item.open"></ion-icon>
{{ item.name }}
</button>
<ion-list *ngIf="item.children && item.open" no-lines style="margin-bottom: 0%">
<!-- Second Level -->
<ion-list-header *ngFor="let child of item.children; let j = index" no-padding style="margin-bottom: 0%">
<!-- Toggle Button -->
<button ion-item (click)="toggleItem(i, j)" detail-none class="child-item" *ngIf="child.children" no-padding no-lines>
<ion-icon item-left name="add" *ngIf="!child.open"></ion-icon>
<ion-icon item-left name="close" *ngIf="child.open"></ion-icon>
{{ child.name }}
</button>
<!-- Direct Add Button -->
<!-- <ion-item *ngIf="!child.children" detail-none class="child-item" text-wrap no-lines>
<h2>{{ child.name }}</h2>
<p text-lowercase>{{ child.information }}</p>
<button ion-button outline item-end (click)="buyItem(child)">{{ child.price }}</button>
</ion-item> -->
<ion-list *ngIf="child.children && child.open">
<!-- Third-Level -->
<ion-item *ngFor="let item of child.children" detail-none class="child-item" text-wrap no-lines>
<ion-label>{{ item.name }}</ion-label>
<!-- <button ion-button item-end (click)="buyItem(child)"><ion-icon ios="ios-hammer"></ion-icon></button> -->
<button ion-button color="dark" item-end (click)="tofix(item)">
<ion-icon ios="ios-hammer" is-active="false"></ion-icon>
</button>
</ion-item>
</ion-list>
</ion-list-header>
</ion-list>
</ion-list-header>
</ion-list>
</ion-card>
<div class="issue">
<ion-card>
<ion-card-header>
Problems to be fix
</ion-card-header>
<p style="font-size: 1.3em; padding-left: 15px; color: black" >Main: {{ }} </p>
<p style="font-size: 1.3em; padding-left: 15px; color: black" >Kitchen: {{ }} </p>
<p style="font-size: 1.3em; padding-left: 15px; color: black" >Terrace: {{ }} </p>
<p style="font-size: 1.3em; padding-left: 15px; color: black" >Toilet: {{ }} </p>
<button ion-button full (click)="AreaPage()">Submmit</button>
</ion-card>
</div>
.......
form.ts
import { Component, Input, OnInit } from '@angular/core';
import { IonicPage, NavController, NavParams, ToastController } from 'ionic-angular';
import { Http } from '@angular/http';
import 'rxjs/add/operator/map';
@IonicPage()
@Component({
selector: 'page-form',
templateUrl: 'form.html',
})
export class FormPage implements OnInit{
data: any[];
@Input('item') item: any;
constructor(public navCtrl: NavController,
public navParams: NavParams,
private http: Http,
private toastCtrl: ToastController) {
let localData = this.http.get('assets/data/menus.json').map(res => res.json().items);
localData.subscribe(data => {
this.data = data;
});
}
toggleSection(i) {
this.data[i].open = !this.data[i].open;
}
toggleItem(i, j) {
this.data[i].children[j].open = !this.data[i].children[j].open;
}
ngOnInit() {
}
async tofix(item){
let toast = await this.toastCtrl.create({
message: `Added item to be fix : ${item.name}`,
duration: 2000
});
toast.present();
}
ionViewDidLoad() {
console.log('ionViewDidLoad FormPage');
}
}
menu.json
{
"items": [
{
"name": "MAIN",
"children": [
{
"name": "Main Door",
"children": [
{
"name": "Painted door lock"
},
{
"name": "Painted door"
},
{
"name": "Damaged door"
},
{
"name": "Damaged door lock"
},
{
"name": "Painted hinge"
},
{
"name": "Stuck door"
},
{
"name": "With gap below"
},
{
"name": "Paint with cracks"
},
{
"name": "Unfinished door paint"
},
{
"name": "Gaps beside door knob"
},
{
"name": "Door with voids"
}
]
},
]
}
.... I just put the MAIN data in my json as the image only shows ....
]
}
Please guide me guys thank you for your future answers.