title: How to show value of variable from a service.ts on my html - IONIC 2
body: <p>My requirement is quite simple - I have a service called <code>listproduct.service.ts</code>. This service has a variable called <code>checkfromservice = "check from service"</code></p>
  
  <p>Now I want this to be printed on <code>listproduct.html</code>. I have called it like this <code>{{checkfromservice}}</code>  but it's not printing.</p>
  
  <p>In <code>listproduct.ts</code> I have imported the service:</p>
  
  <p><code>import { ListproductService } from './listproduct.service';</code></p>
  
  <p>and even included in providers <code>providers : [ ListproductService,DeleteProductService ],</code></p>
  
  <p>What else do I need to do to get it printed on HTML?</p>
  
  <p>I am copying code for your reference if needed:</p>
  
  <p><code>listproduct.service.ts</code></p>
  
  <pre><code>import { Injectable } from '@angular/core';
  import { Headers, Http, HttpModule ,Response } from '@angular/http';
  import 'rxjs/add/operator/map';
  
  @Injectable()
  export class ListproductService{
      private _url:string = "http://funiks.com/qbook/api/productmasterjson.php";
      constructor(private _http : Http){}
  
      checkfromservice="chk from service";
  
      listProduct(){
  
          var headers = new Headers();
          headers.append('Content-Type', 'application/x-www-form-urlencoded');
          return this._http.post(this._url,{headers:headers}).map((response:Response) =&gt; response.json());
        // return this._http.post(this._url,{headers:headers})
         //.subscribe(data =&gt; {this.list = data; console.log(data[0].NAME);});
  
      }
  }
  </code></pre>
  
  <p><code>listproduct.ts</code></p>
  
  <pre><code>import { Component, OnInit } from '@angular/core';
  import { IonicPage, NavController, NavParams, LoadingController } from 'ionic-angular';
  import { ListproductService } from './listproduct.service';
  import { DeleteProductService } from './deleteProduct.service';
  import { ProductservicemasterPage } from '../productservicemaster/productservicemaster';
  import { Subscription } from 'rxjs';
  
  /**
   * Generated class for the ListproductPage page.
   *
   * See https://ionicframework.com/docs/components/#navigation for more info on
   * Ionic pages and navigation.
   */
  
  @IonicPage()
  @Component({
    selector: 'page-listproduct',
    templateUrl: 'listproduct.html',
    providers : [ ListproductService,DeleteProductService ],
  })
  export class ListproductPage implements OnInit{
    public list = [];
    loading;
    constructor(private _listProduct : ListproductService,private _deleteProduct : DeleteProductService,
                public navCtrl: NavController,public navParams: NavParams,public loadingCtrl: LoadingController) {
  
                  this.loading = this.loadingCtrl.create({
                    content: 'Please wait...'
                  });
  
                }
  
    ngOnInit() {
      this.loading.present();
       this._listProduct.listProduct().subscribe(data =&gt; {
         this.list = data;
        console.log(data[0].NAME);
        this.loading.dismiss();
        });
    }
  
    deleteProduct(list){
       this._deleteProduct.deleteProduct(list.ID).subscribe();
    }
  
    editProduct(list){
       this.navCtrl.push(ProductservicemasterPage,{"id":list.ID,"productService":list.PRODUCTSERVICE,"name":list.NAME,"unit":list.UNIT,"category":list.CATEGORY,"hsn":list.HSN,"postinghead":list.POSTINGHEAD,"rate":list.RATE,"type":list.TYPE,"sac":list.SACCODE,"tax":list.TAX_CONNECTED,"flag":"U"});
    }
  }
  </code></pre>
  
  <p><code>listproduct.html</code></p>
  
  <pre><code>  &lt;ion-navbar&gt;
      &lt;ion-title&gt;listproduct {{checkfromservice}}&lt;/ion-title&gt;
    &lt;/ion-navbar&gt;
  </code></pre>