diff --git a/src/lib/badge/badge.ts b/src/lib/badge/badge.ts index 42aca1cfa044..924e7b54f2bf 100644 --- a/src/lib/badge/badge.ts +++ b/src/lib/badge/badge.ts @@ -15,11 +15,13 @@ import { Inject, Input, NgZone, + OnChanges, OnDestroy, Optional, Renderer2, + SimpleChanges, } from '@angular/core'; -import {ThemePalette, mixinDisabled, CanDisableCtor, CanDisable} from '@angular/material/core'; +import {CanDisable, CanDisableCtor, mixinDisabled, ThemePalette} from '@angular/material/core'; import {ANIMATION_MODULE_TYPE} from '@angular/platform-browser/animations'; @@ -53,7 +55,7 @@ export type MatBadgeSize = 'small' | 'medium' | 'large'; '[class.mat-badge-disabled]': 'disabled', }, }) -export class MatBadge extends _MatBadgeMixinBase implements OnDestroy, CanDisable { +export class MatBadge extends _MatBadgeMixinBase implements OnDestroy, OnChanges, CanDisable { /** Whether the badge has any content. */ _hasContent = false; @@ -81,14 +83,7 @@ export class MatBadge extends _MatBadgeMixinBase implements OnDestroy, CanDisabl @Input('matBadgePosition') position: MatBadgePosition = 'above after'; /** The content for the badge */ - @Input('matBadge') - get content(): string { return this._content; } - set content(value: string) { - this._content = value; - this._hasContent = value != null && `${value}`.trim().length > 0; - this._updateTextContent(); - } - private _content: string; + @Input('matBadge') content: string; /** Message used to describe the decorated element via aria-describedby */ @Input('matBadgeDescription') @@ -144,6 +139,16 @@ export class MatBadge extends _MatBadgeMixinBase implements OnDestroy, CanDisabl return this.position.indexOf('before') === -1; } + ngOnChanges(changes: SimpleChanges) { + const contentChange = changes['content']; + + if (contentChange) { + const value = contentChange.currentValue; + this._hasContent = value != null && `${value}`.trim().length > 0; + this._updateTextContent(); + } + } + ngOnDestroy() { const badgeElement = this._badgeElement; diff --git a/tools/public_api_guard/lib/badge.d.ts b/tools/public_api_guard/lib/badge.d.ts index 089d397a2797..54600ccbd3d6 100644 --- a/tools/public_api_guard/lib/badge.d.ts +++ b/tools/public_api_guard/lib/badge.d.ts @@ -1,6 +1,6 @@ export declare const _MatBadgeMixinBase: CanDisableCtor & typeof MatBadgeBase; -export declare class MatBadge extends _MatBadgeMixinBase implements OnDestroy, CanDisable { +export declare class MatBadge extends _MatBadgeMixinBase implements OnDestroy, OnChanges, CanDisable { _hasContent: boolean; _id: number; color: ThemePalette; @@ -14,6 +14,7 @@ export declare class MatBadge extends _MatBadgeMixinBase implements OnDestroy, C _renderer?: Renderer2 | undefined, _animationMode?: string | undefined); isAbove(): boolean; isAfter(): boolean; + ngOnChanges(changes: SimpleChanges): void; ngOnDestroy(): void; }