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.
Support My Work ❤️
If you enjoy my content and find it valuable, consider supporting me by buying me a coffee. Your support helps me continue creating and sharing useful resources. Thank you!
Connect with Me 🌍
Let’s stay connected! You can follow me or reach out on these platforms:
🔹 YouTube – Tutorials, insights & tech content
🔹 LinkedIn – Professional updates & networking
🔹 GitHub – My open-source projects & contributions
🔹 Instagram – Behind-the-scenes & personal updates
🔹 X (formerly Twitter) – Quick thoughts & tech discussions
I’d love to hear from you—whether it’s feedback, collaboration ideas, or just a friendly hello!
Disclaimer
This content has been generated with the assistance of AI. While I strive for accuracy and quality, please verify critical information independently.
Top comments (0)