angular material md-datepicker inside bootstrap modal

Question

I am tring to use Angular material md-datepicker inside a Bootstrap modal but, on clicking the date the modal popup hides. How can i solve that problem?

<

Answer 1

The accepted answer doesn't work for @angular/material 5.0.0-rc0 .

Instead add in the .component.scss file:

::ng-deep .cdk-overlay-container{
    z-index: 1200 !important;
}

::ng-deep (or /deep/) prefix needs to be used because of the view encapsulation. Note that deep is marked as deprecated in the documentation and using cdk-overlay-container is probably not a good practice since future material module changes might break it.