fix(core): ensure ngFor only inserts/moves/removes elements when necessary (#10287)

Closes #9960
Closes #7239
Closes #9672
Closes #9454
Closes #10287

modules/playground/src/animate/app/animate-app.ts

@@ -29,14 +29,13 @@ import {
     <button (click)="state='active'">Active State</button>
     |
     <button (click)="state='void'">Void State</button>
+    <button (click)="reorderAndRemove()">Scramble!</button>
     <button (click)="state='default'">Unhandled (default) State</button>
     <button style="float:right" (click)="bgStatus='blur'">Blur Page (Host)</button>
     <hr />
-    <div *ngFor="let item of items" class="box" [@boxAnimation]="state">
-      {{ item }}
-      <div *ngIf="true">
-        something inside 
-      </div>
+    <div *ngFor="let item of items; let i=index" class="box" [@boxAnimation]="state">
+      {{ item }} - {{ i }}
+      <button (click)="remove(item)">x</button>
     </div>
   `,
   animations: [
@@ -77,6 +76,20 @@ export class AnimateApp {
 
   public bgStatus = 'focus';
 
+  remove(item: any) {
+    var index = this.items.indexOf(item);
+    if (index >= 0) {
+      this.items.splice(index, 1);
+    }
+  }
+
+  reorderAndRemove() {
+    this.items = this.items.sort((a: any,b: any) => Math.random() - 0.5);
+    this.items.splice(Math.floor(Math.random() * this.items.length), 1);
+    this.items.splice(Math.floor(Math.random() * this.items.length), 1);
+    this.items[Math.floor(Math.random() * this.items.length)] = 99;
+  }
+
   get state() { return this._state; }
   set state(s) {
     this._state = s;

modules/playground/src/animate/css/animate-app.css

@@ -7,10 +7,9 @@ button {
 }
 
 .box {
-  font-size:50px;
+  font-size:40px;
   border:10px solid black;
   width:200px;
-  font-size:80px;
   line-height:100px;
   height:100px;
   display:inline-block;