Angular 7 - Typescript syntax

Question

I just need to understand the syntax below. I am using angular-archwizard libray for my wizard in my html page.

The HTML

<aw-wizard #wizard>
  <aw-wizard-step [stepTitle]="'Steptitle 1'" [canExit]="canExitStep1">
    <div class="centered-content">
      <div>
        Content: Step 1
      </div>

      <div class="checkbox">
        <input type="checkbox" />
        <label>Allow exiting step 1</label>
      </div>

      <div class="btn-group">
        <button type="button" class="btn btn-secondary" awNextStep>Continue</button>
      </div>
    </div>
  </aw-wizard-step>
</aw-wizard>

TYPESCRIPT

import {Component, OnInit} from '@angular/core';
import {MovingDirection} from 'angular-archwizard';

@Component({
  selector: 'app-can-exit-event',
  templateUrl: './can-exit-event.component.html',
  styleUrls: ['./can-exit-event.component.css']
})
export class CanExitEventComponent implements OnInit {

  public canExitStep1: (MovingDirection) => boolean = (direction) => {
    switch (direction) {
      case MovingDirection.Forwards:
        return true;
      case MovingDirection.Backwards:
        return false;
      case MovingDirection.Stay:
        return true;
    }
  };

  constructor() {
  }

  ngOnInit() {
 }
}

My point of interest is: [canExit]="canExitStep1" and the public canExitStep1: (MovingDirection) in the TypeScript part.

In the typescript part, is that a function and how is the MovingDirection passed? Basically I just need to understand the whole syntax from the html part to the typescript part.

Answer 1

[canExit] can either be a boolean or a function. The function accepts a MovingDirection enum and returns Promise<boolean> or boolean. This function holds any additional check or validation you need to perform to decide, if the step can be exited (both to the next step and to the previous step). If you don't have any logic to perform during the step change just pass in a boolean as the value of [CanExit].

To make it easier to understand you could split the function declaration and function definition like so.

Declaration:

public canExitStep1: (MovingDirection) => boolean;

Definition:

 ngOnInit() {
    this.canExitStep1 = (direction) => {
      switch (direction) {
        case MovingDirection.Forwards:
          return true;
        case MovingDirection.Backwards:
          return false;
        case MovingDirection.Stay:
          return true;
      }
    };
 }

You can read more about the [CanExit] function here - https://www.npmjs.com/package/angular-archwizard#canexit

I'll be happy to clarify any doubts you still may have.