client/src/app/header/header.component.ts

   1 import { filter, map } from 'rxjs/operators'
   2 import { Component, OnInit } from '@angular/core'
   3 import { NavigationEnd, Router } from '@angular/router'
   4 import { getParameterByName } from '../shared/misc/utils'
   5
   6 @Component({
   7   selector: 'my-header',
   8   templateUrl: './header.component.html',
   9   styleUrls: [ './header.component.scss' ]
  10 })
  11
  12 export class HeaderComponent implements OnInit {
  13   searchValue = ''
  14
  15   constructor (private router: Router) {}
  16
  17   ngOnInit () {
  18     this.router.events
  19         .pipe(
  20           filter(e => e instanceof NavigationEnd),
  21           map(() => getParameterByName('search', window.location.href)),
  22           filter(searchQuery => !!searchQuery)
  23         )
  24         .subscribe(searchQuery => this.searchValue = searchQuery)
  25   }
  26
  27   doSearch () {
  28     this.router.navigate([ '/videos', 'search' ], {
  29       queryParams: { search: this.searchValue }
  30     })
  31   }
  32 }