Angular Material placeholder is not working with @Input

Question

I am using angular materuial. In the parent component I have

<app-multiselect 
    [optionsList]="propertyTypeList"
    [multiple]=true
    [placeholder]="Select"
    ></app-multiselect>

In the child component in the .ts file I am using an @Input

@Input() placeholder: string;

In the child html file I have

<mat-form-field>
  <mat-select 
  [multiple]="multiple"
  [placeholder]="placeholder">
    <mat-option 
    *ngFor="let item of optionsList" 
    [value]="item">{{item}}</mat-option>
  </mat-select>
</mat-form-field>

I am getting "placeholder" instead of "Select".

Any ideas? Thanks :)

Answer 1

In the child HTML, instead of using quotes use double curly bracket:

[placeholder]={{placeholder}}

By using double quotes you are assigning the literal value of the string "placeholder", whereas Angular takes the value of the variable when it's between double curly brackets {{}}.

Answer 2

Since you are passing String as a Input, it needs to be enclosed within ''

<app-multiselect [placeholder]="'Select'" ></app-multiselect>

And when you are binding, you should use string interpolation as {{}}

 <mat-select placeholder="{{placeholder}}">

STACKBLITZ DEMO

Answer 3

I had a similar issue and this worked for me; I got this solution from https://stackblitz.com/edit/angular-mat-select-data-ucmfzw?file=app.component.html

<app-multiselect 
    placeholder="{{'Select'}}"
    ></app-multiselect>