I am currently in the process of developing navigation tools using a wizard for a web application.
At this stage, the wizard functionality includes 2 navigation buttons (back/next) on each page. Additionally, there is a request from the product owner to incorporate a top navigation panel that allows users to easily switch between pages without navigating throughout the entire site. To implement this panel, I am using RouterLink to generate links to specific pages.
However, there is a minor issue with my implementation. When I utilize the top navigation panel to move between pages and then try to use the navigation buttons, the navigation wizard function stops working correctly (the error message displayed is: "this.onNext is not a function at GeneralInfoComponent.next (generalinfo.component.ts:53)").
Below is the code snippet:
Generalinfo.component.ts
import { Component, OnInit, Input } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { Router } from '@angular/router';
import { EvaluationService } from '../evaluation.service';
import { InfoGeneral } from './model';
import { WizardComponent } from './../wizard/index';
@Component({
moduleId: module.id,
selector: 'generalinfo-cmp',
templateUrl: 'generalinfo.component.html'
})
export class GeneralInfoComponent {
@Input() onNext: any;
generalInfo: InfoGeneral;
form: FormGroup;
wizard: ClaimStep;
constructor(
private fb: FormBuilder,
private evaluationService: EvaluationService
) {
this.initForm();
this.generalInfo = evaluationService.getGeneralInfo();
}
initForm() {
this.form = this.fb.group({
generalInfo: this.fb.group({
consultantFirstName: ['', Validators.required],
consultantLastName: ['', Validators.required],
consultantPhone: ['', Validators.required],
consultantEmail: ['', Validators.required],
consultantWishedJob: ['', Validators.required],
managerName: ['', Validators.required],
consultantExperience: ['', Validators.required],
consultantMinRemuneration: ['', Validators.required],
consultantMaxRemuneration: ['', Validators.required],
consultantAvailableDate: ['', Validators.required],
consultantInterviewDate: ['', Validators.required],
consultantInterviewHour: ['', Validators.required],
consultantComment: ['', Validators.required]
})
});
}
next() {
this.onNext();
}
}
RandomPage.component.html (to display the navigation panel links)
[...]
<a [routerLink]="['/dashboard/evaluation/generalinfo/']" skipLocationChange><span class="label">✓</span></a>
[...]
wizard.component.html
<generalinfo-cmp *ngIf="wizard.currentStep === 1" [onNext]="onNext"></generalinfo-cmp>
<matrice-cmp *ngIf="wizard.currentStep === 2" [onBack]="onBack" [onNext]="onNext"></matrice-cmp>
<entretienrh-cmp *ngIf="wizard.currentStep === 3" [onBack]="onBack" [onNext]="onNext" ></entretienrh-cmp>
<entretienmgr-cmp *ngIf="wizard.currentStep === 4" [onBack]="onBack" [onNext]="onNext" ></entretienmgr-cmp>
<entretiendir-cmp *ngIf="wizard.currentStep === 5" [onBack]="onBack" [onNext]="onNext" ></entretiendir-cmp>
<proposition-cmp *ngIf="wizard.currentStep === 6" [onBack]="onBack"></proposition-cmp>
wizard.component.ts
import { Component, Inject } from '@angular/core';
import { ClaimStep } from './wizard.service';
@Component({
moduleId: module.id,
selector: 'wizard-cmp',
templateUrl: 'wizard.component.html',
providers: [ClaimStep],
})
export class WizardComponent {
wizard: ClaimStep;
constructor(private claimStep: ClaimStep) {
this.wizard = claimStep;
}
onNext = () => {
this.wizard.addStep();
}
onBack = () => {
this.wizard.subtractStep();
}
onSwitch = () => {
console.log(this.wizard.getCurrentStep());
}
}
wizard.service.ts
import {Injectable} from '@angular/core';
@Injectable()
export class ClaimStep {
currentStep: number;
constructor() {
this.currentStep = 1;
}
addStep(): number {
return this.currentStep++;
}
subtractStep() {
this.currentStep = this.currentStep - 1;
return this.currentStep;
}
getCurrentStep() {
return this.currentStep;
}
}
If you have any suggestions or solutions, they would be greatly appreciated.