diff --git a/src/material/chips/chip.ts b/src/material/chips/chip.ts index a0bdd3c8b272..1329f71cbbe6 100644 --- a/src/material/chips/chip.ts +++ b/src/material/chips/chip.ts @@ -10,6 +10,7 @@ import {BooleanInput, coerceBooleanProperty} from '@angular/cdk/coercion'; import {ANIMATION_MODULE_TYPE} from '@angular/platform-browser/animations'; import { AfterViewInit, + AfterContentInit, Component, ChangeDetectionStrategy, ChangeDetectorRef, @@ -25,6 +26,8 @@ import { ViewEncapsulation, ViewChild, Attribute, + ContentChildren, + QueryList, } from '@angular/core'; import {DOCUMENT} from '@angular/common'; import { @@ -41,7 +44,7 @@ import { RippleGlobalOptions, } from '@angular/material/core'; import {FocusMonitor} from '@angular/cdk/a11y'; -import {Subject} from 'rxjs'; +import {merge, Subject, Subscription} from 'rxjs'; import {take} from 'rxjs/operators'; import {MatChipAvatar, MatChipTrailingIcon, MatChipRemove} from './chip-icons'; import {MatChipAction} from './chip-action'; @@ -112,7 +115,14 @@ const _MatChipMixinBase = mixinTabIndex( }) export class MatChip extends _MatChipMixinBase - implements AfterViewInit, CanColor, CanDisableRipple, CanDisable, HasTabIndex, OnDestroy + implements + AfterViewInit, + AfterContentInit, + CanColor, + CanDisableRipple, + CanDisable, + HasTabIndex, + OnDestroy { protected _document: Document; @@ -137,9 +147,24 @@ export class MatChip /** Whether moving focus into the chip is pending. */ private _pendingFocus: boolean; + /** Subscription to changes in the chip's actions. */ + private _actionChanges: Subscription | undefined; + /** Whether animations for the chip are enabled. */ _animationsDisabled: boolean; + /** All avatars present in the chip. */ + @ContentChildren(MAT_CHIP_AVATAR, {descendants: true}) + protected _allLeadingIcons: QueryList; + + /** All trailing icons present in the chip. */ + @ContentChildren(MAT_CHIP_TRAILING_ICON, {descendants: true}) + protected _allTrailingIcons: QueryList; + + /** All remove icons present in the chip. */ + @ContentChildren(MAT_CHIP_REMOVE, {descendants: true}) + protected _allRemoveIcons: QueryList; + _hasFocus() { return this._hasFocusInternal; } @@ -259,8 +284,19 @@ export class MatChip } } + ngAfterContentInit(): void { + // Since the styling depends on the presence of some + // actions, we have to mark for check on changes. + this._actionChanges = merge( + this._allLeadingIcons.changes, + this._allTrailingIcons.changes, + this._allRemoveIcons.changes, + ).subscribe(() => this._changeDetectorRef.markForCheck()); + } + ngOnDestroy() { this._focusMonitor.stopMonitoring(this._elementRef); + this._actionChanges?.unsubscribe(); this.destroyed.emit({chip: this}); this.destroyed.complete(); } diff --git a/tools/public_api_guard/material/chips.md b/tools/public_api_guard/material/chips.md index 2fa1dccbf017..83cee41db08b 100644 --- a/tools/public_api_guard/material/chips.md +++ b/tools/public_api_guard/material/chips.md @@ -61,8 +61,11 @@ export const MAT_CHIP_TRAILING_ICON: InjectionToken; export const MAT_CHIPS_DEFAULT_OPTIONS: InjectionToken; // @public -export class MatChip extends _MatChipMixinBase implements AfterViewInit, CanColor, CanDisableRipple, CanDisable, HasTabIndex, OnDestroy { +export class MatChip extends _MatChipMixinBase implements AfterViewInit, AfterContentInit, CanColor, CanDisableRipple, CanDisable, HasTabIndex, OnDestroy { constructor(_changeDetectorRef: ChangeDetectorRef, elementRef: ElementRef, _ngZone: NgZone, _focusMonitor: FocusMonitor, _document: any, animationMode?: string, _globalRippleOptions?: RippleGlobalOptions | undefined, tabIndex?: string); + protected _allLeadingIcons: QueryList; + protected _allRemoveIcons: QueryList; + protected _allTrailingIcons: QueryList; _animationsDisabled: boolean; ariaDescription: string | null; _ariaDescriptionId: string; @@ -91,6 +94,8 @@ export class MatChip extends _MatChipMixinBase implements AfterViewInit, CanColo _isRippleDisabled(): boolean; leadingIcon: MatChipAvatar; // (undocumented) + ngAfterContentInit(): void; + // (undocumented) ngAfterViewInit(): void; // (undocumented) ngOnDestroy(): void; @@ -114,7 +119,7 @@ export class MatChip extends _MatChipMixinBase implements AfterViewInit, CanColo // (undocumented) protected _value: any; // (undocumented) - static ɵcmp: i0.ɵɵComponentDeclaration; + static ɵcmp: i0.ɵɵComponentDeclaration; // (undocumented) static ɵfac: i0.ɵɵFactoryDeclaration; }