title: mat-error put to separate component not rendering properly
body: <p>I want to use mat-errors to render server-side errors in my Angular 5 SPA.</p>
  
  <p>This is what I've got so far, and it works</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;mat-form-field class="col-6"&gt;
      &lt;input matInput formControlName="firstName"&gt;
      &lt;mat-error [hidden]="!form.controls.firstName.hasError('required')"&gt;This field is required and cannot be empty&lt;/mat-error&gt;
      &lt;mat-error [hidden]="!form.controls.firstName.hasError('other')"&gt;Some other error&lt;/mat-error&gt;
  &lt;/mat-form-field&gt;
  </code></pre>
  
  <p>Every field of the form looks similar. Input field and many mat-error tags below. There is lots of repetitive code attached to single input field. Also, adding a new error message would cause adding it in the every field that needs it.
  I think it is a good space to introduce component that manages error messages, and injected with form control it decides which error to show (I want to have common error messages for all fields).</p>
  
  <p>So I would like to have it this way</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;mat-form-field class="col-6"&gt;
      &lt;input matInput formControlName="firstName"&gt;
      &lt;app-mat-errors [field]="form.controls.firstName"&gt;&lt;/app-map-errors&gt;
  &lt;/mat-form-field&gt;
  </code></pre>
  
  <p>and in the <code>app-mat-errors</code> component template have all the <code>mat-error</code> code that we used to have in every single field</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;mat-error [hidden]="!field.hasError('required')"&gt;This field is required and cannot be empty&lt;/mat-error&gt;
  &lt;mat-error [hidden]="!field.hasError('other')"&gt;Some other error&lt;/mat-error&gt;
  etc....
  </code></pre>
  
  <p>With this approach I'm having a problem with rendering component correctly. </p>
  
  <p>When put to the <code>&lt;app-mat-errors&gt;</code>, <code>&lt;mat-error&gt;</code> tags are embedded in <code>app-mat-errors</code> tag and are not showing properly (they are not styled and visible all the time, even when there is no error)</p>
  
  <p>Is there any way angular can render component wihout parent tag? Or you have any ideas how to make it working properly? Thanks in advance.</p>