How to create a Student Management System in Angular?

Creating a Student Management App in Angular involves several steps, including setting up the development environment, creating the Angular project, designing the app structure, and implementing the features. Here’s a step-by-step guide to help you get started:

Step 1: Set Up the Development Environment

Install Node.js:
Download and install Node.js from nodejs.org.
Install Angular CLI:

   npm install -g @angular/cli

Step 2: Create a New Angular Project

Create the Project:

   ng new student-management-app
   cd student-management-app

Step 3: Generate Components and Services

Generate Components:

   ng generate component student-list
   ng generate component student-details
   ng generate component add-student

Generate Services:

   ng generate service student

Step 4: Set Up Routing

Configure Routing: Open src/app/app-routing.module.ts and set up the routes:

   import { NgModule } from '@angular/core';
   import { RouterModule, Routes } from '@angular/router';
   import { StudentListComponent } from './student-list/student-list.component';
   import { StudentDetailsComponent } from './student-details/student-details.component';
   import { AddStudentComponent } from './add-student/add-student.component';

   const routes: Routes = [
     { path: '', redirectTo: '/students', pathMatch: 'full' },
     { path: 'students', component: StudentListComponent },
     { path: 'students/add', component: AddStudentComponent },
     { path: 'students/:id', component: StudentDetailsComponent },
   ];

   @NgModule({
     imports: [RouterModule.forRoot(routes)],
     exports: [RouterModule]
   })
   export class AppRoutingModule { }

Update app.module.ts:

   import { NgModule } from '@angular/core';
   import { BrowserModule } from '@angular/platform-browser';
   import { AppRoutingModule } from './app-routing.module';
   import { AppComponent } from './app.component';
   import { StudentListComponent } from './student-list/student-list.component';
   import { StudentDetailsComponent } from './student-details/student-details.component';
   import { AddStudentComponent } from './add-student/add-student.component';
   import { FormsModule } from '@angular/forms';
   import { HttpClientModule } from '@angular/common/http';

   @NgModule({
     declarations: [
       AppComponent,
       StudentListComponent,
       StudentDetailsComponent,
       AddStudentComponent
     ],
     imports: [
       BrowserModule,
       AppRoutingModule,
       FormsModule,
       HttpClientModule
     ],
     providers: [],
     bootstrap: [AppComponent]
   })
   export class AppModule { }

Step 5: Implement the Service

Update student.service.ts:

   import { Injectable } from '@angular/core';
   import { HttpClient } from '@angular/common/http';
   import { Observable } from 'rxjs';

   export interface Student {
     id: number;
     name: string;
     email: string;
   }

   @Injectable({
     providedIn: 'root'
   })
   export class StudentService {
     private apiUrl = 'http://localhost:3000/students'; // Adjust the URL based on your backend

     constructor(private http: HttpClient) { }

     getStudents(): Observable<Student[]> {
       return this.http.get<Student[]>(this.apiUrl);
     }

     getStudent(id: number): Observable<Student> {
       return this.http.get<Student>(`${this.apiUrl}/${id}`);
     }

     addStudent(student: Student): Observable<Student> {
       return this.http.post<Student>(this.apiUrl, student);
     }

     updateStudent(id: number, student: Student): Observable<Student> {
       return this.http.put<Student>(`${this.apiUrl}/${id}`, student);
     }

     deleteStudent(id: number): Observable<void> {
       return this.http.delete<void>(`${this.apiUrl}/${id}`);
     }
   }

Step 6: Implement Components

Update student-list.component.ts:

   import { Component, OnInit } from '@angular/core';
   import { StudentService, Student } from '../student.service';

   @Component({
     selector: 'app-student-list',
     templateUrl: './student-list.component.html',
     styleUrls: ['./student-list.component.css']
   })
   export class StudentListComponent implements OnInit {
     students: Student[] = [];

     constructor(private studentService: StudentService) { }

     ngOnInit(): void {
       this.getStudents();
     }

     getStudents(): void {
       this.studentService.getStudents().subscribe(students => this.students = students);
     }

     deleteStudent(id: number): void {
       this.studentService.deleteStudent(id).subscribe(() => {
         this.students = this.students.filter(student => student.id !== id);
       });
     }
   }

Update student-list.component.html:

   <h2>Student List</h2>
   <ul>
     <li *ngFor="let student of students">
       {{ student.name }} - {{ student.email }}
       <button (click)="deleteStudent(student.id)">Delete</button>
       <a [routerLink]="['/students', student.id]">Details</a>
     </li>
   </ul>
   <a routerLink="/students/add">Add Student</a>

Update student-details.component.ts:

   import { Component, OnInit } from '@angular/core';
   import { ActivatedRoute } from '@angular/router';
   import { StudentService, Student } from '../student.service';

   @Component({
     selector: 'app-student-details',
     templateUrl: './student-details.component.html',
     styleUrls: ['./student-details.component.css']
   })
   export class StudentDetailsComponent implements OnInit {
     student: Student | undefined;

     constructor(
       private route: ActivatedRoute,
       private studentService: StudentService
     ) { }

     ngOnInit(): void {
       this.getStudent();
     }

     getStudent(): void {
       const id = Number(this.route.snapshot.paramMap.get('id'));
       this.studentService.getStudent(id).subscribe(student => this.student = student);
     }
   }

Update student-details.component.html:

   <div *ngIf="student">
     <h2>{{ student.name }}</h2>
     <p>Email: {{ student.email }}</p>
     <a routerLink="/students">Back</a>
   </div>

Update add-student.component.ts:

   import { Component } from '@angular/core';
   import { Router } from '@angular/router';
   import { StudentService, Student } from '../student.service';

   @Component({
     selector: 'app-add-student',
     templateUrl: './add-student.component.html',
     styleUrls: ['./add-student.component.css']
   })
   export class AddStudentComponent {
     name: string = '';
     email: string = '';

     constructor(
       private studentService: StudentService,
       private router: Router
     ) { }

     addStudent(): void {
       const newStudent: Student = {
         id: 0,
         name: this.name,
         email: this.email,
       };
       this.studentService.addStudent(newStudent).subscribe(() => {
         this.router.navigate(['/students']);
       });
     }
   }

Update add-student.component.html:

   <h2>Add Student</h2>
   <form (ngSubmit)="addStudent()">
     <label for="name">Name:</label>
     <input id="name" [(ngModel)]="name" name="name" required>

     <label for="email">Email:</label>
     <input id="email" [(ngModel)]="email" name="email" required>

     <button type="submit">Add Student</button>
   </form>
   <a routerLink="/students">Back</a>

Step 7: Set Up a Simple Backend (Optional)

If you don't have a backend yet, you can quickly set up a simple backend using JSON Server.

Install JSON Server:

   npm install -g json-server

Create a db.json File:

   {
     "students": [
       { "id": 1, "name": "John Doe", "email": "john@example.com" },
       { "id": 2, "name": "Jane Smith", "email": "jane@example.com" }
     ]
   }

Start JSON Server:

   json-server --watch db.json --port 3000

Step 8: Run the Angular Application

Run the Angular App:

   ng serve

Navigate to the App: Open a browser and go to http://localhost:4200.

Step 9: Test the Application

Add, View, and Delete Students:
- Use the app to add, view, and delete students.
- Ensure that the data updates correctly and that the UI reflects the changes

This guide provides a foundational approach to creating a Student Management App in Angular. You can further expand and customize it based on your application's requirements.

If you enjoy my content and would like to support my work, you can buy me a coffee. Your support is greatly appreciated!

Disclaimer: This content is generated by AI.