How to change the style of ion tab dynamicly?

#1

Hello,
i want to change the style of one of my ion tabs when a notification arrive(i don’t want to use badge ) i want to change (background color and icon and text color), how can i do this ?

#2

You need to have a watcher to notification received in your component and then add a class to ion-tabs with:

ts

// USE EVENT EMITTER OF ANGULAR TO RECEIVE AND SEND EVENTS BETWEEN COMPONENTS
onNotificationReceived () {
    this.notificationReceived = true;
}

html

<ion-tabs [ngClass]="{'hasNotification': notificationReceived}">....

scss

ion-tabs.hasNotification {
    color: white;

   .tabbar {
       background-color: red;
   }
}
#3

can i use directly .hasNotification ?
like this

.hasNotification {
    color: white;
}
#4

Yes, but I think you will need to add !important to take effect.