activated typescript strict mode

src/app/modules/songs/song-list/filter/filter.component.ts

@@ -13,8 +13,8 @@ import {KEYS} from '../../services/key.helper';
 })
 export class FilterComponent {
   public filterFormGroup: FormGroup;
-  @Input() public route: string;
-  @Input() public songs: Song[];
+  @Input() public route = '/';
+  @Input() public songs: Song[] = [];
   public types = SongService.TYPES;
   public legalType = SongService.LEGAL_TYPE;
   public keys = KEYS;
@@ -28,7 +28,8 @@ export class FilterComponent {
       flag: '',
     });
 
-    activatedRoute.queryParams.subscribe((filterValues: FilterValues) => {
+    activatedRoute.queryParams.subscribe(params => {
+      const filterValues = params as FilterValues;
       if (filterValues.q) this.filterFormGroup.controls.q.setValue(filterValues.q);
       if (filterValues.type) this.filterFormGroup.controls.type.setValue(filterValues.type);
       if (filterValues.key) this.filterFormGroup.controls.key.setValue(filterValues.key);

src/app/modules/songs/song-list/list-item/list-item.component.html

@@ -1,4 +1,4 @@
-<div class="list-item">
+<div class="list-item" *ngIf="song">
   <div class="number">{{ song.number }}</div>
   <div>{{ song.title }}</div>
   <div>

src/app/modules/songs/song-list/list-item/list-item.component.ts

@@ -10,7 +10,7 @@ import {faCheck} from '@fortawesome/free-solid-svg-icons/faCheck';
   styleUrls: ['./list-item.component.less'],
 })
 export class ListItemComponent {
-  @Input() public song: Song;
+  @Input() public song: Song | null = null;
   public faLegal = faBalanceScaleRight;
   public faDraft = faPencilRuler;
   public faFinal = faCheck;

src/app/modules/songs/song-list/song-list.component.ts

@@ -16,10 +16,14 @@ import {ScrollService} from '../../../services/scroll.service';
   animations: [fade],
 })
 export class SongListComponent implements OnInit, OnDestroy {
-  public songs$: Observable<Song[]>;
+  public songs$: Observable<Song[]> | null = null;
   public anyFilterActive = false;
 
-  public constructor(private songService: SongService, private activatedRoute: ActivatedRoute, private scrollService: ScrollService) {}
+  public constructor(
+    private songService: SongService,
+    private activatedRoute: ActivatedRoute,
+    private scrollService: ScrollService
+  ) {}
 
   public ngOnInit(): void {
     const filter$ = this.activatedRoute.queryParams.pipe(