Use angular2-modal on a non-top level component

[dolanmiu]

All examples I've seen is using this library on a top level component (for example app-component). But I want to use it in a nested component. For example, I want to open a login modal inside the navbar component.

How would I do this? It gives an error every time I try to do it in a nested component:

EXCEPTION: Uncaught (in promise): Error: Default view container not set. Add the "defaultOverlayTarget" directive to the application root component template (e.g: <span defaultOverlayTarget></span>. You can also set it manually using the "Overlay" service "defaultViewContainer" property.

[gedarufi]

Just add this to your html on the component container

<div class="container-fluid" **defaultOverlayTarget**></div>

[ladmini]

@gedarufi There will be some grammatical errors with your instruction. Any updates?

[bcharfi]

In your root template add this: <span defaultOverlayTarget></span> Set defaultViewContainer property is on the modal.overlay object in the root component constructor:

constructor(vcRef: ViewContainerRef, public modal: Modal) {
    modal.overlay.defaultViewContainer = vcRef;
}