title: The drag and drop function doesn't work in Angular
body: <p>I am using Angular 7 and following this tutorial.
  <a href="https://material.angular.io/cdk/drag-drop/overview" rel="nofollow noreferrer">Tutorial</a></p>
  
  <p>I copy and paste the sample source code but it's not working.
  The box is displayed but I cannot move it.</p>
  
  <p>Here is the source code.</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;div class="example-box" cdkDrag&gt;
     Drag me around
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>  .example-box {
       width: 200px;
       height: 200px;
       border: solid 1px #ccc;
       color: rgba(0, 0, 0, 0.87);
       cursor: move;
       display: flex;
       justify-content: center;
       align-items: center;
       text-align: center;
       background: #fff;
       border-radius: 4px;
       position: relative;
       z-index: 1;
       transition: box-shadow 200ms cubic-bezier(0, 0, 0.2, 1);
       box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2),
                   0 2px 2px 0 rgba(0, 0, 0, 0.14),
                   0 1px 5px 0 rgba(0, 0, 0, 0.12);
  }
  .example-box:active {
    box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2),
                0 8px 10px 1px rgba(0, 0, 0, 0.14),
                0 3px 14px 2px rgba(0, 0, 0, 0.12);
  }
  </code></pre>
  
  <p>Component file(.ts)</p>
  
  <pre><code>import {Component} from '@angular/core';
  
  /**
   * @title Drag&amp;Drop with a handle
   */
  @Component({
    selector: 'map-manifest',
    templateUrl: './map.manifest.component.html',
    styleUrls: ['./map.manifest.component.css'],
  })
  export class MapManifestComponent {}
  </code></pre>
  
  <p>Anybody know what's the problem?
  Please help me if you know this.</p>