feat: add placeholder property to support custom placeholders

Author: Tom

src/app/app.component.html

@@ -6,6 +6,6 @@ <h1>Test Page</h1>
 
 <h1>Reactive form Test Page</h1>
 <div style="position: absolute; top: 60%; left: 50%; height: 50px; width: 50%;">
-  <mat-search-bar [formControl]="control"></mat-search-bar>
+  <mat-search-bar [formControl]="control" [placeholder]="'custom placeholder'"></mat-search-bar>
   <p>{{ control.value }}</p>
 </div>

src/app/ng-mat-search-bar/mat-search-bar/mat-search-bar.component.html

@@ -1,11 +1,11 @@
 <mat-form-field *ngIf="!formControl" class="mat-search_field" [@slideInOut]="searchVisible">
-  <input #input matInput type="text" placeholder="" [(ngModel)]="value" (ngModelChange)="updateChanges()"
+  <input #input matInput type="text" [placeholder]="placeholder" [(ngModel)]="value" (ngModelChange)="updateChanges()"
     (blur)="onBlurring(input.value)" (keyup.enter)="onEnterring(input.value)" (focus)="onFocussing(input.value)" />
 </mat-form-field>
 
 <!-- FORM CONTROL WAY -->
 <mat-form-field *ngIf="formControl" class="mat-search_field" [@slideInOut]="searchVisible">
-  <input #input matInput type="text" placeholder="" [formControl]="formControl" (blur)="onBlurring(input.value)"
+  <input #input matInput type="text" [placeholder]="placeholder" [formControl]="formControl" (blur)="onBlurring(input.value)"
     (keyup.enter)="onEnterring(input.value)" (focus)="onFocussing(input.value)" />
 </mat-form-field>
 

src/app/ng-mat-search-bar/mat-search-bar/mat-search-bar.component.ts

@@ -45,6 +45,7 @@ string
   @ViewChild('input', { static: false }) inputElement: ElementRef;
 
   @Input() formControl: FormControl;
+  @Input() placeholder = '';
 
   @Output() onBlur = new EventEmitter<string>();
   @Output() onClose = new EventEmitter<void>();