How to call method from another component angular2

I'm newbie with angular2 that's why i need help i'm creating multi-step form and i need to call method from another component I have SellComponent in this component template i have

<sell-wizard>
  <sell-wizard-step></sell-wizard-step>
</sell-wizard>

And i have to call method which is located in WizardComponent Below codes from components

WizardComponent

import { Component, Input, Output, EventEmitter } from '@angular/core';
@Component({
selector: 'sell-wizard',
template: "
<ng-content></ng-content>
<div
  class="my-wizard__footer">
  <button
    [style.visibility]="isOnFirstStep() ? 'hidden' : 'visible'"
    (click)="stepChange.emit(step - 1)">
    Previous
  </button>
  {{step}} / {{steps}}
  <button
    *ngIf="!isOnFinalStep()"
    (click)="stepChange.emit(step + 1)">
    Next
  </button>
  <button
    *ngIf="isOnFinalStep()"
    (click)="finish.emit(step + 1)">
    {{finishText}}
  </button>
</div>",
})
export class WizardComponent {
@Input() finishText = 'Finish';
@Input() step = 1;
@Output() finish = new EventEmitter();
@Output() stepChange = new EventEmitter();
private steps = 0;
private isOnFinalStep = () => this.step === this.steps;
private isOnFirstStep = () => this.step === 1;

public addStep() {
  const newSteps = this.steps + 1;
  this.steps = newSteps;
  return newSteps;
}}

WizardStepComponent

import { Component, Input } from '@angular/core';
import { WizardComponent } from './wizard.component';

@Component({
  selector: 'sell-wizard-step',
  host: {
    '[style.display]': 'isCurrent ? "block" : "none"',
  },
  template: `<ng-content></ng-content>`,
})
export class WizardStepComponent {
private isCurrent;
private step;

constructor(
  private parent:WizardComponent
  ) {}

ngOnInit() {
  this.step = this.parent.addStep();

  this.isCurrent = this.step === this.parent.step;

  this.parent.stepChange.subscribe(step => {
    this.isCurrent = this.step === step;
  });
 }
}

SellComponent

import { Component, Input} from '@angular/core';


@Component({
  moduleId: module.id,
  selector: 'sell',
  templateUrl: 'sell.component.html'
})
export class SellComponent  {
  private step = 1;

  constructor(){}
}

So in this SellComponent view i tried to call method from WizardComponent

<button type="button" (click)="stepChange.emit(step + 1)">next</button>

And it says Cannot read property 'stepChange' of undefined How do i can call fucntion from another component? Thanks for help


ANSWERS:


Found solution. Thanks to 0x2D9A3

We can access the WizardComponent in our SellComponent by declaring a property on the SellComponent: @ViewChild(WizardComponent) wizard; And then emit an event by accessing the wizard.stepChange.



 MORE:


 ? Angular2: Hide current view when routing to other view
 ? Angular2: Hide current view when routing to other view
 ? Angular2: Hide current view when routing to other view
 ? Angular2: Hide current view when routing to other view
 ? Track Angular2 Current Route
 ? Angular2 Router 3.0 beta 1 ( Child routes via Routerlink failed)
 ? Pass data between Angular2 routes similar to modal dialog
 ? Set a load indicator on page change in Angular2
 ? Set a load indicator on page change in Angular2
 ? Set a load indicator on page change in Angular2