feat(compiler): Add ngProjectAs to Directive and Component metadata

Which @angular/* package(s) are relevant/releated to the feature request?

compiler

Description

Presently we can specify ngProjectAs on an element to trick ViewChild and <ng-container> into picking it up.

Example:

<mat-form-field> <my-bundle-o-errors ngProjectAs="mat-error"> </my-bundle-o-errors> </mat-form-field>

However, this requires correctly repeating ngProjectAs=“mat-error” on every invocation of that component.

Proposed solution

By adding ngProjectAs to Directive, we can allow the renamed projection to work for every instance of a component or directive.

The behavior would be the same as when it appears on an element (effectively setting ngProjectAs on the host element at compile time).

Alternatives considered

If desired, this could be limited to Component rather than Directive metadata.

The code snipped above can be augmented with runtime assertions that ensure ngProjectAs is present:

@Input() ngProjectAs?: string;

ngOnInit() {
  if (this.ngProjectAs !== 'mat-error') throw new Error('ngProjectAs="mat-error" is required');
}

Still not as nice as being able to include it in the component’s own definition.

[kseamon]

The behavior could be additive - projection could match both the actual as well as the “projected as” signature.

Often times, the projecting component is not owned by the same entity as the new directive/component being implemented. In my case, the motive for this is being able to use the mat-error slot in mat-form-field.

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity. Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}