My Angular App is running version 14. The header contains links for Register, Login, Add New Employee, List of Employees, Update Employee Profile, Employee Profile, Working Hours, and Logout.
https://i.sstatic.net/M1len.png
If a user with an Admin role logs into the site, they should see the following menu items:
- Login
- Register
- Add New Employees
- Update Employee Profile
- List of employees
- Logout
If a user with an employee role logs in, they should see the following menu items:
- Login
- Employee Profile
- Working Hours
- Logout
For users with a support role, the header should display these menu items:
- Login
- List of Employees
- Logout
I'm looking to implement a role-based menu. Can someone assist me with this?
Below is my app.component.html code:
<div>
<nav class="navbar navbar-expand navbar-dark bg-dark">
<a href="#" class="navbar-brand">Dashboard</a>
<div class="navbar-nav mr-auto">
<li class="nav-item">
<a routerLink="register" class="nav-link">Register</a>
</li>
<li class="nav-item">
<a routerLink="login" class="nav-link">Login</a>
</li>
<li class="nav-item">
<a routerLink="" class="nav-link">Add New Employee</a>
</li>
<li class="nav-item">
<a routerLink="" class="nav-link">List of Employees</a>
</li>
<li class="nav-item">
<a routerLink="" class="nav-link">Update Employee Profile</a>
</li>
<li class="nav-item">
<a routerLink="" class="nav-link">Employee Profile</a>
</li>
<li class="nav-item">
<a routerLink="" class="nav-link">Working Hours</a>
</li>
<li class="nav-item">
<a routerLink="" class="nav-link">Logout</a>
</li>
</div>
</nav>
<div class="container mt-3">
<router-outlet></router-outlet>
</div>
</div>
Here's a link to my app.component.ts file: https://i.sstatic.net/FugCn.png
Folder structure visualized here: https://i.sstatic.net/F3yj1.png
The login-user.component.ts file looks like this:
import { Component } from '@angular/core';
import { User } from 'src/app/models/user.model';
import { UserService } from 'src/app/services/user.service';
@Component({
selector: 'app-login-user',
templateUrl: './login-user.component.html',
styleUrls: ['./login-user.component.css']
})
export class LoginUserComponent {
user: User = {
username: '',
password:''
};
submitted = false;
constructor(private userService: UserService) { }
loginUser(): void {
const data = {
username: this.user.username,
password:this.user.password
};
this.userService.login(data)
.subscribe({
next: (res) => {
console.log(res);
this.submitted = true;
},
error: (e) => console.error(e)
});
}
newUser(): void {
this.submitted = false;
this.user = {
username: '',
password:''
};
}
}
enter code here
Here's a snippet from my user.service.ts file:
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
import { User } from '../models/user.model';
const baseUrl = 'http://localhost:8080/api/user';
@Injectable({
providedIn: 'root'
})
export class UserService {
constructor(private http: HttpClient) { }
signup(data: any): Observable<any> {
return this.http.post(baseUrl+"/signup", data);
}
login(data: any): Observable<any> {
return this.http.post(baseUrl+"/login", data);
}
getAll(): Observable<User[]> {
return this.http.get<User[]>(baseUrl);
}
...
}
And finally, my app-routing.module.ts setup:
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
...
To learn more about implementing a role-based menu in Angular 14, check out this helpful thread on Stack Overflow: Angular Role Based Menu And Page Routing