title: Angular/Material mat-form-field custom component - matSuffix in ng-content
body: <p>My idea was to have basic component providing some functionality and  add <code>matSuffix</code> and <code>&lt;mat-hint&gt;</code> options as necessary. The component HTML is:</p>
  <pre><code>&lt;mat-form-field&gt;
    &lt;textarea matInput matTextareaAutosize matAutosizeMinRows=&quot;1&quot; matAutosizeMaxRows=&quot;3&quot;
      [placeholder]=&quot;placeholder&quot; [formControl]=&quot;inputField&quot;&gt;&lt;/textarea&gt;
    &lt;ng-content&gt;&lt;/ng-content&gt;
  &lt;/mat-form-field&gt;
  </code></pre>
  <p>However when I am using this in parent HTML template as</p>
  <pre><code>&lt;my-component ...&gt;
    &lt;button matSuffix ...&gt;&lt;mat-icon&gt;something&lt;/mat-icon&gt;&lt;/button&gt;
    &lt;mat-hint&gt;Press Ctrl+Enter to finish input&lt;/mat-hint&gt;
  &lt;/my-component&gt;
  </code></pre>
  <p>The button and hint is rendered inside <code>mat-form-field</code> and not as suffix or hint.</p>
  <p>Anyone, please?</p>
  <p>Edit: <a href="https://stackblitz.com/edit/angular-wywqpq" rel="nofollow noreferrer">Stackblitz</a></p>