I have an angular app, it has a bundle and a piece of HTML that contains a root selector
<app></app>
where the app is bootstrapped.
Is it possible to somehow render a component from that app outside this app container? In the HTML, having something like
<component-name></component-name>
The reason for this is this app is being loaded externally for analysing only components one by one, and not the app as a whole, sort of like a style guide for the components in the app. So I load the bundle and I want to be able to render only a component that the user chooses.
Just add any components you need to the bootstrap
array that is passed to NgModule:
@NgModule({
declarations: [AppComponent, ContactFormComponent],
imports: [...],
providers: [SharedService],
bootstrap: [AppComponent, ContactFormComponent]
})
export class AppModule {}
and now voila this works:
<html><body>
<app-contact-form></app-contact-form>
============================================
<app-root></app-root>
</body></html>
Just learned this from the plunker in the answer Günter linked above. very cool. tested with angular 6
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With