User Management Grid in Angular

Tuhin Paul
2d
118
0
1

Article

In today's web applications, managing user data efficiently is crucial. This article will guide you through creating a responsive and feature-rich user management grid using Angular. We'll build a solution that supports inline editing, validation, and local storage persistence.

Project Overview

Our user management grid will include the following features.

Display user information in a tabular format
Add new users
Edit existing users inline
Delete users with confirmation
Validate duplicate emails and usernames
Persist data using localStorage
Responsive design with clean UI

Component Structure

Let's break down the implementation into its core components.

The User Interface

The grid layout is structured using clean, semantic HTML with CSS Grid and Flexbox. The main container uses a max-width to ensure readability on larger screens.

.user-grid-container {
    padding: 20px;
    max-width: 1200px;
    margin: 0 auto;
}

The header section features a title and an "Add New" button, arranged using Flexbox.

.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

Data Model

We define a clear interface for our user data.

export interface User {
    id?: number;
    name: string;
    userName: string;
    email: string;
    phone: string;
    website: string;
}

Core Functionality

State Management: The component maintains three key pieces of state.

users: User[] = [];              // All users
editingUser: User | null = null; // Currently edited user
tempUser: User | null = null;    // Temporary state during editing

Data Persistence: We implement local storage-based persistence to maintain data across sessions.

loadUsers() {
    const storedUsers = localStorage.getItem('users');
    this.users = storedUsers ? JSON.parse(storedUsers) : [];
}
saveUsers() {
    localStorage.setItem('users', JSON.stringify(this.users));
}

Inline Editing: The grid supports inline editing using Angular's template syntax.

<ng-container *ngIf="editingUser?.id !== user.id; else editName">
  {{ user.name }}
</ng-container>

<ng-template #editName>
  <input 
    type="text" 
    [value]="tempUser?.name" 
    (input)="updateTempUser('name', $any($event.target).value)"
  >
</ng-template>

Validation and Error Handling: Before saving edits, we validate for duplicate emails and usernames.
```
const isDuplicate = this.users.some(user => 
    user.id !== this.tempUser?.id && 
    (user.email === this.tempUser?.email || 
     user.userName === this.tempUser?.userName)
);
if (isDuplicate) {
    alert('A user with this email or username already exists!');
    return;
}
```
- Temporary State Management: Using a tempUser object during editing prevents direct manipulation of the main data until changes are confirmed.
- Type Safety: We leverage TypeScript's type system to ensure data consistency and catch potential errors during development.
- User Experience: The grid includes hover states and visual feedback for better interaction.
```
.user-table tr:hover {
    background-color: #f5f5f5;
}
```
- Responsive Design: The layout adapts to different screen sizes while maintaining usability.
```
.user-table {
    width: 100%;
    border-collapse: collapse;
    background-color: white;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}
```

To further improve this implementation, consider.

Adding sorting capabilities for each column
Implementing pagination for large datasets
Adding search/filter functionality
Integrating with a backend API instead of localStorage
Adding form validation for email format and required fields
Implementing undo/redo functionality

This implementation provides a solid foundation for managing user data in Angular applications. It demonstrates key concepts like component architecture, state management, and responsive design while maintaining clean, maintainable code.

The solution can be easily extended to handle more complex requirements while serving as a template for similar data management interfaces.

Add