Pass template code to child component in angular

Question

I have a component containing a formGroup with the following component

<input-number placeholder="Number" formControlName="NumericValue" required></input-number>
                  <button class="infoSuffix" type="button" matSuffix mat-icon-button aria-label="info" (click)="OpenInfo()">
                <mat-icon>info_outline</mat-icon>
              </button>

input number is a wrapper for <input type="text">

 <mat-form-field class="full-width">
    <input
      type="text"
      ..>
      </mat-form-field>

For the component to correctly render in need to pass the button in the childcomponent like this:

    <input
      type="text"
      ..>
<button class="infoSuffix" type="button" matSuffix mat-icon-button aria-label="info" (click)="OpenInfo()">
                    <mat-icon>info_outline</mat-icon>
                  </button>
      </mat-form-field>

How can i achive this ? Should i just pass an Config object and render it, or is there a better way

Answer 1

For me the solution was to implement custom form field control in the controller like described here https://material.angular.io/guide/creating-a-custom-form-field-control#-code-ngcontrol-code- then the following code worked

<mat-form-field>
<input-number placeholder="Number" formControlName="NumericValue" required></input-number>
   <button class="infoSuffix" type="button" matSuffix mat-icon-button aria-label="info" (click)="OpenInfo()">
        <mat-icon>info_outline</mat-icon>
   </button>
</mat-form-field>