title: Angular ng-content not working with mat-form-field
body: <p><strong>My goal:</strong></p>
  <p>I'm trying to build a reusable mat-form-field with a clear button.</p>
  <p><strong>How I tried achieving my goal:</strong></p>
  <p>I created a &quot;mat-clearable-input&quot; component and used it like this:</p>
  <pre><code>&lt;mat-clearable-input&gt;
          &lt;mat-label&gt;Put a Number here pls&lt;/mat-label&gt;
          &lt;input matInput formControlName=&quot;number_form_control&quot;&gt;
      &lt;/mat-clearable-input&gt;
  </code></pre>
  <p><strong>mat-clearable-input.component.html</strong></p>
  <pre><code>&lt;mat-form-field&gt;
      &lt;ng-content&gt;&lt;/ng-content&gt;
  &lt;/mat-form-field&gt;
  </code></pre>
  <p><strong>Expected result</strong>:</p>
  <p>the ng-content tag takes the label and the input and puts them inside the mat-form-field tag.</p>
  <p><strong>Actual result</strong>:</p>
  <pre><code>Error: mat-form-field must contain a MatFormFieldControl.
      at getMatFormFieldMissingControlError (form-field.js:226)
      at MatFormField._validateControlChild (form-field.js:688)
      at MatFormField.ngAfterContentChecked (form-field.js:558)
      at callHook (core.js:2926)
      at callHooks (core.js:2892)
      at executeInitAndCheckHooks (core.js:2844)
      at refreshView (core.js:7239)
      at refreshComponent (core.js:8335)
      at refreshChildComponents (core.js:6991)
      at refreshView (core.js:7248)
  </code></pre>
  <p>It looks like I'm missing something and I'm not using correctly the ng-content tag.</p>
  <p>I wasn't able to locate the documentation for the ng-content tag on the angular website.</p>
  <p>Thank you for any help.</p>
  <p><strong>EDIT AFTER ANSWER BELOW</strong></p>
  <p>So I tried this suggested method:</p>
  <pre><code>export class MatClearableInputComponent implements OnInit {
    @ContentChild(MatFormFieldControl) _control: MatFormFieldControl&lt;any&gt;;
    @ViewChild(MatFormField) _matFormField: MatFormField;
    // see https://stackoverflow.com/questions/63898533/angular-ng-content-not-working-with-mat-form-field/
    ngOnInit() {
      this._matFormField._control = this._control;
    }
  
  }
  </code></pre>
  <p>unfortunately, when I try to use this in a form it still fails with the error &quot;Error: mat-form-field must contain a MatFormFieldControl.&quot;</p>
  <p>Code where i try to use this component in a form:</p>
  <pre><code>&lt;mat-clearable-input&gt;
      &lt;mat-label&gt;Numero incarico&lt;/mat-label&gt;
      &lt;buffered-input matInput formControlName=&quot;numero&quot;&gt;&lt;/buffered-input&gt;
  &lt;/mat-clearable-input&gt;
  </code></pre>
  <p>Repro on stackblitz: <a href="https://stackblitz.com/edit/angular-material-starter-xypjc5?file=app/clearable-form-field/clearable-form-field.component.html" rel="nofollow noreferrer">https://stackblitz.com/edit/angular-material-starter-xypjc5?file=app/clearable-form-field/clearable-form-field.component.html</a></p>
  <p>notice how the mat-form-field features aren't working (no outline, no floating label), also open the console and you'll see the error Error: mat-form-field must contain a MatFormFieldControl.</p>
  <p><strong>EDIT AFTER OPTION 2 WAS POSTED</strong></p>
  <p>I tried doing this:</p>
  <pre><code>&lt;mat-form-field&gt;
    &lt;input matInput hidden&gt;
    &lt;ng-content&gt;&lt;/ng-content&gt;
  &lt;/mat-form-field&gt;
  </code></pre>
  <p>It works, but then when i added a mat-label to my form field, like this:</p>
  <pre><code>&lt;mat-clearable-input&gt;
          &lt;mat-label&gt;Numero incarico&lt;/mat-label&gt;
          &lt;buffered-input matInput formControlName=&quot;numero&quot;&gt;&lt;/buffered-input&gt;
      &lt;/mat-clearable-input&gt;
  </code></pre>
  <p>the label is never floating and it's just staying there as a normal span the whole time.</p>
  <p>So i tried assigning to the <code>this._matFormField._control._label</code> the content child with the label but that didn't work because _label is private and there is no setter for it.</p>
  <p>It looks like I'm out of luck and this can't be done in Angular without going through a lot of effort.</p>
  <p>If you have any further ideas feel free to fork the stackblitz and try!</p>
  <p><strong>Edit after @evilstiefel answer</strong></p>
  <p>the solution works only for native <code>&lt;input matInput&gt;</code>.
  When I try replacing that with my custom input component, it doesn't work anymore.</p>
  <p>Working setup:</p>
  <pre><code>&lt;mat-form-field appClearable&gt;
      &lt;mat-label&gt;ID incarico&lt;/mat-label&gt;
      &lt;input matInput formControlName=&quot;id&quot;&gt;
  &lt;/mat-form-field&gt;
  </code></pre>
  <p>Same setup but with my custom &quot;buffered-input&quot; component (not working :( )</p>
  <pre><code>&lt;mat-form-field appClearable&gt;
      &lt;mat-label&gt;ID incarico&lt;/mat-label&gt;
      &lt;buffered-input matInput formControlName=&quot;id&quot;&gt;&lt;/buffered-input&gt;
  &lt;/mat-form-field&gt;
  </code></pre>
  <p>The console logs this error when I click on the clear button:</p>
  <pre><code>TypeError: Cannot read property 'ngControl' of undefined
      at ClearableDirective.clear (clearable.directive.ts:33)
      at ClearButtonComponent.clearHost (clearable.directive.ts:55)
      at ClearButtonComponent_Template_button_click_0_listener (clearable.directive.ts:47)
      at executeListenerWithErrorHandling (core.js:14293)
      at wrapListenerIn_markDirtyAndPreventDefault (core.js:14328)
      at HTMLButtonElement.&lt;anonymous&gt; (platform-browser.js:582)
      at ZoneDelegate.invokeTask (zone-evergreen.js:399)
      at Object.onInvokeTask (core.js:27126)
      at ZoneDelegate.invokeTask (zone-evergreen.js:398)
      at Zone.runTask (zone-evergreen.js:167)
  </code></pre>