Dynamically inserting components in angular

Question

I have the following TS file:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms'
import { AppComponent } from './app.component.js';
import { HeroComponent } from './hero.component.js';
import { DummyComponent } from './dummy.component.js';
import { MyComponent } from './my.component.js';
@NgModule({

    imports: [BrowserModule, FormsModule],
    declarations: [AppComponent, HeroComponent, DummyComponent, MyComponent],
    providers: [],
    bootstrap: [AppComponent, HeroComponent, DummyComponent, MyComponent]
})
export class AppModule { }

I want to replace the value in bootstrap array based on some conditions in UI.

bootstrap: [AppComponent, HeroComponent, DummyComponent, MyComponent]

All the following values

AppComponent, HeroComponent, DummyComponent, MyComponent

Should be populated through a global variable.

Could you please provide some light on this?

jitender · Accepted Answer · 2017-10-18 11:54:30Z

1

I am not sure are you looking for the same thing

You can use ngDoBootstrap

something like

export class AppModule {
  ngDoBootstrap(appRef:ApplicationRef){
    if(yourCondition=true)
    appRef.bootstrap(AppComponent);
    appRef.bootstrap(App2);
  }
}

Checkout this fiddle

answered Oct 18, 2017 at 11:54

jitender

10.4k1 gold badge22 silver badges49 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Dynamically inserting components in angular

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related