title: Ionic2 - Passing data from provider to page
body: <p>I am learning angular2 and i am trying to understand how to pass data from the provider to a page</p>
  
  <p>Inside the <code>pages</code> folder i have a directory called <code>job-match</code> and <code>job-match.js</code> has this code inside it</p>
  
  <pre><code>import {Component, OnInit} from '@angular/core';
  import {NavController, NavParams} from 'ionic-angular';
  import {JobMatchService} from "../../providers/job-match";
  
  @Component({
    selector: 'page-job-match',
    templateUrl: 'job-match.html'
  })
  export class JobMatchPage implements OnInit{
    private jobs: any = [];
    constructor(
      public navCtrl: NavController,
      public navParams: NavParams,
      private jobMatchService: JobMatchService
  
    ) {
    }
  
    ionViewDidLoad() {
      console.log('ionViewDidLoad JobMatchPage');
    }
  
  
    ngOnInit(){     
      this.jobMatchService.getMatchJobs();
  
    }
  
  }
  </code></pre>
  
  <p>As you will notice i have a <code>provider</code> called <code>JobMatchService</code> which has the data i need <code>getmatchJobs</code></p>
  
  <pre><code>import { Injectable } from '@angular/core';
  import { Http } from '@angular/http';
  import 'rxjs/add/operator/map';
  
  
  @Injectable()
  export class JobMatchService {
  
    constructor(public http: Http) {
      console.log('Hello JobMatch Provider');
    }
  
    private jobs: any = [];
  
    getMatchJobs(){
       this.http.get('assets/data/jobs-match.json').map(res =&gt; res.json()).subscribe(data =&gt; {
        console.log(data);
        this.jobs = data;
      });
  
    }
  }
  </code></pre>
  
  <p>When I do <code>console.log(data);</code> i can see the data I need but I am trying to understand how can i pass that back to the <code>job-match.js</code> and then inside <code>job-match.html</code> how i use it? </p>
  
  <p>I will really appreciate any help as i cant seem to wrap my head around it.</p>