CODEWITHSUNDEEP
angular
SmartestVEGA
SmartestVEGA

Reputation: 8889

Dynamically inserting components in angular

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?

Upvotes: 0

Views: 52

Answers (1)

jitender
jitender

Reputation: 10429

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

Upvotes: 1

Related Questions