Angular XState State Machine - Using Events

state-machine-page.component.html

<h3>State Machine</h3>

<button (click)="moveBack()">Back</button>
<button (click)="moveNext()">Next</button>

<p>State: {{currentState}}</p>

state-machine-page.component.ts

import { Component, OnDestroy, OnInit } from '@angular/core';
import { StateValue } from 'xstate';
import { StateMachineServiceService } from '../services/state-machine-service.service';

@Component({
  selector: 'app-state-machine-page',
  templateUrl: './state-machine-page.component.html',
  styleUrls: ['./state-machine-page.component.scss']
})
export class StateMachinePageComponent implements OnInit, OnDestroy {

  stateValue: StateValue;
  currentState: string;

  stateChangedSubscription: any;

  constructor(private stateMachineService: StateMachineServiceService) { 

  }

  ngOnInit(): void {
    this.stateValue = this.stateMachineService.getInitialState()
    this.currentState = this.stateValue.toString();

    this.stateChangedSubscription = this.stateMachineService.stateChangedEvent.subscribe((state: StateValue) =>{
      this.stateValue = state;
      this.currentState = state.toString();
    });
  }

  ngOnDestroy(){
    this.stateChangedSubscription.unsubscribe();
  }


  moveBack(){
    this.stateMachineService.back();
  }

  moveNext(){
    this.stateMachineService.next();
  }

}

state-machine-service.service.ts

import { EventEmitter, Injectable } from '@angular/core';
import { createMachine, interpret, Interpreter, StateMachine, StateValue } from 'xstate';

@Injectable({
  providedIn: 'root'
})
export class StateMachineServiceService {

  stateMachine: StateMachine<any, any, any>;
  stateService: Interpreter<any, any, any>;

  public stateChangedEvent: EventEmitter<StateValue>;

  constructor() {
    this.stateChangedEvent = new EventEmitter<StateValue>();

    this.stateMachine = createMachine({
      id: 'toggle',
      initial: 'stage1',
      states: {
        stage1: {
          on: {
            NEXT: 'stage2'
          }
        },
        stage2: {
          on: {
            BACK: 'stage1',
            NEXT: 'stage3'
          }
        },
        stage3: {
          on: {
            BACK: 'stage2',
            NEXT: 'stage4'
          }
        },
        stage4: {
          on: {
            BACK: 'stage3',
          }
        }
      }
    });

    this.stateService = interpret(this.stateMachine)
      .onTransition((state) => {
        console.log(state.value);
        this.stateChangedEvent.emit(state.value);
      })
      .start();
  }

  getInitialState() {
    return this.stateService.initialState.value.toString();
  }

  getCurrentState() {
    return this.stateService.state.value;
  }

  back() {
    this.stateService.send('BACK');
  }

  next() {
    this.stateService.send('NEXT');
  }
}