better binding for global song filter

src/app/widget-modules/components/application-frame/application-frame.module.ts

@@ -5,6 +5,7 @@ import {RouterModule} from '@angular/router';
 import {FilterComponent} from './navigation/filter/filter.component';
 import {FontAwesomeModule} from '@fortawesome/angular-fontawesome';
 import {LinkComponent} from './navigation/link/link.component';
+import {FormsModule} from '@angular/forms';
 
 
 @NgModule({
@@ -16,7 +17,8 @@ import {LinkComponent} from './navigation/link/link.component';
   imports: [
     CommonModule,
     RouterModule,
-    FontAwesomeModule
+    FontAwesomeModule,
+    FormsModule
   ],
   exports: [
     NavigationComponent

src/app/widget-modules/components/application-frame/navigation/filter/filter.component.html

@@ -1 +1 @@
-<input (input)="onInputChange($event.target.value)" placeholder="Suche">
+<input (ngModelChange)="valueChange($event)" [ngModel]="value" placeholder="Suche">

src/app/widget-modules/components/application-frame/navigation/filter/filter.component.ts

@@ -1,5 +1,5 @@
 import {Component} from '@angular/core';
-import {Router} from '@angular/router';
+import {ActivatedRoute, Router} from '@angular/router';
 
 @Component({
   selector: 'app-filter',
@@ -7,11 +7,15 @@ import {Router} from '@angular/router';
   styleUrls: ['./filter.component.less']
 })
 export class FilterComponent {
+  public value: string;
 
-  constructor(private router: Router) {
+  constructor(private router: Router, activatedRoute: ActivatedRoute) {
+    activatedRoute.queryParams.subscribe(_ => {
+      if (_.q) this.value = _.q;
+    })
   }
 
-  public async onInputChange(text: string): Promise<void> {
+  public async valueChange(text: string): Promise<void> {
     const route = text
       ? this.router.createUrlTree(['songs'], {queryParams: {q: text}})
       : this.router.createUrlTree(['songs']);