Search code examples
angularbadgeangular2-mdlangular-mdl

Badge issue - angular2-mdl 4.0.1 (Angular 4)

I am using badges as follows:

<mdl-icon [mdl-badge]="myCount" mdl-badge-overlap>some_icon</mdl-icon>

When myCount:number is null, the mdl version for Angular 2 used to hide the badge. Current version (4.0.1 with Angular 4) shows a badge with 'null' text in it.

However - the sample (dynamic experiments) on a2MDL page works correctly - when deleting a number from the input box, badge is hidden. Am I missing something?

Solution

  • Interesting!

    The thing that has changed between version 2 and 4 is that the version 2 is using setElementAttribute from the Renderer class:

    this.renderer.setElementAttribute(this.el, 'data-badge', this.mdlBadgeContent);

    The Renderer was deprecated and replaced by Renderer2:

    this.renderer.setAttribute(this.el, 'data-badge', this.mdlBadgeContent);

    But the implementation has changed: Version 2: https://github.com/angular/angular/blob/2.4.x/modules/%40angular/platform-browser/src/dom/dom_renderer.ts#L199

    Version 4 https://github.com/angular/angular/blob/92084f2b6a7cc1c81e31b8f413424223e62806d8/packages/platform-browser/src/dom/dom_renderer.ts#L148

    As you can see it is no longer checked wether the value isPresent or not. So the null value is implicitly converted to string.

    I have created an issue (https://github.com/mseemann/angular2-mdl/issues/775) to restore the old behavior that removes the atribute if the value is not present.