import { Component, OnInit } from '@angular/core'; import { AngularFireAuth } from '@angular/fire/auth'; import { NgForm } from '@angular/forms'; import { Router } from '@angular/router'; @Component({ selector: 'app-header', template: ` <div class="header"> <div class="header__left"> <mat-icon class="header__icon">menu</mat-icon> <img [routerLink]="['/']" class="header__logo" src="/assets/logo.svg" alt="youtube logo" /> </div> <form #searchForm="ngForm" (ngSubmit)="submit(searchForm)" class="header__middle" > <input ngModel name="search" #search="ngModel" id="search" class="header__search" type="search" placeholder="Search" required /> <button class="header__searchBtn" type="submit" [disabled]="!searchForm.valid" > <mat-icon class="header__icon">search</mat-icon> </button> </form> <div class="header__right"> <mat-icon class="header__icon" [routerLink]="['/create']" title="create new event" >open_in_new</mat-icon > <mat-icon class="header__icon">video_call</mat-icon> <mat-icon class="header__icon">apps</mat-icon> <mat-icon class="header__icon">notifications</mat-icon> <img [routerLink]="['/profile']" [src]="user?.photoURL" class="mat-card-avatar" title="Your Profile" /> </div> </div> `, styles: [ ` .header { display: flex; align-items: center; justify-content: space-between; padding: 0 20px; position: sticky; top: 0; background-color: white; z-index: 100; } .header__icon { line-height: unset; cursor: pointer; } .header__logo { height: 75px; margin-left: 20px; cursor: pointer; } .header__logo:focus { outline: none; } .header__left, .header__middle, .header__right { display: flex; align-items: center; } .header__middle { width: 40%; border: 1px solid black; } .header__middle > input { flex: 1; border: none; padding: 0 10px; } .header__middle > input:focus, .header__middle > input:active { outline: none; border: none; } .header__searchBtn { width: 70px !important; background-color: #fafafa; border: none; border-left: 1px solid lightgray; color: gray; text-align: center; cursor: pointer; } .header__right > .header__icon { margin-right: 10px; } .mat-card-avatar { height: 40px; width: 40px; border-radius: 50%; flex-shrink: 0; object-fit: cover; cursor: pointer; } `, ], }) export class HeaderComponent implements OnInit { user: any = null; constructor(private auth: AngularFireAuth, private router: Router) { this.auth.authState.subscribe((authState) => (this.user = authState)); } ngOnInit(): void {} public submit(form: NgForm): void { if (form.valid) { this.router.navigate(['search', form.value.search]) } } }