How can I populate user info into edit form angular - html

Question

I have an app that you can import student firstname and lastname data into and it writes to mongodb. I can create new students, and I can view the list of students in the db, but when updating, I can't seem to get the student data to populate into the firstname and lastname input fields.
In my list-students-component.ts, i can select update and it will forward to (the new-student-component) to edit students based on the student ID.
I can't seem to figure out to get this data to populate
<div>
<ul *ngFor ="let student of students let i = index">
<li> {{student._id}}: {{student.firstName}} {{student.lastName}} (index {{i}})
<button mat-button color="warn" (click)="onDelete(student._id)">DELETE</button>
<button mat-button color="accent" [routerLink]="['/editStudent', student._id]">UPDATE</button>
</li>
</ul>
</div>
<div>
<h3>{{mode}} Student Form</h3>
<form (ngSubmit)="onSubmit()" #myForm="ngForm">
<mat-form-field >
<input matInput placeholder="First Name" id="firstname" [(ngModel)]=" firstName" name="firstname" >
</mat-form-field>
<mat-form-field >
<input matInput placeholder="Last Name" id="lastname" [(ngModel)]=" lastName" name="lastname" >
</mat-form-field>
<p>
<button type="submit" mat-raised-button color="primary">Submit</button>
</p>
</form>
</div>
import { Component, OnInit, Input } from '#angular/core';
import { StudentService } from '../student.service';
import { Router } from '#angular/router';
import { ActivatedRoute, ParamMap } from '#angular/router';
import { FormGroup, FormBuilder, FormControl } from '#angular/forms';
#Component({
selector: 'app-new-student-form',
templateUrl: './new-student-form.component.html',
styleUrls: ['./new-student-form.component.css']
})
export class NewStudentFormComponent implements OnInit {
#Input() firstName: string;
#Input() lastName: string;
private mode = 'Add New'; //default mode
private id: string; //student ID
public ngForm = new FormGroup({
firstName: new FormControl('firstName'),
lastName: new FormControl('lastName')
})
constructor(private _myService: StudentService, private router: Router,
public route: ActivatedRoute) { }
onSubmit() {
console.log("You submitted: " + this.firstName + " " + this.lastName);
this._myService.addStudents(this.firstName, this.lastName);
this.router.navigate(['/listStudents'])
.then(() => {
location.reload();
});
}
ngOnInit() {
this.route.paramMap.subscribe((paramMap: ParamMap) => {
if (paramMap.has('_id')) {
this.mode = 'edit'; /*request had a parameter _id */
this.id = paramMap.get('_id');
}
else {
this.mode = 'Add New';
this.id = null;
}
if (this.mode == 'Add New')
this._myService.addStudents(this.firstName, this.lastName);
if (this.mode == 'edit')
this.ngForm.value;
this._myService.updateStudent(this.id, this.firstName, this.lastName);
});
}
}