components icon indicating copy to clipboard operation
components copied to clipboard

bug(mat-list-item): Version 15 breaks the ability to have mat-list-item in an ngTemplate

Open jpike88 opened this issue 3 years ago • 0 comments

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

jpike88 avatar Nov 18 '22 07:11 jpike88