CODEWITHSUNDEEP
angular
VISHAL DAGA
VISHAL DAGA

Reputation: 4289

Angular2 replacing component dynamically inside another component

I am trying to load a component in some other component which has its own view. The component that will be loading will be dynamic and based on some condition.

What I mean is replacing another component at same place inside the parent component.

For instance, In my AppComponent.html (below) I would like to load components which can again be replaced by some other component with some events.

AppComponent.html

<button class="button1">Button1 </button>
<button class="button2">Button2 </button>
<placeHolder></placeHolder>

AppComponent.ts

@Component({
    selector: '...',
    templateUrl: 'resources/app.component.html'
})
export class AppComponent{
     //on click of the button1, I want to load component c1, and on click of button2, I want to load component c2
}

(c1 and c2 are just any other component)

How to do this ? Any help is highly appreciated.

Upvotes: 3

Views: 5095

Answers (1)

G&#252;nter Z&#246;chbauer
G&#252;nter Z&#246;chbauer

Reputation: 657248

If you want to load and unload at the <placeHolder> tag, then DCL (DynamicComponentLoader) should be the right thing for you

See Angular 2 dynamic tabs with user-click chosen components for an example.

Upvotes: 1

Related Questions