How to refresh the current page using Angular 7?

Question

I went through many links: How to reload the current route with the angular 2 router, but I did not get working solution for me.

I have the edit screen, through Edit Screen I can add student, when I successfully added student, I should be able to see newly added Student in the same screen. Is there any way if we can do this? I am using Angular 7.

addStudents(): void {
    this.student.studentId = this.studentId;
    console.log(this.student);
    this.studentService.saveStudent(this.student).subscribe(response => {
      console.log(response);
      this.memberResponse = response;
    });
    this.ngOnInit();
    this.router.navigate(['/student-edit', this.studentList]);
}

score 0 · Answer 1 · answered Sep 09 '19 at 07:53

If you want to use the same screen then why do you need to change the route? or reload the page?

You can do it by boolean only

Like this

Your ts file

export class myComponent {
    isEditMode = true;

    addStudents(): void {
        this.student.studentId = this.studentId;
        this.studentService.saveStudent(this.student).subscribe(response => {
            this.memberResponse = response;
            isEditMode = false;
        });
    }
}

Now in Html

<div *ngIf="isEditMode">
    // HTML for edit screen
</div>
<div *ngIf="!isEditMode">
   // HTML for view students screen
</div>

score 0 · Answer 2 · answered Sep 11 '19 at 12:13

HTML

<div *ngIf="edit">
    // edit student form 
</div>
<div *ngIf="!edit">
   // show all student table
</div>

TS File

openEditForm() { this.edit = true }  // When user want to edit or add student


// Called when user clicks save on Edit Form
onSaveButtonClick() {
  // Logic to save or edit student using subscription
}

1 . On successful execution of Saving or editing student call the API to GetAllStudents

On successful execution of GetAllStudents set "this.edit = false"

How to refresh the current page using Angular 7?

2 Answers2