Implement a search-function in mat-selection-list

I have been searching around for a solution for this but cant figure it out how this should me made. Here is a stackblitz of what im almost looking for, but i dont want it to appear like a dropdown list. https://stackblitz.com/edit/angular-yo2o9o?file=app/app.component.html

I would love to have a list like my own code below, but implement a search field over the list and use it to filter users$ depending on the input (but still saving the selected users) ...

Edit: Found this one, https://stackblitz.com/edit/angular-i3pfu2-xgembc?file=app/list-selection-example.ts,

This is how it should look, but i cant get this to work with my code..

Html:

<div class="userContainer">
<p>Choose participants</p>
<mat-selection-list class="form-group" #selectedUsers formControlName="users">
<mat-list-option *ngFor="let user of users$ | async" [value]="user">
{{ user.name }}
</mat-list-option>
</mat-selection-list>
<p>Invited users: {{ selectedUsers.selectedOptions.selected.length }}</p>
</div>


users$ is coming from an selector from my state

this.store$.dispatch(new fromUsers.GetUsers());
this.users$ = this.store$.pipe(select(fromUsers.getRelevantUsers(+this.userId)));


And this is the form i'm using..

createEventForm() {
this.eventForm = this.fb.group(
{
users: [null],
more inside...
}
);
}

Continue reading...