How to conditionally and dynamically set an ion-item background color

@peterjc wrote:

I have just been porting my app from Ionic 3 to Ionic 4.

I have a side menu, with a list of ion-items, and if selected would navigate to a new view. When the menu is shown, I shade the background slightly.

I have the following markup in my app.component.html

      <ion-list>
          <ion-menu-toggle auto-hide="false">
            <ion-item *ngFor="let p of availablePages" 
                      button=true lines='none' [routerLink]="[p.pageRoutePath]" 
                      [style.background]= "p.isCurrentPage ? '#F4F4F4' : ''">  /* < this line did the shading */
              <ion-avatar slot='start'>
                <img class='menu-icon' src='{{p.menuImage}}'>
              </ion-avatar>
              <div>{{p.title}}</div>
            </ion-item>

In Ionic 3, the following line took care of this shading…

[style.background]= "p.isCurrentPage ? '#F4F4F4' : ''"> 

But this no longer works.

When I look at the app in dev tools, I found the following element which will show the background (I have manually set it to pink in the dev tool while searching for which element to color…

image.png1171×558 86.8 KB

Does anyone know how I can do this similar to how I did it before, ie conditionally set the background depending on a property value?

Thanks in advance for any help!

Posts: 2

Participants: 2

Read full topic