Angular: Get the correct width value of a div element when the browser width changes

I have a div element that automatically shrinks if the width of the browser is less than or equal to the dv element width. For that I use ngAfterViewChecked(). But I get an error when the div element changes its width automatically.

test.component.html:

<div style="display:inline" #myContainer>
   //this is only an example
   <div>
     <li>...</li>
     <li>...</li>
     <ng-container *ngIf="coOffset <= winWidth;">
       <li>...</li>
       <li>...</li>
     </ng-container>
   <div>
</div>

test.component.ts:

public coOffset: number;
public winWidth: any;
@ViewChild('myContainer') coRef: ElementRef;

onResize(event) {
  this.winWidth = window.innerWidth;
}

ngAfterViewInit (): void {
  this.coOffset = this.coRef.nativeElement.offsetWidth;
}

ngAfterViewChecked(): void {
  this.coOffset = this.coRef.nativeElement.offsetWidth;
  this.cd.detectChanges();
}

The error message reads:
ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: ...

I found many examples on the internet, but they couldn't solve my problem. Can someone help me please. Thanks

The only thing you are missing is ChangeDetectorRef in ngAfterViewInit. I had reproduced the same problem and fixed by just adding detectChanges in ngAfterViewInit.
Here is complete code of ts file

import {  ChangeDetectorRef, Component, HostListener, ViewChild } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.sass']
})
export class AppComponent  {
  public coOffset: any;
  public winWidth: any;
  @HostListener('window:resize', ['$event'])
  onResize() {
    this.resized();
  }

  @ViewChild('myContainer') coRef: any;
  
  constructor(public cd: ChangeDetectorRef)
  {
    this.winWidth = window.innerWidth;
  }
  
  ngAfterViewInit (): void {
    this.coOffset = this.coRef.nativeElement.offsetWidth;
    this.cd.detectChanges();
  }

  resized(): void {
    this.coOffset = this.coRef.nativeElement.offsetWidth;
    this.cd.detectChanges();
  }
}

Besides, please have a look at the link below to see the issue & solution visually: TestWise Replay | StackOverFlow QA - Angular: Get the correct width value of a div element when the browser width changes