Hello every one!
To start ineed to mention that I am new to ionic/angular…I have un api service call that returns a json full of data. as u see in the capture i have list of regions and sousRegions… after choosing (regions and sous regions) i have to display a MAP of number as Keys and and list of numbers as values as buttons.
i need to change the ion-button color/fill of the selected key and its values.
Example; If user chooses the First button of level 1 i need to make the first button’s fill attribute to “Solid” and the other buttons of same level to “outline” and the buttons of the level 2 same to choosen button of level 1 (outline).
<!--Transport Names-->
<ion-grid>
<ion-row>
<ion-label>
Transports
</ion-label>
</ion-row>
<ion-row>
<ion-col size="3" *ngFor="let tr of transports">
<ion-list>
<ion-button size="small" color="dark" mode="md" (click)="getSelectedTransport(tr)">
<ion-label>{{tr.name}}</ion-label>
</ion-button>
</ion-list>
</ion-col>
</ion-row>
</ion-grid>
<ion-item-divider mode="ios"[hidden]=hideTrKeys>
</ion-item-divider>
<!-- Transport Keys-->
level 1
<ion-grid>
<ion-row>
<ion-col size="3" *ngFor="let t of trmap | keyvalue">
<ion-button size="small" fill="{{btFill}}" mode="md" (click)="getSelectedTrKey(t.key)">
<ion-label>{{t.key}}</ion-label>
</ion-button>
</ion-col>
</ion-row>
</ion-grid>
<ion-item-divider mode="ios" [hidden]=hideTrValues >
</ion-item-divider>
level 2
<!-- transport Values -->
<ion-grid>
<ion-row>
<ion-col size="3" *ngFor="let v of trValues">
<ion-button size="small" mode="md" (click)="getSelectedTrValue(v)">
<ion-label>{{v}}</ion-label>
</ion-button>
</ion-col>
</ion-row>
</ion-grid>
<ion-item-divider mode="ios">
</ion-item-divider>