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.

abd995 · Accepted Answer · 2019-12-09 11:38:19Z

4

[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.

edited Dec 9, 2019 at 11:38

answered Dec 9, 2019 at 6:38

abd995

1,86910 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Kihats Over a year ago

I had read the documentation, it's just that I was unable to write a function for [canExit] so I stumbled upon an example in their Github which is the one above. So does this part public canExitStep1: (MovingDirection) => boolean = (direction) => mean it's a function accepting a MovingDirection and returns a boolean? If that's the case then the syntax is a little bit strange for me :-)

abd995 Over a year ago

Maybe if you split the declaration and definition it might be easier to understand the canExit method. I've updated the answer like so. Let me know if it clicks now.

Kihats Over a year ago

Hmmmm, that makes sense. Thank you.

Collectives™ on Stack Overflow

Angular 7 - Typescript syntax

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related