How to pass input value as parameter to router in Angular

Question

I believe what I'm trying to do is trivial, but I've tried many different things and can't figure it out.

I have two components, SearchComponent and DetailsComponent that displays search results.

A route module:

const routes: Routes = [
{ path: '', component: SearchComponent},
{ path: 'armory/:name', component: DetailsComponent}
];

@NgModule({
imports: [ RouterModule.forRoot(routes) ],
exports: [ RouterModule ]
})

export class AppRoutingModule {}

and an input in search.component.html

<form class="form-inline container-fluid">
  <input type="text" id="name" placeholder="Character name..." class="form-control">
  <button (click)="onSearch( ... <!--name should be here-->)" class="btn">
    <span class="fa fa-search"></span></button>
</form>

and then in search.component.ts:

export class SearchComponent implements OnInit {

constructor(private router: Router) {
}

onSearch(name: string) {
   this.router.navigate(['/armory', name])
}
}

How do I get the name input's value and pass it as a parameter to onSearch()?

What type of form are you using ? Model driven or template driven ? — Nadhir Falta
– Nadhir Falta, Commented Jan 28, 2018 at 4:23

HenryDev · Accepted Answer · 2018-01-28 02:29:26Z

2

If you want to get the value of name you can simply assign a reference to the input field like this #name. Here's what you need to do:

search.component.html

 <form class="form-inline container-fluid">
  <input type="text" id="name" #name  placeholder="Character name..." 
  class="form-control">
  <button (click)="onSearch(name.value)" class="btn">
   <span class="fa fa-search"></span></button>
  </form>

Hope it helps!

answered Jan 28, 2018 at 2:29

HenryDev

5,0136 gold badges31 silver badges70 bronze badges

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

2 Comments

Asalas77 Over a year ago

Can you tell me how to do this for radio button group? pastebin.com/d3bhhD1p here on line 12 instead of 'Feronis' in onSearch()

HenryDev Over a year ago

@Asalas77 Here's a link that will solve your problem: stackoverflow.com/questions/31879497/…

Collectives™ on Stack Overflow

How to pass input value as parameter to router in Angular

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related