From f889547a64f860cda2c1b848fa44383757c55ae0 Mon Sep 17 00:00:00 2001 From: Kristiyan Kostadinov Date: Fri, 22 Mar 2019 23:12:22 +0100 Subject: [PATCH] refactor(badge): rework to account for ivy changes (#15555) Reworks `matBadge` to account for Ivy setting static inputs before the view has been rendered out. This caused one of the tests to fail, because it relied on the view being in place when the `content` setter is called. --- src/lib/badge/badge.ts | 25 +++++++++++++++---------- tools/public_api_guard/lib/badge.d.ts | 3 ++- 2 files changed, 17 insertions(+), 11 deletions(-) diff --git a/src/lib/badge/badge.ts b/src/lib/badge/badge.ts index 42aca1cfa04..924e7b54f2b 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 089d397a279..54600ccbd3d 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; }