diff --git a/src/lib/chips/chip-input.spec.ts b/src/lib/chips/chip-input.spec.ts
index c8ba72cf6263..35af7f394d31 100644
--- a/src/lib/chips/chip-input.spec.ts
+++ b/src/lib/chips/chip-input.spec.ts
@@ -5,6 +5,8 @@ import {createKeyboardEvent} from '@angular/cdk/testing';
import {Component, DebugElement} from '@angular/core';
import {async, ComponentFixture, TestBed} from '@angular/core/testing';
import {By} from '@angular/platform-browser';
+import {NoopAnimationsModule} from '@angular/platform-browser/animations';
+import {MatFormFieldModule} from '@angular/material/form-field';
import {MatChipInput, MatChipInputEvent} from './chip-input';
import {MatChipsModule} from './index';
import {MAT_CHIPS_DEFAULT_OPTIONS, MatChipsDefaultOptions} from './chip-default-options';
@@ -20,7 +22,7 @@ describe('MatChipInput', () => {
beforeEach(async(() => {
TestBed.configureTestingModule({
- imports: [MatChipsModule, PlatformModule],
+ imports: [PlatformModule, MatChipsModule, MatFormFieldModule, NoopAnimationsModule],
declarations: [TestChipInput],
providers: [{
provide: Directionality, useFactory: () => {
@@ -64,6 +66,22 @@ describe('MatChipInput', () => {
expect(inputNativeElement.getAttribute('placeholder')).toBe('bound placeholder');
});
+
+ it('should propagate the dynamic `placeholder` value to the form field', () => {
+ fixture.componentInstance.placeholder = 'add a chip';
+ fixture.detectChanges();
+
+ const label: HTMLElement = fixture.nativeElement.querySelector('.mat-form-field-label');
+
+ expect(label).toBeTruthy();
+ expect(label.textContent).toContain('add a chip');
+
+ fixture.componentInstance.placeholder = 'or don\'t';
+ fixture.detectChanges();
+
+ expect(label.textContent).toContain('or don\'t');
+ });
+
});
describe('[addOnBlur]', () => {
@@ -117,7 +135,7 @@ describe('MatChipInput', () => {
TestBed
.resetTestingModule()
.configureTestingModule({
- imports: [MatChipsModule, PlatformModule],
+ imports: [MatChipsModule, MatFormFieldModule, PlatformModule, NoopAnimationsModule],
declarations: [TestChipInput],
providers: [{
provide: MAT_CHIPS_DEFAULT_OPTIONS,
@@ -146,12 +164,14 @@ describe('MatChipInput', () => {
@Component({
template: `
-
-
-
+
+
+
+
+
`
})
class TestChipInput {
diff --git a/src/lib/chips/chip-input.ts b/src/lib/chips/chip-input.ts
index fa7249bfb53a..50570fc4b091 100644
--- a/src/lib/chips/chip-input.ts
+++ b/src/lib/chips/chip-input.ts
@@ -7,7 +7,7 @@
*/
import {coerceBooleanProperty} from '@angular/cdk/coercion';
-import {Directive, ElementRef, EventEmitter, Input, Output, Inject} from '@angular/core';
+import {Directive, ElementRef, EventEmitter, Input, Output, Inject, OnChanges} from '@angular/core';
import {MatChipList} from './chip-list';
import {MAT_CHIPS_DEFAULT_OPTIONS, MatChipsDefaultOptions} from './chip-default-options';
@@ -41,7 +41,7 @@ let nextUniqueId = 0;
'[attr.placeholder]': 'placeholder || null',
}
})
-export class MatChipInput {
+export class MatChipInput implements OnChanges {
/** Whether the control is focused. */
focused: boolean = false;
_chipList: MatChipList;
@@ -76,11 +76,7 @@ export class MatChipInput {
@Output('matChipInputTokenEnd')
chipEnd: EventEmitter = new EventEmitter();
- /**
- * The input's placeholder text.
- * @deprecated Bind to the `placeholder` attribute directly.
- * @breaking-change 7.0.0
- */
+ /** The input's placeholder text. */
@Input() placeholder: string = '';
/** Unique id for the input. */
@@ -98,6 +94,10 @@ export class MatChipInput {
this._inputElement = this._elementRef.nativeElement as HTMLInputElement;
}
+ ngOnChanges() {
+ this._chipList.stateChanges.next();
+ }
+
/** Utility method to make host definition/tests more clear. */
_keydown(event?: KeyboardEvent) {
this._emitChipEnd(event);