Explain Me The Code , Whats Happening In Detail. Header.Component.Ts File Import { Component, HostListener, OnInit, ViewChild } From '@Angular/Core'; Import { Router } From '@Angular/Router'; Import { ToastrService } From 'Ngx-Toastr'; Import { AuthService } From '../_service/Auth.Service'; Import { LoaderService } From

explain me the code , whats happening in detail.

header.component.ts file

import { Component, HostListener, OnInit, ViewChild } from '@angular/core';

import { Router } from '@angular/router';

import { ToastrService } from 'ngx-toastr';

import { AuthService } from '../_service/auth.service';

import { LoaderService } from '../_service/loader.service';

@Component({

selector: 'app-header',

templateUrl: './header.component.html',

styleUrls: ['./header.component.css']

})

export class HeaderComponent implements OnInit {

@ViewChild('nav') private Top_bar : any;

isLogin : boolean = false;

constructor(

private router : Router,

private toastr : ToastrService,

private loadingService : LoaderService,

private authService : AuthService

) {

if(localStorage.getItem('ba_token')){

this.isLogin = true;

}else{

this.isLogin = false;

}

}

ngOnInit(): void {

this.getUserDetail();

}

@HostListener('window:scroll', [])

onWindowScroll() {

if (window.scrollY > 20 ) {

this.Top_bar.nativeElement.className = 'navbar navbar-expand-lg navbar-dark ftco_navbar bg-dark ftco-navbar-light scrolled awake';

}

if (window.scrollY == 0 ) {

this.Top_bar.nativeElement.className = 'navbar navbar-expand-lg navbar-dark ftco_navbar bg-dark ftco-navbar-light';

}

}

logout(){

// clear the token of auth user

localStorage.clear();

this.authService.loginStatus.next(true);

this.loadingService.isLoading.next(true);

// show success toastr

this.toastr.success('Successfully logged out','Success');3

// navigate to login page

setTimeout(() => {

this.loadingService.isLoading.next(false);

this.router.navigate(['/login']);

}, 1000);

}

getUserDetail() {

this.authService.loginStatus.subscribe((res) => {

if (res) {

if(localStorage.getItem('ba_token')){

this.isLogin = true;

}else{

this.isLogin = false;

}

}

});

}

}

Home.component.ts file

import { Component, OnInit } from '@angular/core';

import { FormBuilder, FormGroup, Validators } from '@angular/forms';

import { Router } from '@angular/router';

import { OwlOptions } from 'ngx-owl-carousel-o';

import { ToastrService } from 'ngx-toastr';

import { OrderService } from '../_service/order.service';

@Component({

selector: 'app-home',

templateUrl: './home.component.html',

styleUrls: ['./home.component.css']

})

export class HomeComponent implements OnInit {

placeOrderForm: FormGroup;

submitted: boolean = false;

customOptions: OwlOptions = {

loop: false,

mouseDrag: true,

touchDrag: true,

pullDrag: true,

dots: true,

navSpeed: 700,

navText: ['', ''],

responsive: {

0: {

items: 1

},

400: {

items: 1

},

740: {

items: 1

},

940: {

items: 1

}

},

nav: true

}

constructor(

private formBuilder: FormBuilder,

private OrderService: OrderService,

private toastr: ToastrService,

private router : Router

) { }

ngOnInit(): void {

this.formDeclaration();

}

formDeclaration() {

this.placeOrderForm = this.formBuilder.group({

Crust: ['', Validators.required],

Flavor: ['', Validators.required],

Size: ['', Validators.required],

Table_No: ['', Validators.required]

})

}

get f() { return this.placeOrderForm.controls }

orderNow() {

this.submitted = true;

if (this.placeOrderForm.invalid) return;

let data = {

Crust : this.placeOrderForm.get('Crust').value.trim(),

Flavor : this.placeOrderForm.get('Flavor').value.trim(),

Size : this.placeOrderForm.get('Size').value.trim(),

Table_No : parseInt(this.placeOrderForm.get('Table_No').value)

}

this.OrderService.placeOrder(data).subscribe(res => {

this.toastr.success('Order Placed Successfully', 'Success');

this.submitted = false;

this.placeOrderForm.reset();

this.placeOrderForm.patchValue({

Crust: '',

Flavor: '',

Size: '',

Table_No: ''

})

this.router.navigate(['/my-orders'])

})

}

numberOnly(event): boolean {

const charCode = (event.which) ? event.which : event.keyCode;

if (charCode > 31 && (charCode 57) && charCode !== 46) {

return false;

}

return true;

}

}