title: How to refresh array to render Angular?
body: <p>I set array using this:</p>
  <pre><code>@Input() sogllist: any[] = [];
  
  ngOnInit(): void {
      this.listService.setItems([...this.sogllist]);
  }
  </code></pre>
  <p>Getter to display in template is:</p>
  <pre><code>public get sogllistToRender() {
      return this.listService.getItems();
  }
  </code></pre>
  <p>When user removes an array from array I return filtered array excluding deleted element:</p>
  <pre><code>public delete(sogl){
      this.listService.setItems([...this.sogllist.filter((s) =&gt; s.userid !== sogl.userid)]);
  }
  </code></pre>
  <p>Why template does not render it again:</p>
  <pre><code> *ngFor=&quot;let sogl of sogllistToRender&quot;
  </code></pre>
  <p><strong>List service is:</strong></p>
  <pre><code>@Injectable()
  export class ListService {
      public onChanged = new Subject&lt;any[]&gt;();
      private items: any[] = [];
  
      getItems() {
          return this.items;
      }
  
      setItems(items: any): void {
          this.items = items;
      }
  
      setSelected(value: any): void {
          value.selected = !value.selected;
      }
  
      setSelectedState(value: any, state: boolean): void {
          value.selected = state;
      }
  
      drop(event: CdkDragDrop&lt;string[]&gt;) {
          moveItemInArray(this.items, event.previousIndex, event.currentIndex);
          return [...this.items];
      }
  
      emitChnages(): void {
          this.onChanged.next(this.items);
      }
  }
  </code></pre>
  <p><strong>Last changes:</strong></p>
  <pre><code> ngOnInit(): void {
          // Set input array to service 
          this.listService.setItems([...this.sogllist]);
  
          // Get data from service and apply to local component variable
          this.sogllistToRender = this.listService.getItems();
      }
  </code></pre>
  <p>Update current array after remove:</p>
  <pre><code> this.sogllistToRender = [...this.sogllist.filter((s) =&gt; s.userid !== sogl.userid)];
  </code></pre>