title: Angular Material 7 Drag and Drop x and y coordinates
body: <p>I have a container with an element inside it.  I want to be able to drag the element to another location inside the container and see the new x and y coordinates (where x=0 and y=0 is the top left corner of the container).</p>
  
  <p>I have a basic stackblitz set up at <a href="https://stackblitz.com/edit/material-6-mjrhg1" rel="noreferrer">https://stackblitz.com/edit/material-6-mjrhg1</a>, but it won't show the entire event object in the console ("object too large").  In my actual application, I can look through the entire event object, but I can't find any properties describing the new x and y locations.</p>
  
  <p>The basic setup is this:</p>
  
  <pre><code>&lt;div style="height: 200px; width=200px; background-color: yellow" class="container"&gt;
    &lt;div 
      style="height: 20px; width: 20px; background-color: red; z-index: 10" 
      cdkDrag 
      cdkDragBoundary=".container"
      (cdkDragEnded)="onDragEnded($event)"&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I have also tried some of the other events, but cdkDragEnded makes the most sense to me.</p>
  
  <p>Any ideas what property to check to find the x and y coordinates, or should I be using a different event / approach?</p>