Angular Material List not rendering list properly when the list item is a component

Objective


I am attempting to encapsulate the formatting logic (not routing logic) into a component. I am using the Angular Material's MatList component.

<mat-nav-list>
<!-- The below <a> has some common routing and styling logics -->
<a
mat-list-item
[class.active]="isActive"
routerLinkActive="active2"
[activated]="isActive"
[routerLink]="link"
>
<!-- Control formatting -->
@if(singleLine) {
<app-list-single-line-format [item]="item" />
} @else {
<app-list-multi-line-format [item]="item" />
}
</a>
</mat-nav-list>


It is almost working. But the styling is broken when used as a component.

Minimal reproduction


<mat-nav-list role="list">
<!-- working -->
<a mat-list-item role="listitem">
<mat-icon matListItemIcon>folder</mat-icon>
<div matListItemTitle>hello</div>
<div matListItemLine>world</div>
</a>

<!-- Broken styles -->
<a mat-list-item role="listitem">
<app-list-item />
</a>
</mat-nav-list>




Styling of the second item is broken. I don't want to fix this by hacky css. Is there a proper way? Stackblitz

Excerpt:

@Component({
selector: "app-list-item",
template: `
<mat-icon matListItemIcon>folder</mat-icon>
<div matListItemTitle>hello</div>
<div matListItemLine>world</div>
`,
standalone: true,
imports: [MatListModule, MatIconModule, RouterLink],
})
export class ListItem {}

@Component({
selector: "list-overview-example",
template: `
<mat-nav-list role="list">
<!-- working -->
<a mat-list-item role="listitem">
<mat-icon matListItemIcon>folder</mat-icon>
<div matListItemTitle>hello</div>
<div matListItemLine>world</div>
</a>

<!-- Broken styles -->
<a mat-list-item role="listitem">
<app-list-item />
</a>
</mat-nav-list>
`,
standalone: true,
imports: [MatListModule, MatIconModule, RouterLink, ListItem],
})
export class ListOverviewExample {}


Here is the demo: https://stackblitz.com/edit/3ruxqq?file=src/example/list-overview-example.html

Continue reading...