<mat-error> not usable when instantiated inside <ng-template>

Bug, feature request, or proposal:

Bug

What is the expected behavior?

It should be possible to use an ng-template with mat-error inside it to create a reusable error display template.

What is the current behavior?

When mat-error is included as part of an ng-template it is not rendered correctly.

What are the steps to reproduce?

StackBlitz starter (using latest npm release): https://stackblitz.com/edit/angular-jpmbve

<ng-template #errTempl let-ctl>
  <mat-error *ngIf="ctl.hasError('pattern')">test2</mat-error>
</ng-template>
<form novalidate [formGroup]="theForm">
  <mat-form-field>
    <mat-select placeholder="Platform (bugged)" formControlName="platform">
      <mat-option value="WST">WST</mat-option>
      <mat-option value="FTD">FTD</mat-option>
    </mat-select>
    <ng-template [ngTemplateOutlet]="errTempl"
                 [ngOutletContext]="{ $implicit: theForm.controls['platform'] }"></ng-template>
  </mat-form-field>
</form>

Note how the mat-error element is instantiated inside the ng-template - doing it this way causes the mat-error text to be displayed incorrectly.

What is the use-case or motivation for changing an existing behavior?

The use case is having a reusable error display template that can be attached to different fields with the same error logic.

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

Angular: 4.4.6 Angular animations: 4.4.6 Typescript: 2.5.3 Browser: Chrome 62.0.3202.75 (Official Build) (64-bit)

Is there anything else we should know?

[jelbourn]

If that works then it should be fine

[jelbourn]

This is the expected behavior of Angular. ng-template creates an inert template that can be grabbed and stamped out elsewhere. The content of the template does not “exist” in the view. Components like form-field need their content children to “exist” in order to see them.