I have a mat-list in an Angular component like below (food-list.component.html)

<mat-list id="site-list">
     <ng-container *cdkVirtualFor="let food of foods">
        <mat-list-item  id="food-{{food.id}}">
          <mat-icon *ngIf="showFoodIcon" color="warn">not_listed_location</mat-icon>
          <p matLine [ngStyle]="{width: foodLabelWidth} class="overflowText"><small>{{food.label}}</small></p>
          <p matLine [ngStyle]="{width: foodLabelWidth} class="overflowText"><small>{{food.type}}</small></p>
       </mat-list-item>
    </ng-container>
</mat-list>

And in CSS file (food-list.component.scss)

p.overflowText {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

As example in a desktop view mat list item width 100px and, MatIconWidth is 5px. and in mobile view mat list item width 50px and, MatIconWidth is 5px. I want to set text overflow width according to the space that left.

for example, in food-list.component.ts I want to do something like this.

ngOnInit(): void {
   this.foodLabelWidth= matListItemWidth - MatIconWidth;
}

to make it happen I want to get DOM element width of

    <mat-icon *ngIf="showFoodIcon" color="warn">not_listed_location</mat-icon>

Which lies inside a NgFor loop. Is there a way to achieve this?