Pass props to front end framework from Astro component. | Astro Lounge | Page 1

jagged lintel Oct 11, 2022, 10:37 AM

#

Hello, i'm trying to mix an Astro app with some frontend framework as Angular / React / Vue and Svelte.
Eveything is working fine, i can communicate some data between them using rxjs.
But now, how to pass some data i fetch from my api from an Astro component to an Angular or a Svelte component for exemple ? I tried to use the right way from each framework but nothing happen. Title prop is working but if i change to another one like name or data, it is not working ... This is an example of my code.

hushed lava Oct 11, 2022, 11:03 AM

#

I dont get exactly what your problem is. In this stackblitz you can see how to pass props to a svelte component:
https://stackblitz.com/edit/github-4osrkt?file=src%2Fcomponents%2FCounter.svelte,src%2Fpages%2Findex.astro&on=stackblitz
The props in astro components are evaluated at build time, so remember that they are not reactive

Astro Framework Svelte Example - StackBlitz

Run official live example code for Astro Framework Svelte, created by Withastro on StackBlitz

jagged lintel Oct 11, 2022, 11:26 AM

#

hushed lava I dont get exactly what your problem is. In this stackblitz you can see how to p...

Thank you, it is working 😅 But when i try with angular and the @Input() syntax, it is not working. Any idea why ?

#

I created a git repo if you want to try it with the same environment: https://github.com/GiuntaLucas/astro-multiframework-boilerplate

GitHub

GitHub - GiuntaLucas/astro-multiframework-boilerplate

Contribute to GiuntaLucas/astro-multiframework-boilerplate development by creating an account on GitHub.

hushed lava Oct 11, 2022, 12:03 PM

#

No experience with angular🤷‍♂️

#Pass props to front end framework from Astro component.