3

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.

VISHAL DAGA
  • 4,132
  • 10
  • 47
  • 53
  • Please add some code that demonstrates what you try to accomplish. – Günter Zöchbauer Apr 27 '16 at 14:52
  • Günter - At first glance, I thought it was a lot different topic (http://stackoverflow.com/questions/36325212/angular-2-dynamic-tabs-with-user-click-chosen-components), 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 Apr 27 '16 at 15:17
  • If you want to load and unload at the `` tag then DCL (DynamicComponentLoader) should be the right thing for you. – Günter Zöchbauer Apr 27 '16 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 Apr 27 '16 at 15:29
  • DCL changed quite a bit in beta.16. I have yet to update the linked answer. http://stackoverflow.com/questions/35170985/how-to-call-an-event-in-parent-component-from-child-component-which-is-loaded-us is already updated in case you need it immediately. – Günter Zöchbauer Apr 27 '16 at 15:35

1 Answers1

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.

Community
  • 1
  • 1
Günter Zöchbauer
  • 623,577
  • 216
  • 2,003
  • 1,567