Looking for a way to delete selected items from an Angular Material list, I attempted to subtract the array of selected items from the initial array (uncertain if this is the correct approach).
The challenge I face is figuring out how to pass the array of selected items from HTML to TS to manipulate it.
In the Angular Material documentation, there's an example:
{{x.selectedOptions.selected.y}}
Here, x represents the ID of the mat-selection-list selector and y denotes the action with the selected elements. However, this syntax appears to only work in HTML.
Below is the code snippet that is not functioning as intended.
In the HTML section where the list and deletion function triggering button are defined:
<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>
Attempting to interact with the selected options in the TS file leads to errors since selectedOptions is declared as an array of strings and does not have the "selected" method. Despite realizing the mistake, I haven't found a better alternative :) There must be a way to transfer selected elements as an array to 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))
}
The aim is to update the appList upon clicking the button, removing the selected elements so they no longer appear in the list.