Change the color/Fill of an ion-button dynamically

@AminR wrote:

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>

Capture446×541 5.68 KB

Posts: 1

Participants: 1

Read full topic