provider

Today lets learn about the basics of injectables or providers in Ionic 2. Injectable or provider concept is same as factory or services in Ionic 1 and angular 1.

Injectables are kind of an abstract layer between your application and external or internet data service.

Injectable or Providers: Ionic 2

[youtube https://www.youtube.com/watch?v=f7pCBCECI5M]

YouTube Link: https://www.youtube.com/watch?v=f7pCBCECI5M [Watch the Video In Full Screen.]

Let us first create a provider by using CLI command

ionic g provider Data

g is a short name for generate
Data is our provider name. We can give any name to our provider.

Ionic 2 CLI generates following provider
src/providers/data.ts

import { Injectable } from '@angular/core';
import { Http } from '@angular/http';
import 'rxjs/add/operator/map';
 
@Injectable()
export class Data {
data: any;
  constructor(public http: Http) {
  }
}

We won’t be using Http and map services in this tutorial. We’ll still retain Http reference as we’ll be using it in our next tutorial i.e., passing data between pages using NavParams class.

src/providers/data.ts Full Source Code

import { Injectable } from '@angular/core';
import { Http } from '@angular/http';
import 'rxjs/add/operator/map';
 
@Injectable()
export class Data {
data: any;
  constructor(public http: Http) {
    this.data = [
      {name: 'Microsoft', code: 324, product: 'Windows 10'},
      {name: 'Apple', code: 678, product: 'iPhone 7'},
      {name: 'Google', code: 567, product: 'Pixel'},
      {name: 'Oracle', code: 89, product: 'RDBMS'},
      {name: 'IBM', code: 542, product: 'Computer Hardware and Software'}
    ];
  }
 
  loadAll(){
    return Promise.resolve(this.data);
  };
 
}

Here we declare and initiate an array variable( data ) which has couple of objects as its elements. Each object has a company name, a unique code and a product entry. We also define a method called loadAll() which returns the array variable in the form of a promise.

src/pages/home/home.ts

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { Data } from '../../providers/data';
 
@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
  companies: any;
  constructor(public navCtrl: NavController, public data: Data) {
    this.data.loadAll().then(result => {
      this.companies = result;
    });
  }
}

Here we import the Data provider and then create its instance/reference. Using this reference we call loadAll() method. Since loadAll() method returns a promise, we use then() to capture the result(once the promise is resolved) and then assign the result to a local variable this.companies

src/pages/home/home.html

< ion-header>
  < ion-navbar>
    < ion-title>
      Welcome
    < /ion-title>
  < /ion-navbar>
< /ion-header>
 
< ion-content padding>
  < h2>Company Names< /h2>
  < ion-list>
    < ion-item *ngFor="let Company of companies">
      {{Company.name}} - {{Company.product}}
    < /ion-item>
  < /ion-list>
 
< /ion-content>

Using ngFor directive we iterate through the array and printout the individual company names as a list of items.

Important: Also make sure to import the Data provider inside src/app/app.module.ts file

import { NgModule } from '@angular/core';
import { IonicApp, IonicModule } from 'ionic-angular';
import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';
import { Data } from '../providers/data';
 
 
@NgModule({
  declarations: [
    MyApp,
    HomePage
  ],
  imports: [
    IonicModule.forRoot(MyApp)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    HomePage
  ],
  providers: [Data]
})
export class AppModule {}

Also make sure to specify the class name of the provider(Data) inside providers section.

Output:
Microsoft – Windows 10
Apple – iPhone 7
Google – Pixel
Oracle – RDBMS
IBM – Computer Hardware and Software

Tag: provider

Basics of Injectable or Providers: Ionic 2