Hello everyone, if you’re in search of a responsive and user-friendly admin dashboard template in Angular 20+, then you’ve come to the right place! Today this blog post I will show you How to Build a User Management Page in Angular 20 Using the Free Mantis Admin Dashboard?
Angular 20 came and Bootstrap 5 also. If you are new then you must check below two links:
In this guide, we’ll walk through how to build a User Management Page in Angular 20 from scratch using the Mantis dashboard. You will learn how to:
- Create a new Angular 20 project based on Mantis
- Add a dedicated User Management page
- Display users in a clean, modern table
- Add Edit & Delete icons using inline SVG
- Add an “Add User” button with a Bootstrap modal
- Add the User page to the sidebar navigation
- Use static demo data (no backend required)
This tutorial is perfect for beginners, students, and developers building admin panels, CRM systems, SaaS dashboards, HR tools, or internal company portals.
Why Use Mantis Free Angular Dashboard?
The Mantis Free Angular Admin Template by CodedThemes provides:
- ✔ Modern UI
- ✔ Bootstrap 5 styling
- ✔ Ready-made dashboard layout
- ✔ Lightweight and fast
- ✔ No Angular Material required
- ✔ Perfect for admin dashboards & internal tools
It allows you to build your application structure without worrying about basic UI components such as topbars, sidebars, typography, spacing, and color schemes.
Step 1: Setting Up the Mantis Angular Dashboard
First, download or clone the free Mantis Angular template:
git clone https://github.com/codedthemes/mantis-free-react-admin-template
// Then install dependencies:
npm install
ng serve -o
//You now have a fully working Angular 20 dashboard!Step 2: Create the User Management Page
Inside your Angular project, generate a new component:
ng g c pages/user-management
Step 3: Add below code inside user-management.html file:
<div class="user-management page-content">
<div class="d-flex justify-content-between align-items-center mb-3">
<div class="d-flex align-items-center">
<div class="avatar-circle me-2">U</div>
<h4 class="mb-0">User Management</h4>
</div>
<div>
<!-- Add User button (HTML-driven, opens Bootstrap modal) -->
<button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#addUserModal" type="button">
<svg width="16" height="16" viewBox="0 0 24 24" class="me-1" aria-hidden="true">
<path fill="currentColor" d="M19 13H13V19H11V13H5V11H11V5H13V11H19V13Z"></path>
</svg>
Add User
</button>
</div>
</div>
<div class="card">
<div class="card-body p-0">
<div class="table-responsive">
<table class="table table-hover mb-0">
<thead class="table-light">
<tr>
<th scope="col">Name</th>
<th scope="col">Email</th>
<th scope="col">Role</th>
<th scope="col">Status</th>
<th scope="col" class="text-end">Actions</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let u of users">
<td>
<div class="d-flex align-items-center">
<div class="avatar-circle me-2">{{ u.name.charAt(0) }}</div>
<div>
<div class="fw-semibold">{{ u.name }}</div>
<div class="text-muted small">{{ u.email }}</div>
</div>
</div>
</td>
<td>{{ u.email }}</td>
<td>{{ u.role }}</td>
<td>
<span class="badge" [ngClass]="{
'bg-success text-white': u.status === 'Active',
'bg-warning text-dark': u.status === 'Pending',
'bg-secondary text-white': u.status === 'Inactive'
}">{{ u.status }}</span>
</td>
<td class="text-end">
<button class="btn btn-sm btn-light me-1" (click)="onEdit(u)" title="Edit">
<!-- pencil svg -->
<svg width="16" height="16" viewBox="0 0 24 24" aria-hidden="true">
<path fill="currentColor" d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04a1 1 0 0 0 0-1.41l-2.34-2.34a1 1 0 0 0-1.41 0L15.13 4.9l3.75 3.75 1.83-1.61z"/>
</svg>
</button>
<button class="btn btn-sm btn-light text-danger" (click)="onDelete(u)" title="Delete">
<!-- trash svg -->
<svg width="16" height="16" viewBox="0 0 24 24" aria-hidden="true">
<path fill="currentColor" d="M6 19a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"/>
</svg>
</button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<!-- Modal (only UI, no logic) -->
<div class="modal fade" id="addUserModal" tabindex="-1" aria-labelledby="addUserModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<form> <!-- plain form, no submit handler -->
<div class="modal-header">
<h5 class="modal-title" id="addUserModalLabel">Add User (Demo)</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<div class="mb-3">
<label class="form-label">Full name</label>
<input type="text" class="form-control" placeholder="Jane Doe" />
</div>
<div class="mb-3">
<label class="form-label">Email</label>
<input type="email" class="form-control" placeholder="jane@example.com" />
</div>
<div class="row g-2">
<div class="col">
<label class="form-label">Role</label>
<select class="form-select">
<option>User</option>
<option>Admin</option>
<option>Manager</option>
</select>
</div>
<div class="col">
<label class="form-label">Status</label>
<select class="form-select">
<option>Active</option>
<option>Pending</option>
<option>Inactive</option>
</select>
</div>
</div>
<small class="text-muted d-block mt-2">Demo only.</small>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-light" data-bs-dismiss="modal">Cancel</button>
<!-- Close modal on click (no form submit) -->
<button type="button" class="btn btn-primary" data-bs-dismiss="modal">Add (Demo)</button>
</div>
</form>
</div>
</div>
</div>
</div>
Step 4: Add below code inside user-management.ts file:
import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
interface User {
id: number;
name: string;
email: string;
role: string;
status: string;
}
@Component({
selector: 'app-user-management',
imports: [CommonModule],
templateUrl: './user-management.html',
styleUrl: './user-management.scss'
})
export class UserManagement {
// Static demo data — replace with API or service later if needed
users: User[] = [
{ id: 1, name: 'Alice Johnson', email: 'alice@example.com', role: 'Admin', status: 'Active' },
{ id: 2, name: 'Bob Smith', email: 'bob@example.com', role: 'User', status: 'Inactive' },
{ id: 3, name: 'Cecilia Brown', email: 'cecilia@example.com', role: 'Manager', status: 'Active' },
{ id: 4, name: 'Daniel Carter', email: 'daniel@example.com', role: 'User', status: 'Pending' },
{ id: 5, name: 'Emma Wilson', email: 'emma@example.com', role: 'User', status: 'Active' }
];
onEdit(user: User) {
alert(`Edit clicked`);
}
onDelete(user: User) {
if (confirm(`Pretend to delete`)) {
}
}
}
Step 5: Add User Page to the Sidebar Navigation and for this add below code inside app/theme/layouts/admin-layout/navigation/navigation.ts file:
...
id: 'other',
title: 'Other',
type: 'group',
icon: 'icon-navigation',
children: [
{
id: 'sample-page',
title: 'Sample Page',
type: 'item',
url: '/sample-page',
classes: 'nav-item',
icon: 'chrome'
},
{
id: 'users-page',
title: 'Users Page',
type: 'item',
url: '/users',
classes: 'nav-item',
icon: 'user'
},
...
]
...Step 6: For routing we need to add below code inside app-routing.module.ts file:
...
children: [
...
{
path: 'sample-page',
loadComponent: () => import('./demo/others/sample-page/sample-page.component').then((c) => c.SamplePageComponent)
},
{
path: 'users',
loadComponent: () => import('./demo/user-management/user-management').then((c) => c.UserManagement)
}
]
...Step 7: For bootstrap script we need to add below code inside Angular.json file and we are done:
...
"scripts": [ "node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"]
...Now we are done guys and if you will have any kind of query then fell free to contact me.
Conclusion
With just a few simple steps, you created a fully functional User Management page in Angular 20 using the Mantis Free Admin Dashboard. This lightweight template provides a perfect starting point for any dashboard or admin panel.
Whether you’re building a CRM, HR system, analytics tool, SaaS platform, or internal application — this setup gives you a clean, professional foundation.
Ajay
Thanks