src/app/app.component.ts
| selector | app-root |
| styleUrls | ./app.component.css |
| templateUrl | ./app.component.html |
Properties |
|
Methods |
constructor(authService: AuthService, router: Router)
|
|||||||||
|
Defined in src/app/app.component.ts:16
|
|||||||||
|
Parameters :
|
| isLoggedIn |
isLoggedIn()
|
|
Defined in src/app/app.component.ts:40
|
|
Returns :
boolean
|
| logout |
logout()
|
|
Defined in src/app/app.component.ts:35
|
|
Returns :
void
|
| ngOnInit |
ngOnInit()
|
|
Defined in src/app/app.component.ts:20
|
|
Returns :
void
|
| Private _isLoggedIn |
Type : boolean
|
Default value : false
|
|
Defined in src/app/app.component.ts:16
|
| userId |
Type : string | null
|
Default value : null
|
|
Defined in src/app/app.component.ts:13
|
| Private userIdSubject |
Type : Subject<string | null>
|
Default value : new Subject<string | null>()
|
|
Defined in src/app/app.component.ts:14
|
import { Component } from '@angular/core';
import { Router } from '@angular/router';
import { AuthService } from './auth.service';
import { User } from './User';
import { Subject } from 'rxjs';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
userId: string | null = null; // Declare userId property with initial value null
private userIdSubject: Subject<string | null> = new Subject<string | null>();
private _isLoggedIn: boolean = false; // private backing field for isLoggedIn
constructor(private authService: AuthService, private router: Router) {}
ngOnInit() {
if (this.authService.isLoggedIn()) {
this.userId = this.authService.getUserId(); // Retrieve the userId from the service
}
this.authService.subscribeToUserIdChanges().subscribe(
(userId: string | null) => {
this.userId = userId;
},
(error: any) => {
console.error('Error fetching user ID:', error);
}
);
}
logout(): void {
this.authService.logout();
this.router.navigate(['/login']);
}
isLoggedIn(): boolean {
return this.authService.isLoggedIn();
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Restaurant Landing Page</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.6.1/font/bootstrap-icons.css">
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light fixed-top">
<a class="navbar-brand" href="#">HungryHub</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav"
aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" routerLink="/restaurants">
<i class="bi bi-house-door"></i> Restaurants
</a>
</li>
</ul>
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" routerLink="/about">
<i class="bi bi-info-circle"></i> About
</a>
</li>
</ul>
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#contact">
<i class="bi bi-envelope"></i> Contact
</a>
</li>
</ul>
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" [routerLink]="['/cart', userId]">
<i class="bi bi-cart3"></i> My Cart
</a>
</li>
</ul>
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" [routerLink]="['/orders', userId]">
<i class="bi bi-journal-check"></i> My Orders
</a>
</li>
</ul>
<ul class="navbar-nav ml-auto">
<ng-container *ngIf="isLoggedIn(); else showLogin">
<li class="nav-item">
<button class="btn btn-secondary btn-sm" (click)="logout()">
<i class="bi bi-box-arrow-right"></i> Logout
</button>
</li>
</ng-container>
<ng-template #showLogin>
<li class="nav-item">
<a class="nav-link" routerLink="/login">
<i class="bi bi-box-arrow-in-right"></i> Login
</a>
</li>
<li class="nav-item">
<a class="nav-link" routerLink="/register">
<i class="bi bi-person-plus"></i> Register
</a>
</li>
</ng-template>
</ul>
</div>
</nav>
<div class="container">
<router-outlet></router-outlet>
</div>
<!-- Footer -->
<footer class="footer bg-dark text-light text-center py-3">
<p>© 2023 Restaurant App. All rights reserved.</p>
</footer>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.4/dist/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>
./app.component.css
/* Footer */
.footer {
background-color: #343a40;
color: #fff;
padding: 20px 0;
}
.footer p {
font-size: 14px;
margin-bottom: 0;
}
/* Navbar styles */
.navbar {
background-color: #f8f9fa;
}
.navbar-brand {
font-weight: bold;
}
.navbar-nav .nav-link {
color: #ffffff;
}
.navbar-nav .nav-link:hover {
color: #007bff;
}
/* Footer styles */
.footer {
background-color: #343a40;
color: #ffffff;
}
/* Container styles */
.container {
margin-top: 20px;
}
/* Navbar styles */
.navbar {
background-color: #f8f9fa;
}
.navbar-brand {
font-weight: bold;
}
.navbar-nav .nav-link {
color: #343a40;
}
.navbar-nav .nav-link:hover {
color: #007bff;
}
/* Footer styles */
.footer {
background-color: #343a40;
color: #ffffff;
position: fixed;
bottom: 0;
left: 0;
width: 100%;
}
/* Container styles */
.container {
margin-top: 50px; /* Adjust the margin-top value based on your navbar height */
margin-bottom: 50px; /* Adjust the margin-bottom value based on your footer height */
padding-bottom: 30px;
}
@media (max-width: 575.98px) {
.container {
margin-top: 60px; /* Adjust the margin-top value for small screens */
}
}