fix(core): fixes clear view after value changes

Author: thekiba

projects/platform/src/lib/directives/track-by-key.directive.ts

@@ -1,28 +1,33 @@
 import { NgForOf } from '@angular/common';
-import { Directive, Host, Input, Optional } from '@angular/core';
+import { Directive, Host, Input, OnChanges, Optional, SimpleChanges, ViewContainerRef } from '@angular/core';
 
 @Directive({
   selector: '[ngForTrackByKey]'
 })
-export class NgForTrackByKeyDirective<T> {
+export class NgForTrackByKeyDirective<T> implements OnChanges {
 
-  @Input()
-  set ngForTrackByKey(key: keyof T) {
-    if (key) {
-      this.ngFor.ngForTrackBy = (index: number, item: T): T[keyof T] => item[key];
-    } else {
-      this.ngFor.ngForTrackBy = undefined;
-    }
-
-    this.ngFor['_differ'] = null;
-    this.ngFor['_ngForOfDirty'] = true;
-    this.ngFor.ngDoCheck();
-  }
+  @Input() ngForTrackByKey: keyof T;
 
-  constructor(@Host() @Optional() private ngFor: NgForOf<T>) {
+  constructor(@Host() @Optional() private ngFor: NgForOf<T>, private viewContainerRef: ViewContainerRef) {
     if (!ngFor) {
       throw new Error('TrackByKey should use with *ngFor!');
     }
   }
 
+  ngOnChanges(changes: SimpleChanges): void {
+    if ('ngForTrackByKey' in changes) {
+      const key = this.ngForTrackByKey;
+      if (key) {
+        this.ngFor.ngForTrackBy = (index: number, item: T): T[keyof T] => item[ key ];
+      } else {
+        this.ngFor.ngForTrackBy = undefined;
+      }
+
+      this.ngFor[ '_differ' ] = null;
+      this.ngFor[ '_ngForOfDirty' ] = true;
+      this.viewContainerRef.clear();
+      this.ngFor.ngDoCheck();
+    }
+  }
+
 }

projects/platform/src/test/directives/track-by-key.directive.spec.ts

@@ -1,13 +1,21 @@
-import { CommonModule } from '@angular/common';
+import { Component } from '@angular/core';
 import { createHostComponentFactory, SpectatorWithHost } from '@netbasal/spectator';
 import { NgForTrackByKeyDirective } from '../../lib/directives/track-by-key.directive';
 
+@Component({
+  selector: 'lib-animals',
+  template: ''
+})
+class AnimalsComponent {
+  animals: any[];
+}
+
 describe('NgForTrackByKeyDirective', () => {
-  let host: SpectatorWithHost<NgForTrackByKeyDirective<any>>;
+  let host: SpectatorWithHost<NgForTrackByKeyDirective<any>, AnimalsComponent>;
   const create = createHostComponentFactory({
     component: NgForTrackByKeyDirective,
     declarations: [ NgForTrackByKeyDirective ],
-    imports: [ CommonModule ]
+    host: AnimalsComponent
   });
 
   it('should add generate trackBy fn by key', () => {
@@ -21,7 +29,28 @@ describe('NgForTrackByKeyDirective', () => {
       </ng-container>
     `);
 
-    expect(host.element).toHaveText('🦊  🦄');
+    expect(host.hostElement).toHaveText('🦊  🦄');
+  });
+
+  it('should correct recreate differs when array are changed', () => {
+    host = create(`
+      <ng-container *ngFor="let item of animals trackByKey 'animal'">
+        {{ item.animal }}
+      </ng-container>
+    `);
+
+    host.setHostInput('animals', [
+      { animal: '🦊' },
+      { animal: '🦄' }
+    ]);
+    expect(host.hostElement.textContent).toEqual(' 🦊  🦄 ');
+
+    host.setHostInput('animals', [
+      { animal: '🦊' },
+      { animal: '🙀' },
+      { animal: '🦄' }
+    ]);
+    expect(host.hostElement.textContent).toEqual(' 🦊  🙀  🦄 ');
   });
 
   it('should throw exception', () => {