Boolean check whether to add attribute or CSS in HTML template ---*ngIf="myVariable" display this css class---

Does anyone know how you can show or hide CSS classes or attributes in general based on the truthyness of a variable that is stored in an Ionic Page.ts ?

I want to add css transitions or animation to the slides when they are sliding in and out. So will use drive those changes like this

<ion-slides (ionSlideWillChange)="myFunction()">

then

let currentSlide =0;
    myFunction() {
      this.currentSlide = this.slides.getActiveIndex());
    }

then back in the HTML i want each slide to check whether it is the current slide and add a CSS class to it. Something like this ternary.

<ion-slide *ngIf="currentSlide===1 ? 'firstCSSClass' : 'secondCSSClass'">

It’s easy enough to display or hide HTML elements but how on earth do you condisionally add CSS or any other attributes ?

You can use ngClass for that

[ngClass]="{ ‘firstCSSClass’: currentSlide == 1, ‘secondCSSClass’: currentSlide != 1 }"

1 Like