ngProjectedAs not working when used as static host property inside @Component

[goetzrobin]

Which @angular/* package(s) are the source of the bug?

core

Is this a regression?

No

Description

https://angular.io/guide/content-projection#projecting-content-in-more-complex-environments

This article introduces the ngProjectedAs host attribute as a way to manage more complex content projection challenges.

I believe that if I set this as a static host attribute inside the host property of the @component this should work as it is a static attribute assigned to the host.

The example below demonstrates the issue:

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [ProjectToComponent, ProjectAsHostComponent],
  template: `
  <h2>In line ngProjectAs</h2>
  <project-to>
    <div ngProjectAs="[projectedElement]">I should be projected</div>
  </project-to>

  <h2>Static host property ngProjectAs</h2>
  <project-to>
    <project-as-host/>
  </project-to>
  `,
})
export class App {
  name = 'Angular';
}

with project-as-host having the following source code:

import { Component } from '@angular/core';

@Component({
  selector: 'project-as-host',
  standalone: true,
  host: {
    ngProjectAs: '[projectedElement]',
  },
  template: `
		<p>I should be projected</p>
	`,
})
export default class ProjectAsHostComponent {}

A curious observation.
If I change the host attribute to ngProject and leave out the As, in the html I see the following correct static binding:

<project-as-host ngproject="[projectedElement]"><p>I should be projected</p></project-as-host>

Please provide a link to a minimal reproduction of the bug

https://stackblitz.com/edit/stackblitz-starters-tzechz?file=src%2Fmain.ts

Please provide the exception or error you saw

There is no error. The content is just not projected anywhere.

Please provide the environment you discovered this bug in (run ng version)

Angular CLI: 17.3.5
Node: 18.18.0
Package Manager: npm 10.2.3
OS: linux x64

Angular: 17.3.5
... animations, cli, common, compiler, compiler-cli, core, forms
... platform-browser, router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1703.5
@angular-devkit/build-angular   17.3.5
@angular-devkit/core            17.3.5
@angular-devkit/schematics      17.3.5
@schematics/angular             17.3.5
rxjs                            7.8.1
typescript                      5.3.3
zone.js                         0.14.4

Anything else?

The motivation for this is to work around content projection with select is currently limited to hard coded strings. This is an issue with what we are trying to achieve for spartan/ui's select component that should ideally allow the user installing the dependency to configure a custom component to be projected as a trigger. More here: spartan-ng/spartan#252

[goetzrobin]

@pkozlowski-opensource please let me know if there is anything I can do to support this effort! Thanks already!

[goetzrobin]

@pkozlowski-opensource just wanted to follow up and see if there is anything we can do the development of this

[pkozlowski-opensource]

@goetzrobin host bindings don't have any effect on content projection (ex.: adding an attribute to a host binding also won't match node for projection). In this sense we don't want to add exceptions for ngProjectAs.

Instead we should error in cases someone tries to use ngProjectAs as a host binding.