CODEWITHSUNDEEP
angular
Raviteja Avvari
Raviteja Avvari

Reputation: 250

Angular2 @Input issue

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

Upvotes: 0

Views: 194

Answers (3)

parmod dudeja
parmod dudeja

Reputation: 1

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);
            });
        }
    }

Upvotes: 0

MAHESH VALIYA VEETIL
MAHESH VALIYA VEETIL

Reputation: 193

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>

Upvotes: 0

Thierry Templier
Thierry Templier

Reputation: 202316

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...

Upvotes: 2

Related Questions