search

angular / components

Component infrastructure and Material Design components for Angular
https://material.angular.io
MIT License
24.23k stars 6.7k forks source link

mat-list-item shows matListIcon to the right when using ngSwitch #7778

Open Alan502 opened 6 years ago

Alan502 commented 6 years ago

Bug

What is the expected behavior?

Mat-list-item should always show matListIcon to the left

What is the current behavior?

When using ngSwitch, matListIcon is moved to the right

What are the steps to reproduce?

Take a look at:

https://stackblitz.com/edit/angular-material2-issue-jbu3mk?file=index.html

Check_circle icon should be to the right

What is the use-case or motivation for changing an existing behavior?

This was working fine in previous angular material versions.

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

I'm using Angular Material 2.0.0-beta.12

Is there anything else we should know?

crisbeto commented 6 years ago

The issue seems to come from the fact that when you wrap the icon in an ng-container, it ends up moving the icon to the end of its parent which breaks some CSS selectors that expect it to be first.

heunetik commented 4 years ago

Any updates? This is still an issue with Angular 8.2.12, and also with Angular 9.1.7

SvenBudak commented 3 years ago

Any Updates?

amayer42 commented 2 years ago

@Alan502 I was just running into this as well. @crisbeto is correct that it's because your matListIcon directive is within an ng-container. If you additionally apply, matListIcon to the ng-container in your example, the entire ng-container will end up being rendered within the proper ng-content section of the mat-list-item.

<ng-container matListIcon [ngSwitch]="yesOrNo">