如何将HTMLElement像Angular Material一样放在组件内部

Question

In AngularMaterial, I saw code like this.

<form class="example-form">
  <mat-form-field class="example-full-width">
    <input matInput placeholder="Favorite food" value="Sushi">
  </mat-form-field>
</form>

There are <input> element inside <mat-form-field> component.

Usually, when I wrote element inside component, It wil be ignored.

How can I do this.

Answer 1

Using <ng-content></ng-content> to slot your element.

https://medium.com/claritydesignsystem/ng-content-the-hidden-docs-96a29d70d11b