1

I have a component ProcessStep with its own ts and html file.:

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';

@Component({
  selector: 'page-process-step',
  templateUrl: 'process-step.html'
})
export class ProcessStep {
totalsteps:number;
steparray:Array<boolean>;
currentstep = 1;

  constructor(public navCtrl: NavController) {}

  ionViewDidLoad() {
    console.log('Hello ProcessStep Page');
  }
  populateStep(n:number){
    for(var i =1; i<=n ; i++){
      this.steparray.push(false);
    }
  }

}

ProcessStep is used in many pages with different step value. When I call populateStep() from other page:

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { ProcessStep } from '../process-step/process-step';

@Component({
  selector: 'page-login',
  templateUrl: 'login.html'
})
export class Login {
  constructor(public navCtrl: NavController,
              public modalCtrl:ModalController,
              public loadingCtrl:LoadingController,
              private processstep:ProcessStep
              ) {
                processstep.populateStep(5);///<-- give error
              }

I got an error:

EXCEPTION: Error in ./Login class Login_Host - inline template:0:0 caused by: No provider for ProcessStep!

How can I prepare the provider for ProcessStep?

sooon
  • 4,718
  • 8
  • 63
  • 116
  • I get new error after adding to `@NgModule.providers`: >No provider for NavController! – sooon Nov 03 '16 at 02:36
  • How to use shared service? is that the same with provider? `ProcessStep` is a view component with minor customisation. I follow @huiting 's answer and it works. However, for some reason `ngFor` is not working. – sooon Nov 03 '16 at 03:17

1 Answers1

2

If ProcessStep is a component used by other components, you should get a reference to it with @ViewChild

import { ViewChild, AfterViewInit } from '@angular/core';

class Login implements AfterViewInit {
  @ViewChild(ProcessStep) step: ProcessStep;

  ngAfterViewInit() {
    step.populateStep(5);
  }
}
sooon
  • 4,718
  • 8
  • 63
  • 116
Paul Samsotha
  • 205,037
  • 37
  • 486
  • 720