title: Get the user selected value from Angular Material's mat-calendar or rendering a mat-datepicker in a component
body: <p>I was just wanting to ask if anyone had any experience with working with the <code>&lt;mat-calendar&gt;</code> from Angular Material? I want a calendar component nested in my html template rather than displayed in a Popup / Modal when clicking a button or some kind of toggle. The <a href="https://material.angular.io/components/datepicker/overview" rel="nofollow noreferrer">Material Datepicker</a> doesn't seem to support this (unless I missed it) so I thought that I could add a <code>mat-calendar</code> to my form, then knowing there is a <code>userSelected</code> output I could "listen" for that and run a method to get the selected value...</p>
  
  <p>In my HTML...</p>
  
  <pre><code>&lt;div&gt;
      Select a day:
      &lt;mat-calendar #myDate (userSelection)="getChangedValue($event)"&gt;&lt;/mat-calendar&gt;
  &lt;div&gt;
  </code></pre>
  
  <p>In my component</p>
  
  <pre><code>getChangedValue(e)  {
      console.log(e); // this is always "undefined"
    }
  </code></pre>
  
  <p>However on looking through the <code>mat-calendar</code> code I can see the output "userSelection" returns void so I can't get the selected value there and the rendered calendar aesthetically isn't great and will require some extensive CSS work. I was just curious to know if anyone has worked on this before and could shed some light on how I can get the selected value (i.e. the selected date) from the mat-calendar - this may save me some time whilst I go through the documentation. Any advice would be appreciated.</p>