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.

Disclaimer: This content is generated by AI.