title: Angular material - datepicker renders in body instead of containg div
body: <p>I have a problem with the Angular Material datepicker component.</p>
  <p>I have created a custom component:</p>
  <pre class="lang-html prettyprint-override"><code>&lt;div class=&quot;custom-date-picker&quot;&gt;
      &lt;mat-form-field&gt;
          &lt;input matInput [matDatepicker]=&quot;picker&quot; placeholder=&quot;Choose a date&quot;&gt;
          &lt;mat-datepicker-toggle matSuffix [for]=&quot;picker&quot;&gt;&lt;/mat-datepicker-toggle&gt;
          &lt;mat-datepicker #picker&gt;&lt;/mat-datepicker&gt;
      &lt;/mat-form-field&gt;
  &lt;/div&gt;
  </code></pre>
  <p>When I add it to my modal, picker opens inside body instead of modal. So it is always on the bottom of the page, under modal overlay. Adding z-index wont work because it is attached to body, not to my containing div or even modal.</p>