Лучший способ расширить angular материальных компонентов

Question

Мне нужны некоторые указания по этому вопросу. Я создаю некоторые компоненты, используя angular фреймворк для материалов. Такие компоненты, как «app-email», «app-phone», «app-bla» ...

В случае app-phone моя первая попытка была:

<mat-form-field class="float-auto">
   <input matInput [placeholder]="placeholder"
     class="form-control"
     mask="(00) 0000-0000"
     [ngModel]="value">
    <mat-icon matSuffix>phone</mat-icon>
</mat-form-field>

Это отлично работает и отображает значок телефона во входных данных.

Но мне нужно было взломать атрибут placeholder, чтобы я мог использовать его в своем компоненте:

<app-phone placeholder="Phone" formControlName="phone"></app-phone>

Что я нужно сделать, чтобы избежать этого, не теряя обертку "mat-form-field"?

Answer 1

Вы можете взять ввод заполнителя в свой компонент, а затем связать его с html заполнителем

<!-- <app-phone placeholder="Phone" formControlName="phone"></app-phone> -->

<app-phone  phoneInputData="dataObject" formControlName="phone"></app-phone>

, так что теперь в app-phone componentnent.ts вы можете взять @Input() placeholder:string, а затем то же самое можно связать в app-phone.component. html вот так

@Input phoneInputData:Object;

<!--  using [placeholder]="{{placeholder}}" binding  -->
<!-- <mat-form-field class="float-auto">
   <input matInput [placeholder]="{{placeholder}}"
     class="form-control"
     mask="(00) 0000-0000"
     [ngModel]="value">
    <mat-icon matSuffix>phone</mat-icon>
</mat-form-field>
-->

<mat-form-field class="float-auto">
   <input matInput [placeholder]="{{phoneInputData.placeholder}}"
     class="form-control"
     mask="(00) 0000-0000"
     [ngModel]="value">
    <mat-icon matSuffix>phone</mat-icon>
</mat-form-field>