title: Template Variable Causing Template Parse Error: There is no directive with "exportAs" set to "#start_date"
body: <p>Attempting to build a <a href="https://material.angular.io/components/datepicker/overview" rel="nofollow noreferrer">Material Design datepicker</a> following their docs.</p>
  
  <p>Note: the <strong>end goal</strong> is to bind the datepicker input to a component variable, however I can't get past this most basic part.</p>
  
  <p>I'm sure I'm doing something dumb!</p>
  
  <p>Error in console:</p>
  
  <blockquote>
    <p><code>Uncaught Error: Template parse errors:
    There is no directive with "exportAs" set to "#start_date" ("Change)="updateFilters()" placeholder="Search"/&gt;&lt;input mat-datepicker="start_date"/&gt;&lt;mat-datepicker [ERROR -&gt;]#start_date="#start_date"&gt;&lt;/mat-datepicker&gt;&lt;select name="type" [(ngModel)]="filters.fields.type" (ngM"): ng:///AppModule/AccountingComponent.html@0:574</code></p>
  </blockquote>
  
  <p>Pug file: </p>
  
  <pre><code>.filters
    input(mat-datepicker="start_date")
    mat-datepicker(#start_date)
  </code></pre>
  
  <p>Transpiled HTML:</p>
  
  <pre><code>&lt;div class="filters"&gt;
      &lt;input mat-datepicker="start_date" /&gt;
      &lt;mat-datepicker #start_date="#start_date"&gt;&lt;/mat-datepicker&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Clearly Angular doesn't like the <code>#start_date</code> attribute on the input, but my understanding of <a href="https://angular.io/guide/template-syntax#ref-vars" rel="nofollow noreferrer">template reference variables</a> is weak, and I've been unable to find a resource that helps sort out what I'm doing wrong.</p>
  
  <p>What needs to change to make this work properly?</p>
  
  <p><strong>NOTE</strong> - I'm using Webpack 3, with <a href="https://github.com/willyelm/pug-html-loader" rel="nofollow noreferrer">pug-html-loader</a> to transpile pug => html.</p>