You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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> `,})exportclassApp{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> `,})exportdefaultclassProjectAsHostComponent{}
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-hostngproject="[projectedElement]"><p>I should be projected</p></project-as-host>
Please provide a link to a minimal reproduction of the bug
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: goetzrobin/spartan#252
The text was updated successfully, but these errors were encountered:
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:
with project-as-host having the following source code:
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:
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
Please provide the environment you discovered this bug in (run
ng version
)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: goetzrobin/spartan#252
The text was updated successfully, but these errors were encountered: