I'm trying to render a standalone component into another non-standalone component. The problem is: the styles of the standalone component isn't being applied while rendering it dynamically, but it works fine if I do it in the HTML template. And it turns out that the usual rendering puts some random _ng* attributes on the rendered elements, which are missing when I do it dynamically. In my reproduction at https://stackblitz.com/edit/angular-ivy-gcjhpa, the component isn't even rendered. Now my question is: how to do it properly?
#How to (properly) render standalone components dynamically?
rugged stag
Take a look at this image below. The upper portion of the drawn line is rendered dynamically, while the bottom portion is rendered by adding the component's selector directly in the template.
woeful bison
g!badeyes @rugged stag Hard to read and copy and paste text from an image.
pure magnetBOT
@rugged stag Please do not post pictures of code (especially photos of a physical screen) as they are difficult to read and difficult to correct (as you cannot copy code from a screenshot to modify it).
woeful bison
What does "rendering it dynamically" mean?
rugged stag
What does "rendering it dynamically" mean?
createElement and append.
outer oar
In your repro you're not adding dynamically the component.
You're just appending a DOM node named test
To make what you want you should probably use ViewContainerRef
woeful bison
You need to do things the Angular way
https://angular.io/guide/dynamic-component-loader
rugged stag
In your repro you're not adding dynamically the component.
You're just appending...
Pardon? What does createElement do here?
outer oar
Create a DOM node with tagname as specified as argument
rugged stag
Create a DOM node with tagname as specified as argument
We'd do the same in the template as well. <test></test> would indeed render the component correctly. Why not in this case?
outer oar
Template gets parsed and relative components get generated.
rugged stag
You need to do things the Angular way
https://angular.io/guide/dynamic-component...
I went through that, but didn't understand it quite well. Perhaps someone can edit my blitz and show me how to do it the correct way?
woeful bison
Why do you want to do it this way? It is rather advanced and rare Angular
rugged stag
Template gets parsed and relative components get generated.
So how can we make it go through the exact lifecycle while in dynamic mode? Can you edit my blitz and show me how to use ViewContainerRef?
rugged stag
Why do you want to do it this way? It is rather advanced and rare Angular
My app needs to render some HTML contents pulled from the server. I could write all the logic in the template, but rather chose to outsource the presentation to its own component.
woeful bison
You poor poor soul. I do that. I wouldn't if I wasn't already.
I turn off AOT and bloat my app with the Compiler at runtime.
It is terrible.
Have you considered making Vue Custom Elements instead of doing something that Angular actively fights against you with?
outer oar
So how can we make it go through the exact lifecycle while in dynamic mode? Can ...
Thisis the closest simple way, but it's not exactly what you had, and I'm not sure it can help with your actual needings.
https://stackblitz.com/edit/angular-ivy-fyabeu?file=src%2Fapp%2Fapp.component.ts,src%2Fapp%2Ftest.component.ts
woeful bison
I consider Vue because the custom compiled components in my app don't really have to interact with the rest of the app directly. They can just go through Firebase Firestore
rugged stag
Have you considered making Vue Custom Elements instead of doing something that A...
I don't know Vue, so no.
woeful bison
React custom elements? Almost any other SPA has (last I checked) the ability to compile a template from the server into a component in the browser.
oh, and note that solutions that work in StackBlitz or in ng serve do not necessarily work with ng build
ruby bay
Custom Elements are a pretty good solution here - that's what angular.io does