Angular 2 Simple Wizard

my-app.ts

import { Component } from 'angular2/core';
import { MyWizard } from './my-wizard';
import { MyWizardStep } from './my-wizard-step';

@Component({
  selector: 'my-app',
  directives: [
    MyWizard,
    MyWizardStep,
  ],
  template: `
    <my-wizard
      [(step)]="step"
      (finish)="onFinish()">
      <my-wizard-step>
        Hey
      </my-wizard-step>
      <my-wizard-step>
        Yo
      </my-wizard-step>
    </my-wizard>
  `,
})
export class MyApp {
  private step = 1;
  constructor() {
  }

  onFinish() {
    console.log('Finished!');
  }
}

my-wizard-step.ts

import { Component, Input } from 'angular2/core';
import { MyWizard } from './my-wizard';

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

  constructor(
    private parent:MyWizard
  ) {}

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

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

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

my-wizard.ts

import { Component, Input, Output, EventEmitter } from 'angular2/core';

@Component({
  selector: 'my-wizard',
  styles: [`
    :host {
      display: flex;
      flex-direction: column;

    }
    .my-wizard__footer {
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-shrink: 0;
    }
  `],
  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 MyWizard {
  @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;
  }
}