Issue
I have a student-view component in which I have a form which on submission runs function searchStudent and checks if a student is present in students list. If student is present I want to go to the url = "student-view/{rollNo}". I managed to navigate to the url but the student-result component does not render. What is the correct way to acheive this?
my student-view.ts component -
import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
import { Router } from '@angular/router';
import { Student } from 'src/app/Student';
import { StudentDataTransferService } from 'src/app/student-data-transfer.service';
import { StudentResultComponent } from '../student-result/student-result.component';
@Component({
selector: 'app-student-view',
templateUrl: './student-view.component.html',
styleUrls: ['./student-view.component.css']
})
export class StudentViewComponent implements OnInit {
name: string = ""
rollno: number = 0
studentList = this.studentDataTransferService.getData();
constructor(private studentDataTransferService: StudentDataTransferService, private router: Router) {
console.log(this.studentList)
}
ngOnInit(): void {
}
searchStudent(){
for (let i=0; i< this.studentList.length; i++){
if (this.rollno == this.studentList[i].rollNo){
console.log(this.studentList[i])
this.router.navigate(["student-view/" + this.rollno])
}
}
console.log("false")
return false
}
}
my student-view.html component template -
<div class="container">
<div class="text-center my-5">
<h4>Find Result</h4>
</div>
<form (ngSubmit)="searchStudent()">
<div class="form-group row mb-3">
<div class="col"></div>
<div class="col">
<label for="rollno" class="col-sm-2 col-form-label">Roll No.</label>
<input type="text" name="rollno" class="form-control" [(ngModel)]="rollno">
</div>
<div class="col"></div>
</div>
<div class="form-group row mb-3">
<div class="col"></div>
<div class="col">
<label for="name" class="col-sm-2 col-form-label">Name</label>
<input type="text" name="name" class="form-control" id="name" [(ngModel)]="name">
</div>
<div class="col"></div>
</div>
<div class="form-group row mb-3 text-center">
<div class="col"></div>
<div class="col">
<button type="submit" class="btn btn-primary">Search </button>
</div>
<div class="col">
<input type="button" class="btn btn-dark" value="Clear">
</div>
<div class="col"></div>
</div>
</form>
</div>
my app-routing-module.ts
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { LoginPageComponent } from './Components/login-page/login-page.component';
import { StudentResultComponent } from './Components/student-result/student-result.component';
import { StudentViewComponent } from './Components/student-view/student-view.component';
import { TeacherViewComponent } from './Components/teacher-view/teacher-view.component';
const routes: Routes = [
{path: "", component: LoginPageComponent},
{path: "teacher-view", component: TeacherViewComponent},
{path: "student-view", component: StudentViewComponent, children: [{
path: ":rollNo", component: StudentResultComponent
}]},
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
What I am trying to acheive - I want to make student-result component student-view component's child and I want to navigate to student result on submission of form if student entered in form is present in students list. I hardcoded it and it does not render my student-result component on form submission (just changes the url). What is the correct way to acheive this?
Solution
The child route expects there to be a <router-outlet></router-outlet>
in your student-view template. I don't know the whole plan for your app but I'm guessing you don't want ":rollNo" to be a child route. You probably want it to be something like this instead of it being a child route:
{ path: "student-view/:rollNo", component: StudentResultComponent }
Answered By - Jimeh
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.