search function for show editing

src/app/modules/shows/show/show.component.html

@@ -21,7 +21,10 @@
       <mat-form-field appearance="outline">
         <mat-label>Lied hinzufügen...</mat-label>
         <mat-select (selectionChange)="onAddSongSelectionChanged($event)">
-          <mat-option *ngFor="let song of songs" [value]="song.id">{{song.title}}</mat-option>
+          <mat-option>
+            <ngx-mat-select-search [formControl]="filteredSongsControl"></ngx-mat-select-search>
+          </mat-option>
+          <mat-option *ngFor="let song of filteredSongs()" [value]="song.id">{{song.title}}</mat-option>
         </mat-select>
       </mat-form-field>
 

src/app/modules/shows/show/show.component.ts

@@ -10,6 +10,8 @@ import {MatSelectChange} from '@angular/material/select';
 import {ShowSongService} from '../services/show-song.service';
 import {ShowSong} from '../services/showSong';
 import {DocxService} from '../services/docx.service';
+import {FormControl} from '@angular/forms';
+import {filterSong} from '../../../services/filter.helper';
 
 @Component({
   selector: 'app-show',
@@ -89,4 +91,11 @@ export class ShowComponent implements OnInit {
   public async onDownload(): Promise<void> {
     await this.docxService.create(this.showId);
   }
+
+  public filteredSongsControl = new FormControl();
+
+  filteredSongs() {
+    const filterValue = this.filteredSongsControl.value;
+    return filterValue ? this.songs.filter(_ => filterSong(_, filterValue)) : this.songs;
+  }
 }