Problem dynamically updating the css from observable

Ionic Framework Ionic Angular
1

I have a chat dashboard, and whenever a new private message arrives the new item is created. However, once created if there is a new message that arrives the css is not changed unless I move to another page and then come back to the page in question, then the css is updated accordingly, I believe the issue has to do with Angular change detection and no matter what I try to do it doesn’t seem to work.

chatdashboard.html

 33     <ng-container *ngFor="let user of peerConversations$ | async">
 32       <message-list (click)="openConversation(user)" (press)="peerConversationOptions(doctor)" [peerConversations]="user"
 31         [isPeerChat]="true">
 30       </message-list>
 29     </ng-container>
 28   </ng-container>

message-list.ts

    5 @Component({
    6   selector: 'message-list',
    7   templateUrl: './message-list.component.html',
    8   styleUrls: ['./message-list.component.scss'],
    9   changeDetection: ChangeDetectionStrategy.OnPush,
   10 })
   11 export class MessageListComponent implements OnInit {
   12   @Input() public messageStatus: string;
   13   @Input() public groupConversation: GroupDashboard;

   18   public peerConversation: ChatDashboard;
   19   @Input() public set peerConversations(peer) {
   20     this.peerConversation = peer;
   21     this.changeDetect.markForCheck();
   22   }

message-list.html

<ng-container *ngIf="isPeerChat">
 43   <ion-grid>
 42     <!-- <ion-row [class]="style"> -->
 41     <ion-row [ngClass]="{
 40         urgent: peerConversation.unreadMessages.urgent > 0,
 39         normal: peerConversation.unreadMessages.urgent === 0 && peerConversation.unreadMessages.normal > 0
 38       }">

so the elements css isn’t being dynamically changed depending on the message received that isn’t read. I hope I explained it well enough.