Within my Angular component, I have a mat-list structured like this in the food-list.component.html file:
<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>
In the corresponding CSS file (food-list.component.scss), I have defined the following styling:
p.overflowText {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
My goal is to dynamically set the width for the text overflow based on the available space. For instance, in desktop view, the mat list item width is 100px and the MatIconWidth is 5px. In mobile view, the mat list item width is 50px with the same MatIconWidth of 5px.
To achieve this, I plan to calculate the text overflow width in the food-list.component.ts file as follows:
ngOnInit(): void {
this.foodLabelWidth = matListItemWidth - MatIconWidth;
}
However, in order to accurately calculate this width, I need to access the DOM element width of the following icon:
<mat-icon *ngIf="showFoodIcon" color="warn">not_listed_location</mat-icon>
This icon is nested inside a NgFor loop. Is there a way to accomplish this?