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?
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
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.