Children elements in components with ng-content

[JesseRobinsonDev]

trafficstars

Which scope/s are relevant/related to the feature request?

astro-angular

Information

Unable to render child elements in Angular components using

Button component that I want to render children inside the button Button.ts:

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

@Component({
  standalone: true,
  template: `<button><ng-content></ng-content></button>`,
  styles: [],
})
export default class Button {}

index.astro:

---
import Layout from "../layouts/Layout.astro";
import Button from "../components/button/Button";
---

<Layout title="Astro">
  <Button><span>Click Me!</span></Button>
</Layout>

Unsure if there is a specific thing I need to import on the component, I've tried looking around but I can't find anything, wondering if anyone here can provide some insight

Describe any alternatives/workarounds you're currently using

No response

I would be willing to submit a PR to fix this issue

• [ ] Yes
• [ ] No

[brandonroberts]

Because of the way the components work with Angular in Astro, I'm not sure this is possible. On the server side, we are rendering the component similar to SSR, so the child content isn't ng-content as you'd expect with a normal component. Have to dig further into this to see if there's a solution.

[nicodejonghe]

Currently my workaround is. Keeping content projection in my library and create a wrapper component which i use in .astro files. Or is there any workaround for this issue? Because content projection is one of the must have core features

[brandonroberts]

Seems like there is a workaround in place for this