How to execute an event before a routerLink executes in a button

Question

I am trying to execute an event before a routerLink in angular 4.

I'm interested in the button at the very bottom of my page.

<div >
<button class="btn btn-primary"
(click)="createTeacher()"
 routerLink ='/teacher'
 >Submit</button>
</div>

I want to know if there is a way to make sure the (click)="createTeacher()" event happens before the routerlink shifts the page, so the recent create will appear in that new list.

<form class="teacher">
  <div class="form-group">
      <label for="">Name</label>
      <input required [(ngModel)]=teacher.name name="name"
        #name="ngModel" 
        id ="name" 
        type="text" 
        class="form-control">
        <div class="alert alert-danger" 
          *ngIf="name.touched && !name.valid">
          Name is required
        </div>
      <label for="">About Me</label>
      <textarea [(ngModel)]=teacher.aboutMe name="about" 
        #name="ngModel"
        id="about" 
        cols="30" 
        rows="10" 
        class="form-control">
      </textarea>
      <label for="">Location</label>
      <input required [(ngModel)]=teacher.location name="loc"
      #name="ngModel"
      id="loc"
      type="text"
      class="form-control">
      <label for="">Email</label>
      <input required [(ngModel)]=teacher.email name="email"
      #name="ngModel"
      id="email"
      type="text"
      class="form-control">
      <label for="">Phone</label>
      <input required [(ngModel)]=teacher.phone name="phone"
      #name="ngModel"
      id="phone"
      type="text"
      class="form-control">
    </div>
    <div >
    <button class="btn btn-primary"
    (click)="createTeacher()"
     routerLink ='/teacher'
     >Submit</button>
    </div>
</form>

Following is my component that the Html is associated with.

import { RouterModule } from '@angular/router';
import { Component, OnInit } from '@angular/core';
import ITeacherModelAngular from '../Share/ITeacherModelAngular';
import { TeacherService } from '../teacher-service.service';
import TeacherModel from '../Share/TeacherModel';

@Component({
  selector: 'app-new-teach-form',
  templateUrl: './new-teach-form.component.html',
  styleUrls: ['./new-teach-form.component.css']
})
export class NewTeachFormComponent implements OnInit {
  teacher: TeacherModel;
  constructor(private service$: TeacherService) {
    this.teacher = new TeacherModel();
   }

  ngOnInit() {
  }

  createTeacher() {
    this.service$.createTeacher(this.teacher);
    this.service$.getTeacherIndex();
  }

}

Any help will be appreciated, Thanks.

You could remove the `routerLink` param and just do a `router.navigate('your-url')` in the `createTeacher` method? That why you control the order of actions better — Klaas Cuvelier, May 29 '18 at 21:34

Avinash · Accepted Answer · 2018-05-30T18:16:46.950

I think the event createTeacher() will be triggered before routerLink is executed, but in case you are dealing with a post call in this.service$.createTeacher(this.teacher); you may be navigating before the post call is successful. If you don't want to navigate until the post call is successful. you can handle the route inside createTeacher() method.

import { Router } from '@angular/router';

inject it to constructor

constructor(private service$: TeacherService, private router: Router)

and in the method use router.navigate();

createTeacher() {
    this.service$.createTeacher(this.teacher);
    this.service$.getTeacherIndex();
    // trigger the route only when createTeacher() is resolved.
    this.router.navigate(['/teacher']);
  }

This really helped an lead me to how to fix my problem. the exact edit i did to make it work was this Thank you for your advice. `this.service$.createTeacher(this.teacher).subscribe(response => { console.log(response.json()); this.route.navigate(['/teacher']); });` — Wesley Taylor, May 30 '18 at 06:00

How to execute an event before a routerLink executes in a button

1 Answers1