feat(modals): add an options to append modals to element

[zl810881283]

I follow the modal doc, and find that I should do a small hack in the root component, which is need in my project. I wonder whether I can set modals to child component. what should I do?

import {Component, ViewContainerRef} from '@angular/core';

@Component({selector:'app-root'})
class AppRoot {
  public constructor(viewContainerRef:ViewContainerRef) {
    // You need this small hack in order to catch application root view container ref
    this.viewContainerRef = viewContainerRef;
  }
}

[zl810881283]

I want to make it clear that both common modal and child modal open with the whole document (maybe ),but I want to it show based on a subelement (like a child div)

[Dinistro]

@zl810881283 This hack is needed, so that the modal_component can access the DOM of the app-root, to add a backdrop.
But you can still add the modals in child-components, no worries.

[Dinistro]

@zl810881283 Sorry, I did not saw the second comment. So what do you mean with this:

show based on a subelement (like a child div)

[zl810881283]

@valorkin I want modal only show in #holder . do not dark the whole document

<div class="container">
  <div class="row">
    <div  class="col-md-4">
       some code...
    </div>
    <div  class="col-md-8" id="holder">
       some code...
       <div bsModal></div>
    </div>
  </div>
</div>

[valorkin]

@zl810881283 not yet implemented, but planned

[DethAriel]

@valorkin could you please clarify: is this issue about appending backdrop component to some given element? This is something I would like to have.

I was envisioning something like this maybe:

<div bsModal [config]="{ backdrop: boolean | 'static' | 'sibling' }">...</div>

[turnerguo]

Why not add a container property to support custom the target modal container?

<div bsModal [config]="{ container: <HTMLElement> }">...</div>

[valorkin]

@turnerguo more likely it will appear in modal service as target option