madoar / angular-archwizard Goto Github PK

Hi @madoar,

congratulations for this job! It's really nice!
I would to use this component instead the component that we are using now. I'd like to know your opinion about the css customization. For example, I would like to customize the layout as is showed on the attached image.

Thank you

Say there are 10 components in a module and one uses the ng2-archwizard. All other modules will fail at runtime if they use selected in a select/option html component.

ERROR Error: Uncaught (in promise): Error: Template parse errors:
No provider for WizardStep ("ustomer:
                        <select disabled class="form-control">
                            [ERROR ->]<option selected>{{specified.customerName}}</option>
                        </select>
              "): ng:///CommissionModule/NewLocationComponent.html@27:28
Error: Template parse errors:

Hi,

My application has a gray-blackish theme.
When I added the wizard control it seems that the current step is disabled and the second step is the active one (Due to the default style provided by the control).

Is there a way to provide my style to the control? (I tried to add a class attribute but it doesn't seems to work).

Thanks,
TMaster

UPDATE

I did dig a bit in the code and I think I have a solution.

according to the less file there are 5 basic colors to use.

I think it would be best if I could supply the colors according to my theme.

What do you think?

Is there any chance for you to make wizard steps clickable? For example I want to click on the title or icon or number of any wizard step?

This is very nice plugin but lacking this only feature which is much needed for my project.

Hello, I hope the following makes sense. In my use case I dynamically construct a wizard based on 4 checkboxes on the page, with each check box corresponding to a wizard step using ngIf to show it.

The issue is, when the page first loads nothing is checked yet and I get this message:
"The wizard doesn't contain a step with index 0"

I have 'hacked' this by going into free-navigation-mode.js line 109 and adding a check for empty wizard steps
FreeNavigationMode.prototype.reset = function () {
if(this.wizardState.wizardSteps.length==0)
return;

If you dont plan to support this Id like to know if there's an alternate way , as Im not crazy about changing the source every time we take an update to the wizard. Thanks for you consideration.

There must be something trivial I'm overlooking, but I'm having trouble importing 'ng2-archwizard' from within a barebones, official Angular Quickstart.

If I begin with the official import instructions - import { WizardModule } from 'ng2-archwizard'; - after doing npm install --save ng2-archwizard, I get the following error:

zone.js:2622 GET http://localhost:3000/ng2-archwizard 404 (Not Found)

Then, if I add the following line - 'ng2-archwizard': 'npm:ng2-archwizard/dist/index.js' - to systemjs.config.js, I get the following error:

zone.js:2622 GET http://localhost:3000/traceur 404 (Not Found)

Then, if I add reference to traceur inside index.html, the error slightly changes, but persists nonetheless:

zone.js:2622 GET http://localhost:3000/node_modules/ng2-archwizard/dist/components/ 404 (Not Found)

Is there something obvious I'm missing either in the way I reference the library or inside the boilerplate Angular Quickstart?

Hello!

First of all, congratulations for the great work here, this is a wonderfull component for angular.

I have a simple question about moving from onestep to another.

Is there any way to do it at the typescript side ?

For example, at Step1 I must perform a confirmation message before going on, If the user click on "Ok" it triggers a function on the typescript, and at that function I should move the user to Step2 or Step3.

I tried to implement that by setting a boolean variable and setting it to "canExit", but because of the proccess of the confirmation it doesn't worked as expected.

So my application starts off the navigation mode on strict. Depending on what my function returns, I may want to set the navigation mode to free. I have tried to change it dynamically and the wizard doesn't seem to respond correctly. Is this functionality possible?

I want to change the defaults for my project to fit the need and currently, I have to do everywhere in the project to keep all wizard symmetric. I think there should be an option in forRoot where the user can overwrite all defaults for wizard and wizard-steps globally.

Hi,

Is there a way to easily set the default step to be selected upon page load?
I would like to not have to click through steps to get to the one I'm currently developing.

I think it could be a nice development feature (disregarding step validation could make it easier I guess)!

Example (selected attribute):
<wizard-step data-title="General" navigationSymbol="1" selected>

Thanks

Hello

When I make a step optional its color automatically green I need a way to programmatically change a step color

e.g if I am on step 1 and all the steps are optional now at start step 1 color should be customizable if step 1 is completed then step color should be green.

@madoar
I need your kind support to show me how I can hide/show an optional step using typescript.
I went through your code, I discovered that there is a [hidden()] function in wizard-step.interface.ts
()
However, it only allow get, therefore, I can't set the step hidden proparty.

thank you

Hi, I've started using the wizard for a POC and it's amazing, first of all.

Only thing I'm missing is the option to reverse the order of the steps, so that the progression will be from right to left (we're writing in hebrew).

The preffered API would look something like:

<wizard dir="rtl"> <!-- or ltr -->
...
</wizard>

this way it keeps the existing html API of dir="rtl"

Hi @madoar,

I'm trying to change the step from the program using

@ViewChild(WizardComponent)
public wizard: WizardComponent;

but when I try to call, for example, this.wizard.goToStep (1); I always get the error that goToStep is not defined in wizard.

what am I doing wrong ?
would not you have an example to show?

Thanks in advance.

I have followed this issue fix #8

but i got another error

core.es5.js:1020 ERROR Error: Uncaught (in promise): TypeError: _this.wizard.reset is not a function TypeError: _this.wizard.reset is not a function

it seems function reset was not found in WizardComponent

can someone explain about this ?

Hi ,

I have kept this function to check whether STEP one form is Valid ( as user might do an inspect element and remove disabled from the button) to recheck.

But now the checkForm function keep getting called n number of times even though I have not initiated any action.

Please help me.

Thanks
Manish Pandit

When reaching the final step (<wizard-completion-step>) and then clicking this final step's title in the navigation, the above error is thrown.
Clicking other steps doesn't throw any errors and no navigation is taking place, as expected.

P.S. Very nice module, good work!

ng2-archwizard is not really a suitable name anymore as it targets Angular 4 and there will soon be Angular 4.

What about ngx-archwizard or ng-archwizard? Both are available in npm.

The upcoming 2.0 would be a good opportunity to make this change.

Hi,
Congrats for awesome component! I am facing issues when i update the latest version 2.0.0 and above. If i import ng2-archwizard module set with "strict":true in tsconfig.json.
import { ArchwizardModule } from 'ng2-archwizard';
Error throws like
[ts] Could not find a declaration file for module 'ng2-archwizard'. '/mydir/node_modules/ng2-archwizard/index.js' implicitly has an 'any' type.

I'm trying to use goToStep in code and have followed previous suggestions but the navigation property seems to be undefined. Let me know what other information I can provide to help.

Aside: Trying to jump to a specific step from a remote page. Is there a good way to use routing with wizard steps? The below example code gives console error: ERROR TypeError: Cannot read property 'goToStep' of undefined

import { Component, OnInit, ViewChild } from '@angular/core';
import { ActivatedRoute } from '@angular/router';

import { WizardComponent } from 'ng2-archwizard';

@Component({
  selector: 'app-my-custom-wizard',
  templateUrl: './my-custom-wizard.component.html',
  styleUrls: ['./my-custom-wizard.component.css']
})
export class MyCustomWizardComponent implements OnInit {
  @ViewChild(WizardComponent)
  public wizard: WizardComponent;

  constructor(private route: ActivatedRoute) {
  }

  ngOnInit() {
    this.route
      .queryParams
      .subscribe((params) => this.wizard.navigation.goToStep(+params.step));
  }

}

Found your library, which seems to be the only one to support Angular 4, so props to you for this awesome thing!
I started implementing some wizard steps and wanted to extract the wizard-steps in their own components.
However when I did this, the controls didn't show up in the wizard.

Libraries used:

• @angular/*: ^4.2.3
• typescript: 2.4.0
• ng2-archwizard= ^1.6.0

Consider this example:

<wizard navBarLocation="top" class="width-80">
    <app-wizard-details></app-wizard-details>
/* more steps here */
  <wizard-completion-step title="Conclusion" navigationSymbol="3">
  </wizard-completion-step>
</wizard>

/* app-wizard-details */
<wizard-step  title="First step" navigationSymbol="1">
  <form [formGroup]="detailsForm" >
    <md-input-container>
      <input mdInput formControlName="name" type="text">
    </md-input-container>
    <md-input-container>
      <input mdInput formControlName="offerNumber" type="text">
    </md-input-container>
  </form>
  <button md-raised-button (finalize)="storeDetails()" nextStep>Next</button>
</wizard-step>

What works is the following, but then I cannot make use of your triggers like canExit and stepEnter, since the callbacks might be defined in the child components, not in the root component:

<wizard-step title="First step" navigationSymbol="1">
    <app-wizard-details></app-wizard-details> /* has the <form> tag as root element now */
</wizard-step>

I'd love to see the support of wrapped wizard-steps implemented. That way, you'd be able to build complex wizards without having everything in one single file.

Oh, and: Sorry for not providing a Plunker, for some reason it won't load your library from unpkg (guess due to proxy issues)

Wizard standalone works great. with info and some html. Iam struck when trying to wrap it up with some form tags like text box. My goal is to get inputs of user and submit.

<wizard #wizard>

    <!-- Validation Checks for Fullname. (hasError or errors can be used) -->
    <div class="sign-up-error" *ngIf="responsemsg?.length >0 &&
            responsemsg === 'Username does not exist'                
            ">{{responsemsg}}</div>

  </div>

Hi Wizards Makers

(I am new to Angular so I have limited knowledge if everything is this easy but) so far using your wizard has been great!

I see you are developing external CSS capabilities for the wizard's nav steps. It would be very useful to get a new release with that functionality.

Thanks very much
Aisling

Hi, is there a way to lazy load components inside a wizard-step?

For example, I have 2 wizard-step each one with a custom component inside. The first time that the wizard shows in the screen, those 2 components call the ngOnInit() function. Instead I need the second component to initialize just when the user reaches the second step.

Meanwhile I'm hadling this by using a *ngIf in every component with an index that stores the current step,
but I believe this is a feature that must come with the wizard itself, isn't it?

In this image the wizard-step does not get set to 100% of the wizard (which is set to 100% of its container in my app). So "space-between" does not have the desired effect.

code:

<wizard style="height: 100%;">
    <wizard-step style="
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;"
                 title="Establish Focus Component">
      <app-establish-focus></app-establish-focus>
      <div>
        <hr>
        <button class="btn btn-primary"
                type="button"
                previousStep
                disabled>Back</button>
        <button class="btn btn-primary"
                type="button"
                nextStep>Continue</button>
      </div>
    </wizard-step>
  </wizard>

Basically I want the component to start directly under the navigation and the HR to be at the bottom of the page.

Hello,

I'm using Angular 4 in my project. I added ng2-archwizard to my project like in the manual. I'm getting a lot of errors starting with

'wizard-step' is not a known element

Where am I wrong?

Disable Navigation Bar is not working or I did not write correctly? I tried True,true and TRUE with and without quote but none of this worked.

Am getting following error when calling the wizard component second time

Console Error

ERROR Error: The default step index 2 is located after a non optional step
    at StrictNavigationMode.webpackJsonp.../../../../ng2-archwizard/dist/navigation/strict-navigation-mode.js.StrictNavigationMode.reset (vendor.bundle.js:68023)
    at WizardState.webpackJsonp.../../../../ng2-archwizard/dist/navigation/wizard-state.model.js.WizardState.initialize (vendor.bundle.js:68168)
    at WizardComponent.webpackJsonp.../../../../ng2-archwizard/dist/components/wizard.component.js.WizardComponent.ngAfterContentInit (vendor.bundle.js:66545)
    at callProviderLifecycles (vendor.bundle.js:147388)
    at callElementProvidersLifecycles (vendor.bundle.js:147369)
    at callLifecycleHooksChildrenFirst (vendor.bundle.js:147353)
    at checkAndUpdateView (vendor.bundle.js:148465)
    at callViewAction (vendor.bundle.js:148830)
    at execEmbeddedViewsAction (vendor.bundle.js:148788)
    at checkAndUpdateView (vendor.bundle.js:148463)

If the wizard step is programmatically added, and then enter a specific step how I get which step I am in and what total step index is?

I think this feature is better to add on event emitter in (postFinalize)
considering each wizard step is programmed and determined by what value was submitted in the previous step.

Getting following error when I tried to use *ngFor on wizard Step.
ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'true'. Current value: 'false'.
Please help!

Hi ,
I have one Main AppModule and inside that I have one sub Module Subscription Module which I am loading through Routes.

The Wizard and Wizard-step is not getting rendered properly.

If I put the HTML and CSS together in any of the component in the Main App Module. It works.
But I want it to be in Subscription Module only.

I imported WizardModule in Subscription Module and added it in the Providers section also.

Kindly help me with this Issue.

Thanks
Manish Pandit

I'm wondering if anyone can offer some suggestions on how to accomplish the following behavior:

My Wizard is a form broken up over multiple steps. There is an http service call when pressing the next button on each wizard step. I want to only proceed to the next step if the service call is successful, otherwise display the error returned by the service.

If using plain injected Angular services I imagine I can import the WizardComponent and use the navigation methods programmatically instead of using the nextStep directive.

pseudo-code:

onProceedToNextStep() {
    this.myService.myServiceMethod()
        .then(() => this.wizard.goToNextStep())
        .catch((err) => { this.error_message = 'There was an error: ' + err; });
}

Would you recommend this approach?

How would I accomplish this if I'm using ngrx store (a reactive state management system) which uses RxJS observables and triggers the service call as a side effect of a dispatched action?:

onProceedToNextStep() {
    this.store$.dispatch(new TriggersCallToMyServiceMethodAction());
    // I want only proceed to next step if the service called as an effect of dispatching this action returns a success, otherwise display error on current wizard step
}

Hello!

I am facing an issue when programmatically call a goToStep method on my component it says.

ERROR TypeError: this.wizard.goToStep is not a function.

I followed the exact same step that you specified on a ticket no #17

I m using a version "ng2-archwizard": ",2.0.0".

Is it possible to reset wizard as soon as it was finished?
I did not find this functionality in documentation. Thank you

How can i disable links to prevent user from navigate between steps by the upper links?

This isn't really an issue, but I didn't find any other way to contact you. This is perfect for what I am trying to do, but I can't find any way to change the color of the symbol (green, red, gray) to something that better fits my project. Is there any way to modify that CSS? Thanks!

Upon resolving, the step would exit if resolved to something truthy, or not if something falsey. A trivial example I can think of would be checking a proposed username against the server before you leave the step. One I am dealing with in my app is getting a Stripe token from CC fields when we leave the step.

Or maybe there is a better pattern I should be using for these kinds of checks?

It seems the this.wizard.reset() no longer works.

I receive the error - this.wizard.reset is not a function. I tried the examples provided in another issue post but to no avail. I'm able to access the Wizard component using:

@ViewChild(WizardComponent) public wizard: WizardComponent;

But seems as though there's no reset method any more.

Hi,
Congratulations for creating such a great wizard!
But I am facing issue while trying to write custom css.

1. the custom style is not reflected until I use ::ng-deep.
2. The custom style doesn't get preference if I not use !important

My main concern is, we can't use !important, as our project can be use by other projects as dependency. So adding Important at our level will reduce our platforms capability to be customized.

for better understanding please see the snippet below-

::ng-deep .horizontal.large-filled ul.steps-indicator li.current:after { background-color: red; }

The steps indicator should probably provide support for situations where the screen is not wide enough to fit all step titles.

Any suggestions how to do this?

How can I add selectedStep dynamically to wizard step?. for example I want the second wizard step to be selected by default.
here is my code

<wizard> <wizard-step stepTitle="{{question.name}}" *ngFor="let question of questions"> // code </wizard-step> </wizard>

ERROR in ./node_modules/ng2-archwizard/index.ts
Module build failed: Error: Typescript emitted no output for /home/test/apps/test-webpack/node_modules/ng2-archwizard/index.ts.
You should not need to recompile .ts files in node_modules.
Please contact the package author to advise them to use --declaration --outDir.
More microsoft/TypeScript#12358

This is the error I am getting while doing a webpack build with the plugin. Any ideas ?

Thanks.

Expose the wizard as a service so that it can be operated dynamically as well.
Current use case that I am dealing with is the introduction of a step dynamically in forward direction into the wizard based on certain condition.

The WizardModule is exported by the package from ng2-archwizard/dist. That is a bit unusual and no necessary. If you put an index.ts in the root with

export * from ./dist;

it should work without referring to the subdirectory.

Hi, Is there a way to make steps clickable.

I should be able to use the goToStep or be able to go to specific step upon initialization of the component based on some condition or based on a route params.

this would be so helpful.

Thanks a lot!

Hi there,

Is it possible to add "Wizard Step Form Validation"? Simply disable "Next" button until all required form fields filled?

Thanks,

I included the wizard like the example:

`import { ArchwizardModule } from 'ng2-archwizard';

@NgModule({
imports: [
ArchwizardModule
],
})
export class Module { }`

Unfortunately now is in my component.ts file no documentation to the tool included, normaly the intellisense of visual studio gives me the possible attributes and functions of the included components.

.html file
<wizard #wizard navBarLocation="top" navBarLayout="large-filled-symbols">

.ts file
@ViewChild("wizard") wizard: ArchwizardModule;

import { ArchwizardModule } from 'ng2-archwizard'; gives only the Module and nothing more.