madoar/angular-archwizard-demo

A demo application for the angular-archwizard Angular 9+ library

angular-archwizard-demo's Issues

canEnter attribute doesnot update if the lambda function returns boolean promise

html snippet
<aw-wizard-step [canEnter]="loadData" stepTitle="EDA">
.ts snippet

 loadData = (direction) => {
    switch (direction) {
      case MovingDirection.Forwards:
        if (this.fname) {
          let request = {
            "path": this.fname
          }
          this
            ._serviceCall
            .loadDataset(request)
            .subscribe(res => {
                return res['status'] === "success"? true:false
            })
        } else {
          return false
        }
    }

  }

The canEnter attribute doesnot update,hence i am unable to go to the next wizard.
What possible wrong am I doing here ?

Dinamically Add Nested Step

Hi,

I have a aw-wizard with 3 aw-wizard-step, the first one have a form where I want to put the number of steps of the nested wizard I have inside of the second aw-wizard-step, its creating the aw-wizard-navigation-bar in the right way, but is not rendering the content inside each aw-wizard-step, if I define the array on the constructor when the whole component is rendered the first time it work right, but when I update that variable component using a service or a localstore variable the content of each step is not rendered. Could you give any suggestion?

[canEnter]and[canExit] not working

Hi
I am using this wizard for my form steps. in that, I want to use validation if my step1 data is not filled or is there any api response then it would not go to the next step.
i use [canExit] and [canEnter] for this with lambda function .but it isn't work.
Please help me with this.

Fix "Custom step CSS" example

In the custom step CSS example, the changes style is applied to all steps and not only to the second one.

Navigate in component

Hi,

Thanks for the library!
Is there a way to navigate to a step through code executed on the component, and not through buttons?

Thanks.

Request: Optional Directive optional

Looking to use the awOptionalStep directive optionally. See code snippet for example

<aw-wizard>
  <aw-wizard-step [stepTitle]="wizard.header" [awOptionalStep]="wizard.optional" *ngFor="let wizard of wizardSteps; let first = first; let last = last;">
    …
  </aw-wizard-step>
</aw-wizard>

[CanExit] and [CanEnter] does not pass the MovingDirection

Hi,

I'm trying to use the [CanExit] property to perform form validation before moving to the next step; and to ignore validation for stepping backwards. However, the designated function to be called does not have access to the methods that are in the same Typescript file. It's like they're on 2 separate scopes. If I use an instantiated method (i.e. [canExit]="myFunction()"), the method would have access to the neighboring methods but the MovingDirections argument is not passed. Should I use a different property for this? I don't want the wizard to move forward if the form is invalid.

public onCanExitQuestionsStep(movingDirection): boolean {

    if (movingDirection == MovingDirection.Forwards) {      
      if (this.quoteFormValues && this.quoteFormValues.qualityQuestions.every(x => x.valid)) {
        console.log('All questions are valid');
        return true;
      }
      console.log('All questions are not valid');
      return false;

    } else {
      // Assume we are moving backwards
      console.log('moving backwards');
      return true;
    }
  }

`

[navigationSymbol] with Font Awesome 5 Free

Hi,
I'm trying to specify [navigationSymbol] belonging to Font Awesome 5 Free font family.
For example:

<aw-wizard-step
    stepTitle="Insert data"
    [navigationSymbol]="{ symbol: '&#xf2dd;', fontFamily: 'Font Awesome 5 Free' }">

It seems that it can't find font family. I've readed about font-weight: 900; but it does not seems to be the problem.

The only way I can see correctly the icon is by adding this rules into styles.scss

aw-wizard-navigation-bar li:after {
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
} 

If I remove font-family from scss it displays the square char

exit wizard after doing some action like making http call

I want to exit wizard after completing http request. Please help me
in component
resetWizard = false; finishFunction(){ this.myservice.getData().subscribe((data) => { this.resetWizard = true; }) }
in html
<aw-wizard-step stepTitle="test" [navigationSymbol]="{ symbol: '5' }" (stepEnter)="stepEnterEvents($event)" [canExit]="resetWizard"> <div class="card"> <div class="card-body"> testing data </div> <div class="card-footer"> <button type="button" class="btn btn-primary pull-left" awPreviousStep>Previous Step</button> <button type="button" class="btn btn-primary pull-right" [awGoToStep]="{ stepIndex: 0 }" (click)="finishFunction()" >Finish</button> </div> </div> </aw-wizard-step>

Programmatic goToStep not working

Hi, I'm using this great library but the goToStep function is not working.

This works: this.wizardElement.goToNextStep();
This doesn't: this.wizardElement.goToStep(2) , I've already checked, and the step is rendered and functional.

Thanks.

I don't want to allow to goto the next step if user don't enter data in all the Required field in current page

I am using Angular 4 with Reactive Form, I am using angular-archwizard for make multi step form, currently it allows me to go to next step without entering all value of required field, I don't want to allow that, I want to go next step if I entered value in all required field,

how can I do this ???

Navigation to a particular step on a click

@madoar

Here I have another issue. I need to navigate to second step when clicked on the image icon. (Image icon is present outside the wizard). Screenshot attached for your reference.

Could you please let me know what needs to be done here.

Conditionally add nextStep directive

Hi ,

I have decided to use this library now in one of my project.

From Step1 if user select some options then From Step 2 (Next Button ) will call COMPLETE.
If user does not select any option then STEP 2 (Next Button) will call NextStep.

I was not able to writeup conditional directive

this nextStep I want conditional.

Thanks
Manish Pandit

Question - Content of steps

Modoar, is recommended work with contents steps like way:

  <aw-wizard>
    <aw-wizard-step stepTitle="Check-In">
      <page-solicitacao-proposta-checkin></page-solicitacao-proposta-checkin>
    </aw-wizard-step>
  <aw-wizard-step stepTitle="Qualificação">
      <page-solicitacao-proposta-qualificacao></page-solicitacao-proposta-qualificacao>
    </aw-wizard-step>
    <aw-wizard-step stepTitle="Enviar Proposta">
      <page-solicitacao-proposta-envio></page-solicitacao-proposta-envio>
    </aw-wizard-step>
  </aw-wizard>

Issue with building with enableIvy:false

One of my projects require to turn off the options in tsconfig.json with Angular 9.1.0:

"angularCompilerOptions": {
    "enableIvy": false
  }

This is causing some SCSS issues in your demo project. The class aw-wizard-navigation-bar does not get the correct css class name e.g. class='horizontal small' and therefore the styling for the navigation-bar does not get rendered properly.

To reproduce this, change the flag in tsconfig.json from "enableIvy": true to "enableIvy": false and rebuild and run the demo project. During run time, you will see how the aw-wizard-navigation-bar get rendered. Not sure if this is a bug or by design, but I can't use angular-archwizard with the latest Angular.

Go to arbitrary step using url

Hi, nice library thanks. I'd like to go to an arbitrary step using the url. Is there any way to currently do this.

How to stop marking visited step green in Custom Navigation mode ?

Hi, thanks for this quick demo.

I am following the custom navigation mode from this demo https://madoar.github.io/angular-archwizard-demo/#/navigation-mode/custom

But I can see the visited step is also getting marked green in the forwarding step.

In my application, I want to stop marking green for the visited step ( which is not completed )

I tried multiple things from - https://github.com/madoar/angular-archwizard-demo/blob/develop/src/app/custom-navigation-mode/custom-navigation-mode.ts but not in success.

Please suggest !!!

No matching version found for angular-archwizard@~4.1.0-develop

Running npm - i on a freshly unzipped copy throws:

No matching version found for angular-archwizard@~4.1.0-develop

How to use canExit?

Hello!, do you have any example of archwizard using the canExit attribute of wizard-step?

Creating dynamic components in wizard for *ngFor

hi ,
is there a way to create in this template
angular-archwizard-demo/src/app/wizard-step-ngfor/wizard-step-ngfor.component.html
dynamically created component using the template refrence (#el) in element inside the *ngFor
and changed according to the current Step
thanks in advance,

"ng serve" failed to start

Your global Angular CLI version (6.0.8) is greater than your local
version (1.7.4). The local Angular CLI version is used.

To disable this warning use "ng config -g cli.warnings.versionMismatch false".
** NG Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **
Date: 2018-07-24T10:09:37.704Z
Hash: 27c93922099d4673c048
Time: 16653ms
chunk {inline} inline.bundle.js (inline) 3.85 kB [entry] [rendered]
chunk {main} main.bundle.js (main) 455 kB [initial] [rendered]
chunk {polyfills} polyfills.bundle.js (polyfills) 605 kB [initial] [rendered]
chunk {scripts} scripts.bundle.js (scripts) 163 kB [initial] [rendered]
chunk {styles} styles.bundle.js (styles) 153 kB [initial] [rendered]
chunk {vendor} vendor.bundle.js (vendor) 9.47 MB [initial] [rendered]

ERROR in ./node_modules/raw-loader!./node_modules/postcss-loader/lib??embedded!./node_modules/bootstrap/dist/css/bootstrap.min.
css
Module build failed: BrowserslistError: Unknown browser query dead
at D:\angular-archwizard-demo-master\node_modules\browserslist\index.js:164:11
at Array.reduce ()
at resolve (D:\angular-archwizard-demo-master\node_modules\browserslist\index.js:132:18)
at browserslist (D:\angular-archwizard-demo-master\node_modules\browserslist\index.js:224:16)
at Browsers.parse (D:\angular-archwizard-demo-master\node_modules\autoprefixer\lib\browsers.js:61:16)
at new Browsers (D:\angular-archwizard-demo-master\node_modules\autoprefixer\lib\browsers.js:52:30)
at loadPrefixes (D:\angular-archwizard-demo-master\node_modules\autoprefixer\lib\autoprefixer.js:70:24)
at plugin (D:\angular-archwizard-demo-master\node_modules\autoprefixer\lib\autoprefixer.js:81:24)
at LazyResult.run (D:\angular-archwizard-demo-master\node_modules\postcss\lib\lazy-result.js:277:20)
at LazyResult.asyncTick (D:\angular-archwizard-demo-master\node_modules\postcss\lib\lazy-result.js:192:32)
at D:\angular-archwizard-demo-master\node_modules\postcss\lib\lazy-result.js:197:27
at

webpack: Failed to compile.

is it because of different versions of angular cli?

demo dependent on v6-develop which is not on npm

current demo is dependent on "angular-archwizard": "~6.0.0-develop", which is not on npm.
should we build the develop version by ourselves and use it ? or is it by mistake not on npm ?

How [defaultStepIndex] can be set dynamically ?

Every time I refresh the page I land on step one ... I want to be on the same step on which refresh button was clicked.