Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Render Angular component outside the main app

Tags:

angular

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.

like image 694
Joao Garin Avatar asked Jul 22 '16 12:07

Joao Garin


1 Answers

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

like image 142
ryanrain Avatar answered Oct 24 '22 18:10

ryanrain