typescript - Ta bort valda objekt från Angular Material mat-selection-list

Jag behöver kunna ta bort valda objekt från en Angular Material-lista. För att göra det bestämde jag mig för att subtrahera arrayen av valda objekt från den ursprungliga arrayen av objekt (inte säker på om detta är det bästa sättet att göra det).

Mitt problem är att jag inte kan hitta ett sätt att skicka arrayen med valda objekt från HTML till TS och leka med den.

Angular Material har följande exempel i deras dokumentation:

{{x.selectedOptions.selected.y}}

där x är ID för mat-selection-list-selector och y är något som du gör med de valda elementen. Men detta verkar fungera endast i HTML.

Nedan finns min kod som inte fungerar.

HTML där jag ställer upp listan och knappen som ska utlösa raderingsfunktionen.

<mat-selection-list #apps>
    <mat-list-option *ngFor="let app of appList" [value]="app">
      {{app}}
    </mat-list-option>
</mat-selection-list>

<button 
class='remove-button' 
(click)="deleteSelected()"
mat-stroked-button color="primary">
    Remove from list
</button>

TS där jag försöker leka med de valda alternativen men det fungerar uppenbarligen inte eftersom selectedOptions är deklarerat som en array av strängar och inte har metoden "selected". Jag förstår att det var ett dumt försök men hur som helst, kan inte hitta något bättre sätt :) Det borde finnas ett sätt att skicka valda element som en array till TS...

export class SubscriptionListComponent implements OnInit {

  selectedOptions: string[]
  appList: string[] = ['Instagram', 'Facebook', 'Telegram', 'WhatsApp', 'GitHub']

  deleteSelected() {
    this.appList.filter(x => !this.selectedOptions.selected.includes(x))
  }

Målet är att ändra appList när man klickar på knappen så att de valda elementen tas bort från den och inte visas i listan heller.

Svar #1

För dem som kan stöta på samma utmaning, lägger jag upp koden som fungerade för mig och gjorde exakt det jag ville (ta bort valda element från listan vid klick).

HTML förblev samma som ovan.

TS :

import { Component, OnInit, ViewChild } from '@angular/core';
import { MatSelectionList } from '@angular/material/list';


@Component({
  selector: 'app-subscription-list',
  templateUrl: './subscription-list.component.html',
  styleUrls: ['./subscription-list.component.scss']
})
export class SubscriptionListComponent implements OnInit {

  @ViewChild('apps') selectionList: MatSelectionList

  appList: string[] = ['Instagram', 'Facebook', 'Telegram', 'WhatsApp', 'GitHub']

  deleteSelected() {
    var selected: string[] = this.selectionList.selectedOptions.selected.map(s => s.value)
    var diff = this.appList.filter(el => !selected.includes(el))
    this.appList = diff
  }

  constructor() { }

  ngOnInit(): void {
  }

}