diff --git a/src/material-experimental/mdc-chips/chip.spec.ts b/src/material-experimental/mdc-chips/chip.spec.ts index 4ba18bd9bcdb..22f97a441e12 100644 --- a/src/material-experimental/mdc-chips/chip.spec.ts +++ b/src/material-experimental/mdc-chips/chip.spec.ts @@ -8,7 +8,7 @@ import {Subject} from 'rxjs'; import {MatChip, MatChipEvent, MatChipSet, MatChipsModule} from './index'; -describe('Chips', () => { +describe('MatChip', () => { let fixture: ComponentFixture; let chipDebugElement: DebugElement; let chipNativeElement: HTMLElement; @@ -135,6 +135,24 @@ describe('Chips', () => { it('should not be focusable', () => { expect(chipNativeElement.getAttribute('tabindex')).toBeFalsy(); }); + + it('should return the chip text if value is undefined', () => { + expect(chipInstance.value.trim()).toBe(fixture.componentInstance.name); + }); + + it('should return the chip value if defined', () => { + fixture.componentInstance.value = 123; + fixture.detectChanges(); + + expect(chipInstance.value).toBe(123); + }); + + it('should return the chip value if set to null', () => { + fixture.componentInstance.value = null; + fixture.detectChanges(); + + expect(chipInstance.value).toBeNull(); + }); }); }); @@ -145,7 +163,7 @@ describe('Chips', () => { + (removed)="chipRemove($event)" [value]="value"> {{name}} @@ -158,6 +176,7 @@ class SingleChip { color: string = 'primary'; removable: boolean = true; shouldShow: boolean = true; + value: any; chipFocus: (event?: MatChipEvent) => void = () => {}; chipDestroy: (event?: MatChipEvent) => void = () => {}; diff --git a/src/material-experimental/mdc-chips/chip.ts b/src/material-experimental/mdc-chips/chip.ts index 9ad29f66e09d..0d550e4b7784 100644 --- a/src/material-experimental/mdc-chips/chip.ts +++ b/src/material-experimental/mdc-chips/chip.ts @@ -155,7 +155,7 @@ export class MatChip extends _MatChipMixinBase implements AfterContentInit, Afte /** The value of the chip. Defaults to the content inside `` tags. */ @Input() get value(): any { - return this._value != undefined + return this._value !== undefined ? this._value : this._elementRef.nativeElement.textContent; } diff --git a/src/material/chips/chip.spec.ts b/src/material/chips/chip.spec.ts index d15c8821409f..b37d7a8aaf5c 100644 --- a/src/material/chips/chip.spec.ts +++ b/src/material/chips/chip.spec.ts @@ -9,7 +9,7 @@ import {Subject} from 'rxjs'; import {MatChip, MatChipEvent, MatChipSelectionChange, MatChipsModule, MatChipList} from './index'; -describe('Chips', () => { +describe('MatChip', () => { let fixture: ComponentFixture; let chipDebugElement: DebugElement; let chipNativeElement: HTMLElement; @@ -214,6 +214,24 @@ describe('Chips', () => { expect(chipInstance.rippleDisabled).toBe(true, 'Expected chip ripples to be disabled.'); }); + + it('should return the chip text if value is undefined', () => { + expect(chipInstance.value.trim()).toBe(fixture.componentInstance.name); + }); + + it('should return the chip value if defined', () => { + fixture.componentInstance.value = 123; + fixture.detectChanges(); + + expect(chipInstance.value).toBe(123); + }); + + it('should return the chip value if set to null', () => { + fixture.componentInstance.value = null; + fixture.detectChanges(); + + expect(chipInstance.value).toBeNull(); + }); }); describe('keyboard behavior', () => { @@ -396,7 +414,7 @@ describe('Chips', () => { [color]="color" [selected]="selected" [disabled]="disabled" (focus)="chipFocus($event)" (destroyed)="chipDestroy($event)" (selectionChange)="chipSelectionChange($event)" - (removed)="chipRemove($event)"> + (removed)="chipRemove($event)" [value]="value"> {{name}} @@ -411,6 +429,7 @@ class SingleChip { selectable: boolean = true; removable: boolean = true; shouldShow: boolean = true; + value: any; chipFocus: (event?: MatChipEvent) => void = () => {}; chipDestroy: (event?: MatChipEvent) => void = () => {}; diff --git a/src/material/chips/chip.ts b/src/material/chips/chip.ts index 2a5df98a708f..94e78472b5a4 100644 --- a/src/material/chips/chip.ts +++ b/src/material/chips/chip.ts @@ -176,7 +176,7 @@ export class MatChip extends _MatChipMixinBase implements FocusableOption, OnDes /** The value of the chip. Defaults to the content inside `` tags. */ @Input() get value(): any { - return this._value != undefined + return this._value !== undefined ? this._value : this._elementRef.nativeElement.textContent; }