Tengo una lista de alfombras en un componente Angular como el siguiente ( 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>

Y en el archivo CSS ( food-list.component.scss )

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

Como ejemplo, en una vista de escritorio, el ancho del elemento de la lista de alfombras es de 100 px y MatIconWidth es de 5 px. y en la vista móvil, el ancho del elemento de la lista de tapetes es de 50 px y MatIconWidth es de 5 px. Quiero establecer el ancho de desbordamiento de texto de acuerdo con el espacio que queda.

por ejemplo, en food-list.component.ts quiero hacer algo como esto.

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

para que esto suceda, quiero obtener el ancho del elemento DOM de

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

Que se encuentra dentro de un bucle NgFor. ¿Hay una manera de lograr esto?