Skip to content

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

Closed
@ghost

Description

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.

Metadata

Metadata

Assignees

Labels

P4A relatively minor issue that is not relevant to core functions

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions