title: Non-Mutating array
body: <p>I have a service where there is a <code>cards</code> array, which I looped thru in <code>list-cards.html</code> component template with <code>*ngFor="let card of this.cardService.cards</code>. This <code>cards</code> array has a list of object created from API call, and it's rendered at app initialization as home page.</p>
  
  <p>How do I filter that <code>cards</code> array from the <code>card.service.ts</code> in non-mutating way?</p>
  
  <p>For now, it's like this (mutating way):<br>
  card.service.ts file:</p>
  
  <pre><code>this.cards = this.cards.filter((e: any) =&gt; e.id !== id);
  </code></pre>
  
  <p>If I create a new array variable, to filter it in non-mutating way, like in this example from: <a href="https://lorenstewart.me/2017/01/22/javascript-array-methods-mutating-vs-non-mutating/" rel="nofollow noreferrer">https://lorenstewart.me/2017/01/22/javascript-array-methods-mutating-vs-non-mutating/</a></p>
  
  <pre><code>const arr1 = ['a', 'b', 'c', 'd', 'e'];
  
  const arr2 = arr1.filter(a =&gt; a !== 'e'); // ['a', 'b', 'c', 'd']
  </code></pre>
  
  <p>then it can't be looped any more with above <code>*ngFor</code> declaration, because it's another array now, right!?</p>
  
  <p>So, I came up to solution based on above example, where I've declared two array variables in the <code>card.service.ts</code> file:  </p>
  
  <pre><code>cards: any[];
  // new array to avoid array mutation
  newCards: any[] = [];
  </code></pre>
  
  <p>In the <code>list-cards.ts</code> component in <code>ngOnInit</code> directive I've declared:  </p>
  
  <pre><code>// to render initial data from the array
  this.cardService.newCards = this.cardService.cards;
  </code></pre>
  
  <p>and at <code>list-cards.html</code> now I declared <code>*ngFor="let card of this.cardService.newCards</code>,  </p>
  
  <p>and at last, filter method in <code>card.service.ts</code> looks as follow:</p>
  
  <pre><code>this.newCards = [...this.cards].filter((e: any) =&gt; e.id !== id);
  </code></pre>
  
  <p>I am not really sure if my code accomplish the goal of non-mutating array??</p>
  
  <p>I just find out that on delete action click, only once item is filtered. Every other delete click action is not filtered, but cards are deleted from db.</p>
  
  <p>If I loop thru <code>cards</code> array, not <code>newCards</code> array with <code>*ngFor="let card of this.cardService.cards"</code> everything work just fine, but then array is mutated!?</p>