Chips placeholder bound to variable only shows after triggering its change detection (by clicking component).

[ghost]

Bug, feature request, or proposal:

Bug

What is the expected behavior?

If you have a chips component roughly like the following (check stackblitz for a working example). The placeholder will not render as expected (hide on disabled true; show on disabled false) until you somehow trigger change detection by clicking the component.

<mat-form-field >
  <mat-chip-list #chipList>
    <mat-chip></mat-chip>
    <input [placeholder]="getPlaceholder()">
  </mat-chip-list>
</mat-form-field>

@Component({
  selector: 'chips',
  templateUrl: 'chips.html',
})
export class ChipsInputExample {

  @Input() disabled: boolean;

  getPlaceholder(): string {
    return this.disabled ? '' : 'Has lime';    
  };
}

What is the current behavior?

Only shows placeholder (for disabled === false) after user triggers change detection.

What are the steps to reproduce?

https://stackblitz.com/edit/angular-hxrcpk

Other similar example:
https://stackblitz.com/edit/angular-hxrcpk-3zsauz

What is the use-case or motivation for changing an existing behavior?

Showing/hiding placeholder based on component's disabled input parameter.

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

Angular: 6.0.5
Material 6.0.3

Is there anything else we should know?

This is not a new behaviour, it already happened in past material major versions.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}