Question: Explain Me The Code , Whats Happening In Detail. Header.Component.Ts File Import { Component, HostListener, OnInit, ViewChild } From '@Angular/Core'; Import { Router } 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;
}
}
Step by Step Solution
There are 3 Steps involved in it
Get step-by-step solutions from verified subject matter experts
Study Help