Переключить навигацию с использованием макета angular cdk

Question

Я пытаюсь переключить класс в зависимости от размера области просмотра. Хотя я вижу, что журналы, запускаемые изменениями области просмотра, и значения переменных также меняются, dom не отражает изменения в классах от text-left к text-center и наоборот. Мой Angular класс

export class HeaderComponent implements OnInit, OnDestroy {

  constructor(public mediaMatcher: MediaMatcher, public changeDetectorRef: ChangeDetectorRef) { }
  
  meddiaQuery: MediaQueryList;
  tabletView : boolean;
  desktopView: boolean;
  mediaQueryListenner: () => void;

  ngOnInit() {

    this.meddiaQuery = this.mediaMatcher.matchMedia('(min-width: 992px)');

    this.mediaQueryListenner = () => {
        
      this.changeDetectorRef.detectChanges();
      if(this.meddiaQuery.matches){        
        this.desktopView = true;
        console.log("desktopView "+this.desktopView);
      }else{
       this.desktopView = false;
       console.log("desktopView "+this.desktopView);
      }
    
    }
    this.meddiaQuery.addListener(this.mediaQueryListenner);

  }

  ngOnDestroy(){
    this.meddiaQuery.removeListener(this.mediaQueryListenner);
  }

}

И мой HTML это

<div class="col-12 col-lg-3" [ngClass]="desktopView? 'text-left' :'text-center'">

<div class="col-12 col-lg-9 text-center" *ngIf="desktopView">
</div>