You've bound your input element to the "tickersymbol" variable. Angular
will make sure that when the user modifies the input that the member
variable on the instance of the component will also be updated.
So, here is what you can do:
*component.TS*
// Note: remove tickersymbolback and tickersymbolfront
// need to declare the member variable or you will get a compile error
tickersymbol: string;
onGetStock() {
this.serverService.getStock(this.tickersymbol)
.subscribe(
(data: any[]) => console.log(data),
(error) => console.log(error)
);
}
*Service.ts*
getStock(symbol: string) {
return this.http.get(*`*https://api.iextrading.com/1.0/stock/
*${encodeURIComponent(symbol)}/quote`*) //this will get updated with the
parsed string from the user submitted value
.map(
(response:Response) => {
const data = response.json();
return data;
}
);
}
`` is string interpolation and ${} is the replacement string. So, if the
symbol the user typed in was "DEMO", the resulting URL would be: "
https://api.iextrading.com/1.0/stock/DEMO/quote";.
On Tue, Nov 7, 2017 at 4:57 PM Arnaud Deman <[email protected]>
wrote:
> Hi,
>
> I try again ;)
>
> I think the interpolation i.e. : '{{tickersymbol}}' can be used in the
> template not in the component.
> In the component you could use this kind of string :
> let apicall: string=`https://api.iextrading.com/1.0/stock/
> <https://www.google.com/url?q=https%3A%2F%2Fapi.iextrading.com%2F1.0%2Fstock%2F&sa=D&sntz=1&usg=AFQjCNFAqHQw6Lci0kqPQ-ab52hw6oGK7Q>
> ${tickersymbol}&&/quote`;
> (note the quote used: `)
>
> And then pass it to the injected service.
>
> Hope this will help !
> Regards,
> Arnaud.
>
> Le mardi 7 novembre 2017 18:55:58 UTC+1, Rich Leach a écrit :
>>
>> Thank you for your help!
>>
>> I think the larger question is, how do I actually parse, and pass, the
>> string (that will represent the actual URL to my web service) from my .html
>> form and into my .ts component (to ultimately inject into the service)?
>>
>> I've been targeting the strategy of trying to combine the 2 strings
>> (tickersymbolfront is always static, tickersymbolback is where the form
>> value from the user gets appended) and then pass that combined value to the
>> method (in the service). I get the feeling I'm doing something silly where
>> I'm not able to join the strings correctly and/or incorrectly passing them
>> to the method....
>>
>>
>> SNIPPETS:
>>
>> .HTML
>>
>> <button class="btn btn-primary" (click)="onGetStock()">Get Stock</button>
>>
>> <input type="text" class="form-control" [(ngModel)]="tickersymbol">
>>
>>
>>
>> .TS
>>
>> ...
>>
>> export class AppComponent {
>> tickersymbolfront:string = 'https://api.iextrading.com/1.0/stock/
>> <https://www.google.com/url?q=https%3A%2F%2Fapi.iextrading.com%2F1.0%2Fstock%2F&sa=D&sntz=1&usg=AFQjCNFAqHQw6Lci0kqPQ-ab52hw6oGK7Q>
>> ';
>> tickersymbolback:string = '{{tickersymbol}}'&&'/quote';
>> apicall={{tickersymbolfront}}+{{tickersymbolback}};
>>
>> ...
>>
>> onGetStock(apicall) {
>> this.serverService.getStock()
>> .subscribe(
>> (data: any[]) => console.log(data),
>> (error) => console.log(error)
>> );
>> }
>>
>>
>>
>> SERVICE.TS
>>
>> ...
>>
>> getStock() {
>> return this.http.get('https://api.iextrading.com/1.0/stock/TTD/quote')
>> //this will get updated with the parsed string from the user submitted value
>> .map(
>> (response:Response) => {
>> const data = response.json();
>> return data;
>> }
>> );
>> }
>>
>>
>>
>> Again, thanks for your help.
>>
>> Rich
>>
>>
>>
>>
>>
>>
>>
>>
>> On Monday, November 6, 2017 at 6:13:10 PM UTC-7, Rich Leach wrote:
>>>
>>> Hi
>>>
>>> I'm trying to build a string from a form that I will ultimately pass as
>>> a url for a service call.
>>>
>>> I have a hard coded string, something like '
>>> https://api.iextrading.com/1.0/stock/IBM/quote'
>>>
>>> ... where "IBM" will be dynamically updated with the user entered value.
>>>
>>> So in my html template I have
>>> <input type="text" class="form-control" [(ngModel)]="tickersymbol">
>>> <div>
>>> https://api.iextrading.com/1.0/stock/{{tickersymbol}}/quote
>>> </div>
>>>
>>> ...which outputs my desired string to the screen.
>>>
>>> Like I said, n00b question, but how/where would I capture the value from
>>> the form field and then pass it to my service?
>>>
>>> Thanks in advance,
>>>
>>> Rich
>>>
>> --
> You received this message because you are subscribed to the Google Groups
> "Angular and AngularJS discussion" group.
> To unsubscribe from this group and stop receiving emails from it, send an
> email to [email protected].
> To post to this group, send email to [email protected].
> Visit this group at https://groups.google.com/group/angular.
> For more options, visit https://groups.google.com/d/optout.
>
--
Lucas Lacroix
Computer Scientist
Advanced Technology Division, MEDITECH <http://ehr.meditech.com/>
781-774-2293
--
You received this message because you are subscribed to the Google Groups
"Angular and AngularJS discussion" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To post to this group, send email to [email protected].
Visit this group at https://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.
