How to pass input value to different route using angular2?

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>


ANSWERS:


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



 MORE:


 ? How to send empty string in routeparams in angular Js?
 ? Condition in queryParams angular2
 ? How do I get routeparams in angularjs
 ? Passing ID parameter from url to a php script using $routeParams in AngularJS?
 ? AngularJS infinite loop when routeParams not null
 ? how to populate a textfield on load in angularjs
 ? angular js $routeParam not working properly
 ? AngularJS NgRoute - Url Changes But view doesnt render,No errors
 ? ng-view not fetching my template Angular 1.6.2
 ? Routes under Routes - Angular 2