bug(mat-list-item): Version 15 breaks the ability to have mat-list-item in an ngTemplate
Is this a regression?
- [X] Yes, this behavior used to work in the previous version
The previous version in which this bug was not present was
Anything before v15
Description
Defining a mat-list-item in an ngTemplate used to work fine, but it now shows nothing on the page and errors.
Reproduction
Code that could work before:
<mat-selection-list>
<ng-template
[ngTemplateOutlet]="nodeTemplateRef"
[ngTemplateOutletContext]="{ element: node }"
>
</ng-template>
</mat-selection-list>
<ng-template
#nodeTemplateRef
let-element="element"
let-parentSection="parentSection"
let-child="child"
>
<mat-list-item
*ngIf="element.id"
(click)="goToBuilderSection(element.id)"
[ngClass]="{ isCurrent: element.id === builder.currentSection.id }"
>
// stuff in here
</mat-list-item>
</ng-template>
Now I have to do this as a workaround:
<ng-template
[ngTemplateOutlet]="nodeTemplateRef"
[ngTemplateOutletContext]="{ element: node }"
>
</ng-template>
<ng-template
#nodeTemplateRef
let-element="element"
let-parentSection="parentSection"
let-child="child"
>
<mat-selection-list> // move this line here
<mat-list-item
*ngIf="element.id"
(click)="goToBuilderSection(element.id)"
[ngClass]="{ isCurrent: element.id === builder.currentSection.id }"
>
// stuff in here
</mat-list-item>
</mat-selection-list> // move this line here
</ng-template>```
### Expected Behavior
I expected this not to break, and continue to work fine without complaining
### Actual Behavior
this error, and nothing shows:
errorHandler.ts:23 R3InjectorError(AppModule)[MatListBase -> MatListBase -> MatListBase]: NullInjectorError: No provider for MatListBase! handleError @ errorHandler.ts:23 (anonymous) @ core.mjs:27715 invoke @ zone.js:372 run @ zone.js:134 runOutsideAngular @ core.mjs:26501 tick @ core.mjs:27715 (anonymous) @ core.mjs:27552 invoke @ zone.js:372 onInvoke @ core.mjs:26602 invoke @ zone.js:371 run @ zone.js:134 run @ core.mjs:26456 next @ core.mjs:27551 next @ Subscriber.js:91 _next @ Subscriber.js:60 next @ Subscriber.js:31 (anonymous) @ Subject.js:34 errorContext @ errorContext.js:19 next @ Subject.js:27 emit @ core.mjs:23077 checkStable @ core.mjs:26524 onHasTask @ core.mjs:26619 hasTask @ zone.js:426 _updateTaskCount @ zone.js:447 _updateTaskCount @ zone.js:274 runTask @ zone.js:195 drainMicroTaskQueue @ zone.js:585 invokeTask @ zone.js:491 invokeTask @ zone.js:1661 globalCallback @ zone.js:1692 globalZoneAwareCallback @ zone.js:1725 Show 30 more frames errorHandler.ts:24 NullInjectorError: R3InjectorError(AppModule)[MatListBase -> MatListBase -> MatListBase]: NullInjectorError: No provider for MatListBase! at NullInjector.get (core.mjs:8235:27) at R3Injector.get (core.mjs:8685:33) at R3Injector.get (core.mjs:8685:33) at R3Injector.get (core.mjs:8685:33) at ChainedInjector.get (core.mjs:13935:36) at lookupTokenUsingModuleInjector (core.mjs:3543:39) at getOrCreateInjectable (core.mjs:3588:12) at Module.ɵɵdirectiveInject (core.mjs:10977:12) at NodeInjectorFactory.MatListItem_Factory [as factory] (list.mjs:53:107) at getNodeInjectable (core.mjs:3773:44)
### Environment
- Angular:15.0.0
- CDK/Material: 15.0.0
- Browser(s):Chrome latest
- Operating System (e.g. Windows, macOS, Ubuntu):macOS