Change color icon when changing slides

@flosrn wrote:

Hello,

I would like change the color of the icons in my toolbar on the top when I changing slides.

Here is my first slide :

2018-01-05 10_32_23-beep_V2 - Ionic Lab.png426x758 15.2 KB

And my second slide :

Inked2018-01-05 10_33_31-beep_V2 - Ionic Lab_LI.jpg426x754 27.5 KB

I would like my second icons become blue and my first icon become grey when I jump on the second slide.

Here is my code :

<ion-header>

  <ion-navbar color="primary">
    <ion-title color="primary">Créer un besoin</ion-title>
  </ion-navbar>

  <ion-toolbar>

    <!-- Icon 1 -->
    <div class="button1">
      <ion-buttons start>
        <button ion-button icon-only>
          <ion-icon name="create"></ion-icon>
        </button>
      </ion-buttons>
    </div>

    <!-- Icon 2 -->
    <div class="button2">
      <ion-buttons start>
        <button ion-button icon-only>
          <ion-icon class="icon1" name="map"></ion-icon>
        </button>
      </ion-buttons>
    </div>

    <!-- Icon 3 -->
    <div class="button3">
      <ion-buttons start>
        <button ion-button icon-only>
          <ion-icon class="icon1" name="calendar"></ion-icon>
        </button>
      </ion-buttons>
    </div>

    <!-- Icon 4 -->
    <div class="button4">
      <ion-buttons start>
        <button ion-button icon-only>
          <ion-icon class="icon1" name="card"></ion-icon>
        </button>
      </ion-buttons>
    </div>

  </ion-toolbar>

</ion-header>

<ion-content>

  <ion-slides>

    <!-- Slide 1 -->
    <ion-slide>
      <ion-item>
        <ion-label color="primary" stacked>Titre de votre besoin</ion-label>
        <ion-input [(ngModel)]="request.name" placeholder="Exemple : Ordinateur infecté"></ion-input>
      </ion-item>

      <ion-item>
        <ion-label color="primary" stacked>Description</ion-label>
        <ion-input  [(ngModel)]="request.quantity" placeholder="Décrivez ici votre problème" ></ion-input>
      </ion-item>

      <ion-item>
        <ion-label color="primary" stacked>Prix</ion-label>
        <ion-input  [(ngModel)]="request.price" placeholder="100 €" type="number"></ion-input>
      </ion-item>
    </ion-slide>

    <!-- Slide 2 -->
    <ion-slide>
      <ion-item>
        <ion-label color="primary" stacked>Votre position géographique</ion-label>
        <ion-input [(ngModel)]="request.name" placeholder="Exemple : Toulouse"></ion-input>
      </ion-item>
    </ion-slide>

  </ion-slides>

  <button class="suivant" ion-button full (click)="goToSlide()">Suivant</button>

</ion-content>

Thank’s in advance !

Posts: 1

Participants: 1

Read full topic