How to redirect to other routerlink in Angular?

Question

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.

The project folder in Github

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: ''};
  }

Answer 1

  // read.component.html
  <button style="margin-right: 5px;" class="btn-warning" (click)="editStudent(i)">Edit</button>
  // read.component.ts 
  editStudent(index: number) {
        this.user = this.usersList[index];
        this.deleteStudent(index);
        this.router.navigateByUrl('/write');
      }

Answer 2

In read.component.html file <a [routerLink]="['/write']"></a> will not work because you have not added any text in it so it will not display in the web so instead of, you can do in

editStudent(index: number) {
    this.user = this.usersList[index];
    this.deleteStudent(index);
    this.router.navigate(['/write']);
  }

How to redirect to other routerlink in Angular?

Question

2 answers

solution1
0 2020-02-21 10:00:40

solution2
0 2020-02-21 10:08:01

How to redirect to other routerlink in Angular?

Question

2 answers

solution1 0 2020-02-21 10:00:40

solution2 0 2020-02-21 10:08:01

solution1
0 2020-02-21 10:00:40

solution2
0 2020-02-21 10:08:01