Angular2 @Input issue

Question

I am new to Angular2 and my trying my hand using @Input but I am not able to proceed because of the below issue. After the @Input the component does not proceed further. I have verified in chrome developer tools and I see that execution goes outside the class immediately after the @Input

import {Component, Input, OnInit} from 'angular2/core';
    import {Http, HTTP_PROVIDERS} from 'angular2/http';
    import 'rxjs/Rx';

    var availableJobs = [];


    @Component({
      selector: 'job-categories',
      templateUrl:'templates/job.categories.html',
      providers:[HTTP_PROVIDERS]

    })

    export class JobCategories{

      @Input('rows') rows: string;
      @Input('cols') columns: string;


constructor(http: Http){
        http.get('appjs/dummyjson.json').map(res => res.json()).subscribe(
            (data) => {
              availableJobs = data;
              console.log(availableJobs);
            });
        }
    }

Could someone please help me overcome.

The HTML tag is

What does "the component does not proceed further." and "execution goes outside the class" mean? I can't see anything being obviously wrong. — Günter Zöchbauer
– Günter Zöchbauer, Commented Apr 25, 2016 at 6:53
True. Hence, I came to StackOverflow for help. What it means is, F10 on chrome dev tools will not take the execution to next line but it takes me to the end of the class — Raviteja Avvari
– Raviteja Avvari, Commented Apr 25, 2016 at 6:57
I would want the HTTP call happen and see the data in the JSON. Any dummy data is fine for testing — Raviteja Avvari
– Raviteja Avvari, Commented Apr 25, 2016 at 6:59
The inputs and the Http call don't seem to be related. The Http call should be made before the inputs are processed. Input values are assigned when the ngOnChanges() lifecycle callback is called the first time (just before ngOnInit() is called. The constructor is executed before any lifecycle callback is called. — Günter Zöchbauer
– Günter Zöchbauer, Commented Apr 25, 2016 at 7:01

Thierry Templier · Accepted Answer · 2016-04-25 07:41:42Z

2

I would see a problem in your code. You forgot the this keyword within the subscribe callback:

constructor(http: Http){
    http.get('appjs/dummyjson.json').map(res => res.json()).subscribe(
        (data) => {
          this.availableJobs = data; // <-----
          console.log(this.availableJobs);
        });
    }
}

This way you will be able to see / use the availableJobs property in the template of the component...

answered Apr 25, 2016 at 7:41

Thierry Templier

203k44 gold badges407 silver badges365 bronze badges

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

4 Comments

dfsq Over a year ago

Maybe OP didn't forget it, it's defined as local variable var availableJobs = []; not as instance property.

Thierry Templier Over a year ago

Yes but I guess that he wants to use availableJobs in the component template ;-)

Raviteja Avvari Over a year ago

@dfsq Yes, I did declare as a local variable. Thanks for the efforts. The issue is resolved

Thierry Templier Over a year ago

Great! What was the problem?

MAHESH VALIYA VEETIL · Accepted Answer · 2016-05-24 11:08:44Z

0

Seems like the problem is in your html(template). and the dev tools will not brings you into the subscribe method(async call), for that please keep a debugger; inside subscribe.

Would like to see your Html.

should be used like

<job-categories [rows]="someRowVariable" [cols]="someColVariable" ></job-categories>

answered May 24, 2016 at 11:08

MAHESH VALIYA VEETIL

1931 gold badge2 silver badges13 bronze badges

Comments

parmod dudeja · Accepted Answer · 2016-06-25 09:15:05Z

this happened because of defining a availableJobs variable outside a class . Define it within class name JobCategories

import {Component, Input, OnInit} from 'angular2/core';
    import {Http, HTTP_PROVIDERS} from 'angular2/http';
    import 'rxjs/Rx';




    @Component({
      selector: 'job-categories',
      templateUrl:'templates/job.categories.html',
      providers:[HTTP_PROVIDERS]

    })

    export class JobCategories{
      var availableJobs = [];  //Define within a class
      @Input('rows') rows: string;
      @Input('cols') columns: string;


constructor(http: Http){
        http.get('appjs/dummyjson.json').map(res => res.json()).subscribe(
            (data) => {
              availableJobs = data;
              console.log(availableJobs);
            });
        }
    }

Collectives™ on Stack Overflow

Angular2 @Input issue

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related