feat(cdk/scrolling): improve template type checking for CdkVirtualForOf Directive #26609
Description
Feature Description
Feature Description
The CdkVirtualForOf Directive in the "@angular/cdk/scrolling" module does not implement the ng-template context guard, as it is done at the *ngFor Structual Directive in the Angular Common package.
Thus, when using the *cdkVirtualFor Structual Directive in an HTML Template, the type of the item is "any".
Expample:
<cdk-virtual-scroll-viewport itemSize="50" class="example-viewport">
<div *cdkVirtualFor="let item of items" class="example-item">{{ item }}</div>
</cdk-virtual-scroll-viewport>
Although the type of the property "items" is "string[]", the type of "item" is "any".
Expected behavior
The type of the property "item" should be "string" when the type of "items" is "string[]".
Suggested solution
Implement the static method "ngTemplateContextGuard" for the CdkVirtualForOf Directive.
public static ngTemplateContextGuard<T>(
directive: CdkVirtualForOf<T>,
context: unknown,
): context is CdkVirtualForOfContext<T> {
return true;
}
https://angular.io/guide/structural-directives#typing-the-directives-context
If you want, I can create a PR therefore, because I tried this solution already.
Use Case
No response