I am doing a project that is able to let user fill in student details and the is an Edit button which will display the student details into the input area.
There are two routerlink in my project = Add student , Student List.
I want the project redirect to Add student page when I click Edit button in Student List but I cannot do that.
app.module.html
<html><h1>{{title}}</h1>
<nav>
<a class="link" routerLink="/write" routerLinkActive="active">Add Student</a>
<a class="link" routerLink="/read" routerLinkActive="active">Student List</a>
</nav>
<router-outlet></router-outlet>
</html>
app-routing.module.ts
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { WriteComponent } from './write/write.component'
import { ReadComponent } from './read/read.component';
const routes: Routes = [
{path:"write",component:WriteComponent},
{path:"read",component:ReadComponent},
{path:'index',component:ReadComponent}
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
export const routingComponents = [ WriteComponent,ReadComponent]
read.component.html //Student List page
<div class="user-list" *ngIf="usersList && usersList.length">
<h2>List of Student</h2>
<table class="table table-condensed">
<thead>
<tr>
<th>SL.No</th>
<th>Name</th>
<th>Age</th>
<th>College</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let user of usersList; let i = index">
<th>{{i}}</th>
<td>{{user.name}}</td>
<td>{{user.age}}</td>
<td>{{user.college}}</td>
<td>
<button style="margin-right: 5px;" class="btn-warning" (click)="onSelect(i)" (click)="editStudent(i)">Edit</button>
<a [routerLink]="['/write']"></a>
<button class="btn-danger" (click)="deleteStudent(i)">Delete</button>
</td>
</tr>
</tbody>
</table>
</div>
read.component.ts
import { Component, OnInit } from '@angular/core';
import { Student } from '../student';
import { ActivatedRoute , Router, ParamMap} from '@angular/router';
@Component({
selector: 'app-read',
templateUrl: './read.component.html',
styleUrls: ['./read.component.css']
})
export class ReadComponent implements OnInit {
public index;
constructor(private route : ActivatedRoute, private router : Router) { }
user: User;
usersList: User[] = [
{name:"Johnny",age:'22',college:"INTI"},
{name:"Samantha",age:'26',college:"Harvard"},
{name:"Zoe",age:'21',college:"TARUC"},
{name:"Chris",age:'25',college:"Sunway"},
]
ngOnInit(): void {
this.resetForm();
this.route.paramMap.subscribe((params:ParamMap) => {
let Index = parseInt(this.route.snapshot.paramMap.get('index'));
this.index = Index;
});
}
editStudent(index: number) {
this.user = this.usersList[index];
this.deleteStudent(index);
}
deleteStudent(index: number) {
this.usersList.splice(index, 1);
}
resetForm() {
this.user = {age: null, name: '', college: ''};
}
onSelect(index : number){
this.router.navigate(['/user',index])
}
}
interface User {
name: string;
age: string;
college: string;
}
write.component.html //add student page,since the list is the same I will not post again in here else there are too many code
<div class="container">
<h2>Add Student</h2>
<form class="form-inline" autocomplete="off" (submit)="addStudent()">
<div class="form-group">
<label for="email">Name:</label>
<input type="text" class="form-control" id="name" name="name" [(ngModel)]="user.name">
</div>
<div class="form-group">
<label for="pwd">Age:</label>
<input type="number" class="form-control" id="age" name="age" [(ngModel)]="user.age">
</div>
<div class="form-group">
<label for="pwd">College:</label>
<input type="text" class="form-control" id="college" name="college" [(ngModel)]="user.college">
</div>
<button type="submit" class="btn-success">Submit</button>
</form>
write.component.ts
ngOnInit(): void {
this.resetForm();
}
addStudent() {
this.usersList.push(this.user);
this.resetForm();
}
resetForm() {
this.user = {age: null, name: '', college: ''};
}