Angular2 replacing component dynamically inside another component

Question

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.

Please add some code that demonstrates what you try to accomplish. — Günter Zöchbauer
– Günter Zöchbauer, Commented Apr 27, 2016 at 14:52
Günter - At first glance, I thought it was a lot different topic (stackoverflow.com/questions/36325212/…), but I guess in your answer where you have have used DynamicComponentLoader, I will try with this and hopefully that will work for me.. though I have made edits as you had asked for more specific query. Hope this makes sense for you. — VISHAL DAGA
– VISHAL DAGA, Commented Apr 27, 2016 at 15:17
If you want to load and unload at the <placeHolder> tag then DCL (DynamicComponentLoader) should be the right thing for you. — Günter Zöchbauer
– Günter Zöchbauer, Commented Apr 27, 2016 at 15:26
Okay, thanks... if you like you can write this as answer since I think this would be a more generic answer, and I think it will be helpful for other users. — VISHAL DAGA
– VISHAL DAGA, Commented Apr 27, 2016 at 15:29
DCL changed quite a bit in beta.16. I have yet to update the linked answer. stackoverflow.com/questions/35170985/… is already updated in case you need it immediately. — Günter Zöchbauer
– Günter Zöchbauer, Commented Apr 27, 2016 at 15:35

Community · Accepted Answer · 2017-05-23 12:02:24Z

1

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.

edited May 23, 2017 at 12:02

CommunityBot

11 silver badge

answered Apr 27, 2016 at 15:34

Günter Zöchbauer

661k235 gold badges2.1k silver badges1.6k bronze badges

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

Collectives™ on Stack Overflow

Angular2 replacing component dynamically inside another component

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related