How to pass input value to different route using angular2?

Question

So I have two components, HomePageComponent and StudentsViewComponent. In HomePageComponent I have a input tag:

<input type="text" #careerObj class="modules" placeholder="Career Objective ( software engineer)">
<button class="submit" routerLinkActive="active" [routerLink]="['/students', careerObj.value  ]">Search</button>

and I want to pass the value of this input to studentsViewComponent using params.

It redirects to the correct route, but the param is empty. The value is always empty, and Im not sure why.

Here is my route:

  {
    path: 'students/:searchQuery',
    component: StudentsViewComponent
  },

ngOnInit() {
  this.activatedRoute.params.subscribe((params: Params) => {
    console.log(params);
  });
}

not sure why the param is empty.

Please help

There is nothing wrong with your provided code example. I reproduced your example and it works... Try to change route from your component using `Select(val: string) { this.router.navigate(['/ad/' + val]); }` to find a problem — Brivvirs, Mar 14 '17 at 22:14
when it redirects, there is no errors, but the query is empty, like `""` @BabarBilal — DingDong, Mar 14 '17 at 22:24
Thanks, your solution works, but I'm dead confused as to why your solution works. Why doesn't my way work? You could provide your answer in complete so that I can accept your solution. @Brivvirs — DingDong, Mar 14 '17 at 22:25

score 4 · Accepted Answer · answered Mar 14 '17 at 22:35

First of all the routerlink directive have issues with button types as I saw lastly on github second thing you are using element reference to pass value to router link directive use the official model binding way routerlink probably one of them is causing issue. Try this,

 <input type="text" [(ngModel)]="route" class="modules" placeholder="Career Objective ( software engineer)">
 <button class="submit" routerLinkActive="active" [routerLink]="['/students', route]">Search</button>

Or

 <input type="text" [(ngModel)]="route" class="modules" placeholder="Career Objective ( software engineer)">
 <button class="submit" (click)="navigate()">Search</button>

and use this function is component

navigate(){
 this.router.navigate(["students", this.route]);
}

dont forget to inject router

How to pass input value to different route using angular2?

1 Answers1