Passing a variable in angular2

Question

I am trying to pass a value from the html file to my component and then add it to my json feed url.

I have managed to get it to the component and print to the html file, but U can't get it appended to the end of my json feed url.

This component and html file is straight from anguler2 cli

app.component.ts

import { Component } from '@angular/core';
import {Http} from '@angular/http';
import {HTTP_PROVIDERS} from '@angular/http';

@Component({
  moduleId: module.id,
  selector: 'app-root',
  templateUrl: 'app.component.html',
  styleUrls: ['app.component.css']
})
export class AppComponent {
  title = 'app works!';

  values = '';
   onKey(value: string) {
    this.values = value + ''; // pass this value to the url below
  }


    people: Array<Object>;
    constructor(http:Http) {
        http.get('http://myurl.com/json_feed.php?q=' + this.values) // get the value from above
        .subscribe(res => {
        this.people = res.json();
      })
    }

}

app.component.html

<h1>
  {{title}}
</h1>

<input #box (keyup)="onKey(box.value)">

{{values}}

<ul *ngFor="let person of people">
  <li class="text">
    {{person.model}}
  </li>
</ul>

Looks a bit weird. The http.get(...) code is executed as first thing when the component is created, but the onKey(...) is only executed later when a key is pressed. That can't work. You need to move the http.get... to onKey() where values is updated. — Günter Zöchbauer
– Günter Zöchbauer, Commented Jul 20, 2016 at 18:24
I tried to place the constructor in the onKey function but it gives an error saying "cannot find constructor", I am new to typescript and it has some weird gotchas — Jason
– Jason, Commented Jul 20, 2016 at 18:37
I didn't mean the constructor. I meant the content of the constructor. You can't move the constructor inside another method. — Günter Zöchbauer
– Günter Zöchbauer, Commented Jul 20, 2016 at 18:44

Ashish Doneriya · Accepted Answer · 2016-07-20 18:30:39Z

2

This is a wrong syntax to append value to the stream. this.values = value + '';

What it is doing is overriding old values again and again. Therefore correct code is this.values = this.values + value + '';

answered Jul 20, 2016 at 18:30

Ashish Doneriya

1,9531 gold badge14 silver badges18 bronze badges

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

2 Comments

Günter Zöchbauer Over a year ago

Great catch! I don't get how this is related to stream. I guess you meant string.

Jason Over a year ago

Unfortunately, that appends to the {{values}} but won't change when deleted and it doesn't pass the value to the url

robisim74 · Accepted Answer · 2016-07-21 12:08:35Z

0

As said by Günter Zöchbauer, the constructor is performed at the time of construction of the component, and you can not use it to update values. You have to do something like this:

export class AppComponent {

  ...

  values = '';

  onKey(value: string) {

    this.values += value + '';

    getData(); // call getData method
  }

  people: Array<Object>;

  constructor(public http: Http) {

  }

  getData(){

      this.http.get('http://myurl.com/json_feed.php?q=' + this.values)
      ...

    })
  }

}

Also please note your http request will not work if you do not provide HTTP_PROVIDERS when you bootstrap the application in your main.ts.

edited Jul 21, 2016 at 12:08

answered Jul 20, 2016 at 20:18

robisim74

7764 silver badges11 bronze badges

4 Comments

Jason Over a year ago

I finally got it to work constructor(http: Http) { this.http = http; } and getData(){ this.http.get('myurl.com/json_feed.php?q=' + this.values) ... })

robisim74 Over a year ago

Ok, I've updated the answer also showing the correct use of the http provider. Greetings

Jason Over a year ago

Hi, we just need this.http=http; in the constructor or it won't work constructor(public http: Http) { this.http = http; }

robisim74 Over a year ago

If you use: constructor(public http: Http), you can avoid using: this.http = http;. It is the short way to instantiate the service.

Collectives™ on Stack Overflow

Passing a variable in angular2

2 Answers 2

2 Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related