From 37dc7042f8d4ac414d414b0c7f3b5b3bf1abd8d1 Mon Sep 17 00:00:00 2001 From: crisbeto Date: Fri, 22 Mar 2019 20:38:26 +0100 Subject: [PATCH] refactor(badge): rework to account for ivy changes 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 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; }