Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
goetzrobin opened this issue Apr 19, 2024 · 0 comments
Assignees
Labels
area: core Issues related to the framework runtime core: content projection
Milestone

Comments

@goetzrobin
Copy link

goetzrobin commented Apr 19, 2024

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: goetzrobin/spartan#252

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
area: core Issues related to the framework runtime core: content projection
Projects
None yet
Development

No branches or pull requests

3 participants