Reused NgFor elements don't clear old CSS classes

[mgreenland]

Smallish reproduction case:

@Component(selector: 'example')
@View(
    directives: const [NgFor, CSSClass],
    template: '''
<button (click)="increment()">Increment</button>
<div *ng-for="var item of items" [class]="item">
  <div [class]="item">
    {{item}}
  </div>
</div>
''')
class ExampleComponent {
  var next = 0;
  var items = ['0'];
  void increment() {
    items = ['${++next}'];
  }
}

What happens in this example is that if you click the "Increment" button 10 times, the resulting DOM is:

<div *ng-for="var item of items" [class]="item" class="ng-binding 0 1 2 3 4 5 6 7 8 9 10">
  <div [class]="item" class="ng-binding 0 1 2 3 4 5 6 7 8 9 10">
    10
  </div>
</div>

Instead, I'd expect each div's class to contain only 10, instead of all the numbers up to 10.

[tbosch]

The problem is related to view reuse:
On every click, you are destroying the <div> and creating it again. However, the class directive is not cleaning up on destroy...

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}