Angular ng-content not working with mat-form-field

My goal:

I'm trying to build a reusable mat-form-field with a clear button.

How I tried achieving my goal:

I created a "mat-clearable-input" component and used it like this:

<mat-clearable-input>
        <mat-label>Put a Number here pls</mat-label>
        <input matInput formControlName="number_form_control">
    </mat-clearable-input>

mat-clearable-input.component.html

<mat-form-field>
    <ng-content></ng-content>
</mat-form-field>

Expected result:

the ng-content tag takes the label and the input and puts them inside the mat-form-field tag.

Actual result:

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)

It looks like I'm missing something and I'm not using correctly the ng-content tag.

I wasn't able to locate the documentation for the ng-content tag on the angular website.

Thank you for any help.

EDIT AFTER ANSWER BELOW

So I tried this suggested method:

export class MatClearableInputComponent implements OnInit {
  @ContentChild(MatFormFieldControl) _control: MatFormFieldControl<any>;
  @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;
  }

}

unfortunately, when I try to use this in a form it still fails with the error "Error: mat-form-field must contain a MatFormFieldControl."

Code where i try to use this component in a form:

<mat-clearable-input>
    <mat-label>Numero incarico</mat-label>
    <buffered-input matInput formControlName="numero"></buffered-input>
</mat-clearable-input>

Repro on stackblitz: https://stackblitz.com/edit/angular-material-starter-xypjc5?file=app/clearable-form-field/clearable-form-field.component.html

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.

EDIT AFTER OPTION 2 WAS POSTED

I tried doing this:

<mat-form-field>
  <input matInput hidden>
  <ng-content></ng-content>
</mat-form-field>

It works, but then when i added a mat-label to my form field, like this:

<mat-clearable-input>
        <mat-label>Numero incarico</mat-label>
        <buffered-input matInput formControlName="numero"></buffered-input>
    </mat-clearable-input>

the label is never floating and it's just staying there as a normal span the whole time.

So i tried assigning to the this._matFormField._control._label the content child with the label but that didn't work because _label is private and there is no setter for it.

It looks like I'm out of luck and this can't be done in Angular without going through a lot of effort.

If you have any further ideas feel free to fork the stackblitz and try!

from Angular ng-content not working with mat-form-field