File

src/app/layout/checkout-header/checkout-header.component.ts

Implements

OnInit

Metadata

selector app-checkout-header
styleUrls checkout-header.component.scss
templateUrl ./checkout-header.component.html

Inputs

currentStep

Type: string

Constructor

constructor(router: Router)

Methods

ngOnInit
ngOnInit()
Returns: void
isActiveRoute
isActiveRoute(step: any)
Returns: void
checkIfClickable
checkIfClickable(clickStep: any)
Returns: void
getRouterLink
getRouterLink(step: any)
Returns: void
isLinkAccessible
isLinkAccessible(step: any)
Returns: void

Properties

Private checkoutStep
checkoutStep: string[]
import { Component, OnInit, Input } from '@angular/core';
import { Router, NavigationStart } from '@angular/router';

@Component({
  selector: 'app-checkout-header',
  templateUrl: './checkout-header.component.html',
  styleUrls: ['./checkout-header.component.scss']
})
export class CheckoutHeaderComponent implements OnInit {

  @Input() currentStep: string;
  private checkoutStep = ['cart', 'address', 'payment'];
  constructor(private router: Router) {
  }

  ngOnInit() {
  }

  isActiveRoute(step) {
    if (!this.currentStep) {
      return false;
    }
    if (step === this.currentStep) {
      return true;
    } else {
      return false;
    }
  }

  checkIfClickable(clickStep) {
    return this.isLinkAccessible(clickStep);
  }

  getRouterLink(step) {
    const isAccessible = this.isLinkAccessible(step);
    let link = [];
    if (isAccessible) {
      link = ['/checkout', step];
    }
    return link;
  }

  isLinkAccessible(step) {
    if (!this.currentStep) {
      return false;
    }
    const currentStepIndex = this.checkoutStep.indexOf(this.currentStep);
    const stepIndex = this.checkoutStep.indexOf(step);

    if (stepIndex <= currentStepIndex) {
      return true;
    } else {
      return false;
    }
  }

}
<div class="checkout-header">
  <div class="full-container">
    <a class="navbar-brand" routerLink="/"><img src="assets/logo.png" alt="Angular Spree"></a>
    <ol class="checkout-steps">
      <li class="step step1">
        <a [ngClass]="{'can-click': checkIfClickable('cart'), 'active': isActiveRoute('cart')}" [routerLink]="getRouterLink('cart')">Bag</a>
      </li>
      <li class="divider"></li>
      <li class="step step2">
        <a [ngClass]="{'can-click': checkIfClickable('address'), 'active': isActiveRoute('address')}" [routerLink]="getRouterLink('address')">Delivery</a>
      </li>
      <li class="divider"></li>
      <li class="step step3">
        <a [ngClass]="{'can-click': checkIfClickable('payment'), 'active': isActiveRoute('payment')}" [routerLink]="getRouterLink('payment')">Payment</a>
      </li>
    </ol>
  </div>
</div>
Legend
Html element
Component
Html element with directive

results matching ""

    No results matching ""