ngClass remove the class only if the object's value is null

I’m submitting a…

[ ] Regression (a behavior that used to work and stopped working in a new release)
[x] Bug report
[ ] Feature request
[ ] Documentation issue or request
[ ] Support request => Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question

Current behavior

I have an icon component:

@Component({
  selector: 'icon',
  styleUrls: ['./icon.component.css'],
  template: `
    < span 
      [ngClass]="{'large': large, 'small': small}"
      class="mdi {{'mdi-'+name}}"
    >< /span>
  `
})
export class IconComponent  {
  @Input() name: string;
  @Input() large: boolean = false;
  @Input() small: boolean = false;
}

And the usage of it:

< icon [name]="show ? 'eye' : 'eye-off'"
       [small]="true"
       [large]="false">< /icon>

After the initial render the icon component’s < span> element will have only one class, the ‘small’. It’s okay. But after it I modify the name input’s value, the < span> element will have the class ‘large’ and ‘small’ both.

Expected behavior

After the modification of the name input’s value, the < span> element will have only the class ‘small’.

Minimal reproduction of the problem with instructions

https://stackblitz.com/edit/angular-vsffrd?file=app%2Fapp.component.html

Just click to the ‘switch the icon’ button. After it, the icon (< span> element) will be large, not small.

What is the motivation / use case for changing the behavior?

The documentation says, that the ngClass directive works with ‘false’ object value, but I experienced, it works only with value ‘null’. If I modify the large input’s value to ‘null’, it will work fine, but with ‘false’, it does not work.

This works only:

< icon [name]="show ? 'eye' : 'eye-off'"
       [small]="true"
       [large]="null">< /icon>

Environment

Angular version: >= 4.0.0-beta.3

Browser:
- [x] Chrome (desktop) version XX
- [ ] Chrome (Android) version XX
- [ ] Chrome (iOS) version XX
- [x] Firefox version XX
- [ ] Safari (desktop) version XX
- [ ] Safari (iOS) version XX
- [ ] IE version XX
- [ ] Edge version XX
 
For Tooling issues:
- Node version: v9.4.0
- Platform:  Linux

Others:
-

[trotyl]

Could be a valid bug, simpler repro: https://stackblitz.com/edit/angular-xybndc?file=app/app.component.html

[pkozlowski-opensource]

#21937 should take care of this specific case.