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
– Brivvirs, Commented Mar 14, 2017 at 22:14
when it redirects, there is no errors, but the query is empty, like "" @BabarBilal — DingDong
– DingDong, Commented Mar 14, 2017 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
– DingDong, Commented Mar 14, 2017 at 22:25

Babar Hussain · Accepted Answer · 2017-03-14 22:35:42Z

4

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

answered Mar 14, 2017 at 22:35

Babar Hussain

2,9051 gold badge19 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to pass input value to different route using angular2?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related