Extract input value using reference of input

Question

I am trying to update the use the input value to make backend call

<input type="text" #id/>
<button (click)="getPerson($event, '/person/id=id.value')">

When people click on it the backend call is going as /person/id=id.value instead of entered id.

Answer 1

You should be moving the id.value outside '' and append it instead.

<input type="text" #id/>
<button (click)="getPerson($event, '/person/id=' + id.value)">

Answer 2

<button (click)="getPerson($event, '/person/id=' + id.value)">

you just need to make sure you're building your string correctly.

On a broader note, you might want to ask yourself why you're passing that full string from template instead of just passing the input value and handling the rest in your typescript code.

Answer 3

<input type="text" #id/>
<button (click)="getPerson($event, `/person/id=${id.value}`)">

P.S: Take care that they are 'back tips' ( ` )