When I click on next, I want to pass an object to next page. How can I achieve that by using this wizard. I am trying in different ways, but unable to achieve it. Please help me

this is the error i'm getting when i give ng serve

ng serve
Unable to find "@angular/cli" in devDependencies.

Please take the following steps to avoid issues:
"npm install --save-dev @angular/cli@latest"

The "@angular/compiler-cli" package was not properly installed. Error: Error: Cannot find module '@angular/compiler-cli'
Error: The "@angular/compiler-cli" package was not properly installed. Error: Error: Cannot find module '@angular/compiler-cli'
at Object. (/home/ameen/.nvm/versions/node/v8.6.0/lib/node_modules/@angular/cli/node_modules/@ngtools/webpack/src/index.js:14:11)
at Module._compile (module.js:624:30)
at Object.Module._extensions..js (module.js:635:10)
at Module.load (module.js:545:32)
at tryModuleLoad (module.js:508:12)
at Function.Module._load (module.js:500:3)
at Module.require (module.js:568:17)
at require (internal/module.js:11:18)
at Object. (/home/ameen/.nvm/versions/node/v8.6.0/lib/node_modules/@angular/cli/tasks/eject.js:10:19)
at Module._compile (module.js:624:30)
at Object.Module._extensions..js (module.js:635:10)
at Module.load (module.js:545:32)
at tryModuleLoad (module.js:508:12)
at Function.Module._load (module.js:500:3)
at Module.require (module.js:568:17)
at require (internal/module.js:11:18)

Getting error
Error: (SystemJS) XHR error (404 Not Found) loading http://localhost:3000/angular2-wizard

Steps to reproduce:

$ git clone https://github.com/angular/quickstart.git quickstart-wizard; cd quickstart-wizard
$ npm install
$ npm install angular2-wizard --save

Update app.module.ts per documentation, paste example into app.component.ts as template.

I want to know if there is a way to add another stept like it's shown in this demo ? https://maiyaporn.github.io/angular2-wizard-demo/ step 3 once the checkbox is checked step 3.5 is added.
Thank you in advance :)

anyone is running with same issue, locally It works absolutely fine but when I pushed to dev it throws an error "f.ngOnInit is not a function". Trying to find the root cause for it still Any suggestions ??

$ webpack
Hash: 685fcea119a85c662b0351329768da09b9a4778d
Version: webpack 2.5.1
Child
Hash: 685fcea119a85c662b03
Time: 21550ms
Asset Size Chunks Chunk Names
main-client.js 84.6 kB 0 [emitted] main-client
main-client.js.map 94.1 kB 0 [emitted] main-client

ERROR in [at-loader] ./node_modules/angular2-wizard/src/wizard.component.ts:63:5
    TS2322: Type 'WizardStepComponent | undefined' is not assignable to type 'WizardStepComponent'.
  Type 'undefined' is not assignable to type 'WizardStepComponent'.

Child
Hash: 51329768da09b9a4778d
Time: 23050ms
Asset Size Chunks Chunk Names
main-server.js 1.87 MB 0 [emitted] [big] main-server

ERROR in [at-loader] ./node_modules/angular2-wizard/src/wizard.component.ts:63:5
    TS2322: Type 'WizardStepComponent | undefined' is not assignable to type 'WizardStepComponent'.
  Type 'undefined' is not assignable to type 'WizardStepComponent'.

It might be nice to have a link to the source of the demo app in your documentation. It took me way to0 long to find it as I was being stupid and didn't think to look under your username.

when ever i click next i am getting this error

Hi,
Great job so far. I was wanting to trigger the next button directly in my own component.
Please let me know if you have implemented this. I have read the docs but haven't seen a sample case for this scenario.
Thank you

Great work!

I am running an issue with user clicking on the Done button.
In my case, when the user clicks on Done, I run a http post in my onComplete function.
If there is an error, I set isCompleted to false in my code. So, that I can continue to display the form for user to correct. But, the Prev, Next, and Done buttons are not displayed.

Thank you for your help!

ERROR in ./node_modules/angular2-wizard/src/wizard-step.component.ngfactory.ts Module build failed: Error: /home/isaac/apps/app/live/node_modules/angular2-wizard/src/wizard-step.component.ngfactory.ts is missing from the TypeScript compilation. Please make sure it is in your tsconfig via the 'files' or 'include' property. The missing file seems to be part of a third party library. TS files in published libraries are often a sign of a badly packaged library. Please open an issue in the library repository to alert its author and ask them to package the library using the Angular Package Format (https://goo.gl/jB3GVv). at AngularCompilerPlugin.getCompiledFile (/home/isaac/apps/app/live/node_modules/@ngtools/webpack/src/angular_compiler_plugin.js:656:23) at plugin.done.then (/home/isaac/apps/app/live/node_modules/@ngtools/webpack/src/loader.js:467:39) at <anonymous> @ ./src/app/app/setup/setup.component.ngfactory.js 13:0-99 @ ./src/app/app.module.ngfactory.js @ ./src/main.ts @ multi ./src/main.ts ERROR in ./node_modules/angular2-wizard/src/wizard.component.ngfactory.ts Module build failed: Error: /home/isaac/apps/app/live/node_modules/angular2-wizard/src/wizard.component.ngfactory.ts is missing from the TypeScript compilation. Please make sure it is in your tsconfig via the 'files' or 'include' property. The missing file seems to be part of a third party library. TS files in published libraries are often a sign of a badly packaged library. Please open an issue in the library repository to alert its author and ask them to package the library using the Angular Package Format (https://goo.gl/jB3GVv). at AngularCompilerPlugin.getCompiledFile (/home/isaac/apps/app/live/node_modules/@ngtools/webpack/src/angular_compiler_plugin.js:656:23) at plugin.done.then (/home/isaac/apps/app/live/node_modules/@ngtools/webpack/src/loader.js:467:39) at <anonymous> @ ./src/app/app/setup/setup.component.ngfactory.js 11:0-94 @ ./src/app/app.module.ngfactory.js @ ./src/main.ts @ multi ./src/main.ts

Currently running on angular -cli 1.6.6
angular2-wizard 0.4.0

I don't see that step in the source code provided. Thanks!

CSS not working well with Angular 5 with bootstrap 3.10.10.

steps looks like this.

I want steps like in your tutorial.

Secondly, Form is always invalid.

Is it possible to translate the language in the buttons?

So I can see you removed "private" off of some of the methods in here which makes sense and was causing errors when running ng build --prod using angular-cli. Although even after reinstalling all the packages and clearing npm cache the source is not up to date with the repo here as it's still showing those private declarations on the methods. Think you need to update the npm package as well with this change because I'm having to manually remove them.

It would be possible to insert an icon next to the title of each step?In that case, how to do it?

It works with JIT, but when using AOT compilation it gives error "Property 'steps' is private and only accessible within class 'WizardComponent'"

Full error details:

Property 'steps' is private and only accessible within class 'WizardComponent'.
Property 'isCompleted' is private and only accessible within class 'WizardComponent'.
Property 'hasPrevStep' is private and only accessible within class 'WizardComponent'.
Property 'activeStep' is private and only accessible within class 'WizardComponent'.
Property 'hasNextStep' is private and only accessible within class 'WizardComponent'.

Hello,
Wizard in ng serve --o works perfect, but in production mode
ng build --prod, throws exception

ERROR TypeError: p.ngOnInit is not a function
    at main.593d15b004653eafc611.bundle.js:formatted:11116

at the transpiled code

Ka["\u0275ted"](-1, null, ["\n"]))], function(t, e) {
                var n = e.component;
                t(e, 3, 0),
                t(e, 7, 0, "Step 1: Define Channel"),
                t(e, 10, 0),
                t(e, 14, 0, "Step 2: Configure Channel"),
                t(e, 17, 0, Ka["\u0275nov"](e, 10).defineChannelForm, n.channelMode)
            }, null)

Thank you

Hello,

I am getting error building. I am using ANGULAR v5

ng build --prod --aot --output-hashing --base-href /

ERROR in ./node_modules/angular2-wizard/src/wizard-step.component.ngfactory.ts
Module build failed: Error: H:\04 . AppMobileSolutions\0000 - REPS DESKTOP\0 FAB\FABWebsite\node_modules\angular2-wizard\src\wizard-step.component.ngfactory.ts is missing from the TypeScript compilation. Please make sure it is in your tsconfig via the 'files' or 'include' property.

I have tried to add manually the files in tsconfig.app.json without success. Error persists.

Any tip for this?

Can i use this with angular 4 and bootstrap 3.7 +

How can add my own scss to this the wizard?
And class I apply isn't being applied

Are you working on adding the ability to load steps dynamically at runtime?

i want to move step one to another from .ts file or from one step to random step on button click.
any help?

Hi,

I am facing problem to get form control value on "Done" button click event "(onComplete)".

I have taken example code as you given and want to get email value on Done button Click event.
also, I would another form value from second and third wizard. Please help me...

<wizard-step [title]="'Step1'" [isValid]="emailForm.form.valid" (onNext)="onStep1Next($event)">
<form #emailForm="ngForm">

DEPENDENCY: fsevents@^1.0.0 (node_modules\chokidar\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

$ npm start
npm ERR! Windows_NT 6.3.9600
npm ERR! argv "C:\Program Files\nodejs\node.exe" "C:\Program Files\nodejs\node_modules\npm\bin\npm-cli.js" "start"
npm ERR! node v6.9.4
npm ERR! npm v3.10.10

npm ERR! missing script: start
npm ERR!
npm ERR! If you need help, you may report this error at:
npm ERR! https://github.com/npm/npm/issues

npm ERR! Please include the following file with any support request:
npm ERR! E:\angular\ng2-wizard-master\ng2\angular2-wizard\npm-debug.log

Hi, how can I setup dynamic wizard steps? I have tried with following code but no luck.
<wizard-step *ngFor="let test of testArray" [title]="test.Name" (onNext)="testFunc($event)"> <h1>Step {{test.Name}}</h1> </wizard-step>

How to restrict wizard from one to another wizard?
In my case:
If next is clicked.
I want to save form in server side. If form data are invalid mean i need to stop the wizard from one to another.
[isValid] is only restrict before click next. But in my case its not useful.

there is now way this stuff works after ng build --prod

loclly it's ok but what's the point

ERROR in ./node_modules/angular2-wizard/src/wizard-step.component.ngfactory.ts
Module build failed: Error: /src/wizard-step.component.ngfactory.ts is missing from the TypeScript compilation. Please make sure it is in your tsconfig via the 'files' or 'include' property.
The missing file seems to be part of a third party library. TS files in published libraries are often a sign of a badly packaged library. Please open an issue in the library repository to alert its author and ask them to package the library using the Angular Package Format (https://goo.gl/jB3GVv).
at AngularCompilerPlugin.getCompiledFile (/Users/developer/Proyectos/metropolitano/metro/node_modules/@ngtools/webpack/src/angular_compiler_plugin.js:674:23)
at plugin.done.then (/Users/developer/Proyectos/metropolitano/metro/node_modules/@ngtools/webpack/src/loader.js:467:39)
at
ERROR in ./node_modules/angular2-wizard/src/wizard.component.ngfactory.ts
Module build failed: Error: /Users/developer/Proyectos/metropolitano/metro/node_modules/angular2-wizard/src/wizard.component.ngfactory.ts is missing from the TypeScript compilation. Please make sure it is in your tsconfig via the 'files' or 'include' property.
The missing file seems to be part of a third party library. TS files in published libraries are often a sign of a badly packaged library. Please open an issue in the library repository to alert its author and ask them to package the library using the Angular Package Format (https://goo.gl/jB3GVv).
at AngularCompilerPlugin.getCompiledFile (/Users/developer/Proyectos/metropolitano/metro/node_modules/@ngtools/webpack/src/angular_compiler_plugin.js:674:23)
at plugin.done.then (/Users/developer/Proyectos/metropolitano/metro/node_modules/@ngtools/webpack/src/loader.js:467:39)
at

Awesome wizard. Loved it. But i would like to ask you how to reset the wizard without reloading the page?

Hi,
Thank's for your great works !
I think you should change your goToStep(step) function to check the current step state like this:

public goToStep(step: WizardStepComponent): void {
    if (!this.isCompleted && this.activeStep.isValid) {
      this.activeStep = step;
    }
} 

Thank's again.

I've tried removing " (onComplete)="isCompleted = true; " from the last step, but even without it, the submit and previous buttons dissappear after I submit the form, making it impossible to fix any problems there might be with the form, and having to do it all over again.

Is there an option for this?

Also, how can I recompile the wizard component so I could add more options to the directive?

How do I bind to the cancel button? I can't find any other function asides onNext()

How can I handle if i have child form navigations
Ex: Step1 have step1(a) and step1(b) navigations, But My active step should be step1 only. Please advice me

Hi,
I am getting following error when compiling your library:
Type EventEmitter<{}> is not assignable to type EventEmitter<WizardStepComponent>.

After a brief look into your code I found that line 41 in your wizard.component.ts file should be like this:
@Output() onStepChanged: EventEmitter<WizardStepComponent> = new EventEmitter<WizardStepComponent>();

Instead of this:
@Output() onStepChanged: EventEmitter<WizardStepComponent> = new EventEmitter();

Please update your code ASAP.

I have component inside wizard step.
How can i access valid property of form which is inside component.

Hi I am using reactive form with this, all is fine until I submit it, it dosen't submit the form on click of done.

Any pointers on how to acheive this

Error: Unsupported TypeScript version: 2.4.2

Hey there,

Could you provide the source code of your demo application,... I have no problem using your wizard, but it would be easier to understand in the first place if you have a real life example and not just some code snippits

Hi all,

I try set display for Next or Prev button:
<wizard-step (onNext)="stepNext($event)"
[title]="stepName"
[showNext]="showNext"
[showPrev]="showPrev">

with showNext is true and showPrev is false, but always display button Next and Prev

I have installed using npm and referred on Appmodule as advised. Later I just copied the HTML to AppComponent and it is giving below console error:

There is no directive with "exportAs" set to "ngForm" ("ep1'" [isValid]="emailForm.form.valid" (onNext)="onStep1Next($event)">

Step1

`Task :yarn_install yarn install v1.3.2 [1/5] Validating package.json... [2/5] Resolving packages... warning Resolution field "[email protected]" is incompatible with requested version "uglify-es@^3.3.4" [3/5] Fetching packages... info [email protected]: The platform "win32" is incompatible with this module. info "[email protected]" is an optional dependency and failed compatibility check. Excluding it from installation. [4/5] Linking dependencies... warning " > @angular/[email protected]" has incorrect peer dependency "@angular/[email protected]". warning " > @angular/[email protected]" has incorrect peer dependency "@angular/[email protected]". warning "angular2-wizard > [email protected]" has unmet peer dependency "popper.js@^1.14.0". warning " > [email protected]" has unmet peer dependency "popper.js@^1.12.9". [5/5] Building fresh packages... success Saved lockfile. $ node node_modules/phantomjs-prebuilt/install.js Found PhantomJS at D:\projects\beequote\node_modules\phantomjs-prebuilt\lib\phantom\bin\phantomjs.exe ...verifying PhantomJS is previously installed at D:\projects\beequote\node_modules\phantomjs-prebuilt\lib\phantom\bin\phantomjs.exe Done in 9.78s.

Task :webpack yarn run v1.3.2 $ yarn run cleanup && yarn run webpack:prod:main && yarn run clean-www $ rimraf build/{aot,www} $ yarn run webpack -- --config webpack/webpack.prod.js --progress --profile warning From Yarn 1.0 onwards, scripts don't require "--" for options to be forwarded. In a future version, any explicit "--" will be forwarded as-is to the scripts. $ node --max_old_space_size=4096 node_modules/webpack/bin/webpack.js --config webpack/webpack.prod.js --progress --profile 10% building modules 1/4 modules 3 11% building modules 10/11 modules 1 active ...ote\src\main\webapp\app\app.module.ts=====--------> 41% EXECUTING [35s 11% building modules 13/13 modules 0 act 12% building modules 17/18 modules 1 active ...\configuration.component.ngfact 12% building modules 24/24 modules 0 act 13% building modules 29/30 modules 1 active ...sword\password.component.ngfact 14% building modules 37/37 modules 0 act 16% building modules 53/54 modules 1 active ...teclone-dialog.component.ngfact 16% building modules 56/57 modules 1 active 22% building modules 104/107 mo 42% building modules 267/303 modules 36 active ...duct\quoteproduct-dialog.component.ts 46% building modules 302/329 mo 67% building modules 616/647 modules 31 active ...\core-js\modules\es6.function.name.js 69% building modules 733/743 mo 23653ms building modules 63ms sealing--> 41% EXECUTING [43s] 0ms optimizing 0ms basic module optimization 100ms module optimization 0ms advanced module optimization s] 0ms basic chunk optimization 0ms chunk optimization 0ms advanced chunk optimization 69% building modules 791/793 mo2168ms building modules 6ms module and chunk tree optimization 0ms chunk modules optimization 0ms advanced chunk modules optimization 7ms module reviving 0ms module order optimization 2ms module id optimization 3ms chunk reviving 0ms chunk order optimization 23ms chunk id optimization 398ms hashing 0ms module assets processing [45s] 517ms chunk assets processing 0ms additional chunk assets processing 92% recording 15ms recording 16265ms additional asset processing 0ms chunk asset optimization [1m 2s] 94% asset optimizationMergetJsonsWebpackPlugin compilation started... MergetJsonsWebpackPlugin compilation completed... (node:5528) UnhandledPromiseRejectionWarning: Unhandled promise rejection (rejection id: 2): ValidationError: "swDest" is not a supported parameter. (node:5528) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code. 563ms asset optimization 95% emittingMergetJsonsWebpackPlugin emit starts... MergetJsonsWebpackPlugin emit completed...
790ms emitting :webpack Hash: 46c74a1bb85aef345cb3 Version: webpack 3.10.0 Time: 49203ms 56 assets [30] ./src/main/webapp/app/entities/quote-master/quote-master.service.ts 3.77 kB {2} [built] [] -> factory:862ms building:16ms dependencies:2597ms = 3475ms [31] ./src/main/webapp/app/entities/item/item.service.ts 3.96 kB {2} [built] [] -> factory:440ms building:0ms dependencies:2554ms = 2994ms [32] ./src/main/webapp/app/entities/quotebuilder/quotebuilder.service.ts 8.86 kB {2} [built] [] -> factory:216ms building:16ms dependencies:2517ms = 2749ms [34] ./src/main/webapp/app/shared/auth/principal.service.ts 3.21 kB {2} [built] [] -> factory:805ms building:16ms = 821ms [423] ./src/main/webapp/app/polyfills.ts 2.52 kB {1} [built] factory:4614ms building:16289ms = 20903ms [575] ./src/main/webapp/manifest.webapp 61 bytes {1} [built] [] -> factory:1187ms dependencies:16ms building:332ms = 1535ms [576] ./src/main/webapp/content/css/global.css 41 bytes {3} [built] factory:4617ms building:28ms = 4645ms [578] ./src/main/webapp/app/app.main.ts 507 bytes {2} [built] factory:4616ms building:16291ms = 20907ms [579] ./src/main/webapp/app/blocks/config/prod.config.ts 275 bytes {2} [built] [] -> factory:21ms building:3ms = 24ms [589] ./src/main/webapp/app/app.module.ngfactory.js 43.5 kB {2} [built] [] -> factory:25ms building:47ms dependencies:4427ms = 4499ms [746] ./src/main/webapp/app/entities/quotebuilder/quotesclone-dialog.component.ngfactory.js 20 kB {2} [built] [] -> factory:1007ms building:0ms dependencies:2876ms = 3883ms [747] ./src/main/webapp/app/entities/quotebuilder/quotebuilder-delete-dialog.component.ngfactory.js 9.19 kB {2} [built] [] -> factory:1023ms building:0ms dependencies:2876ms = 3899ms [748] ./src/main/webapp/app/layouts/main/main.component.ngfactory.js 3.57 kB {2} [built] [] -> factory:1061ms building:0ms dependencies:2667ms = 3728ms [753] ./src/main/webapp/app/blocks/interceptor/http.provider.ts 1.31 kB {2} [built] [] -> factory:4427ms building:0ms dependencies:0ms = 4427ms [790] ./node_modules/css-loader!./src/main/webapp/content/css/global.css 2.42 kB [built] [] -> factory:14ms building:1408ms = 1422ms + 776 hidden modules

ERROR in ./node_modules/angular2-wizard/index.ts Module build failed: Error: D:\projects\beequote\node_modules\angular2-wizard\index.ts is not part of the compilation output. Please check the other error messages for details. at AngularCompilerPlugin.getCompiledFile (D:\projects\beequote\node_modules@ngtools\webpack\src\angular_compiler_plugin.js:648:23) at plugin.done.then (D:\projects\beequote\node_modules@ngtools\webpack\src\loader.js:467:39) at at process._tickCallback (internal/process/next_tick.js:188:7) @ ./src/main/webapp/app/app.module.ngfactory.js 226:0-46 @ ./src/main/webapp/app/app.main.ts

ERROR in ./node_modules/angular2-wizard/src/wizard-step.component.ngfactory.ts Module build failed: Error: D:\projects\beequote\node_modules\angular2-wizard\src\wizard-step.component.ngfactory.ts is not part of the compilation. Please make sure it is in your tsconfig via the 'files' or 'include' property. at AngularCompilerPlugin.getCompiledFile (D:\projects\beequote\node_modules@ngtools\webpack\src\angular_compiler_plugin.js:643:23) at plugin.done.then (D:\projects\beequote\node_modules@ngtools\webpack\src\loader.js:467:39) at @ ./src/main/webapp/app/entities/quotebuilder/quotebuilder-dialog.component.ngfactory.js 10:0-105 @ ./src/main/webapp/app/app.module.ngfactory.js @ ./src/main/webapp/app/app.main.ts

ERROR in ./node_modules/angular2-wizard/src/wizard-step.component.ts Module build failed: Error: D:\projects\beequote\node_modules\angular2-wizard\src\wizard-step.component.ts is not part of the compilation output. Please check the other error messages for details. at AngularCompilerPlugin.getCompiledFile (D:\projects\beequote\node_modules@ngtools\webpack\src\angular_compiler_plugin.js:648:23) at plugin.done.then (D:\projects\beequote\node_modules@ngtools\webpack\src\loader.js:467:39) at at process._tickCallback (internal/process/next_tick.js:188:7) @ ./src/main/webapp/app/entities/quotebuilder/quotebuilder-dialog.component.ngfactory.js 11:0-64 @ ./src/main/webapp/app/app.module.ngfactory.js @ ./src/main/webapp/app/app.main.ts

ERROR in ./node_modules/angular2-wizard/src/wizard.component.ngfactory.ts Module build failed: Error: D:\projects\beequote\node_modules\angular2-wizard\src\wizard.component.ngfactory.ts is not part of the compilation. Please make sure it is in your tsconfig via the 'files' or 'include' property. at AngularCompilerPlugin.getCompiledFile (D:\projects\beequote\node_modules@ngtools\webpack\src\angular_compiler_plugin.js:643:23) at plugin.done.then (D:\projects\beequote\node_modules@ngtools\webpack\src\loader.js:467:39) at @ ./src/main/webapp/app/entities/quotebuilder/quotebuilder-dialog.component.ngfactory.js 8:0-100 @ ./src/main/webapp/app/app.module.ngfactory.js @ ./src/main/webapp/app/app.main.ts

ERROR in ./node_modules/angular2-wizard/src/wizard.component.ts Module build failed: Error: D:\projects\beequote\node_modules\angular2-wizard\src\wizard.component.ts is not part of the compilation output. Please check the other error messages for details. at AngularCompilerPlugin.getCompiledFile (D:\projects\beequote\node_modules@ngtools\webpack\src\angular_compiler_plugin.js:648:23) at plugin.done.then (D:\projects\beequote\node_modules@ngtools\webpack\src\loader.js:467:39) at at process._tickCallback (internal/process/next_tick.js:188:7) @ ./src/main/webapp/app/entities/quotebuilder/quotebuilder-dialog.component.ngfactory.js 9:0-59 @ ./src/main/webapp/app/app.module.ngfactory.js @ ./src/main/webapp/app/app.main.ts`

I can't figure out why Steps is not horizontal, but each time vertical.
Source code for demo will be very useful. Thank you.

Add :demo: into repository under :demo: folder with css styles.

Hi

I'm trying to make changes to the library that is in the node_modules folder, but when I do "npm run build" of my angular project, it does not take the changes made.

Is there any specific way to compile the changes made to the dependency?

Thanks.

[showPrev]="step1.showPrev" [showNext]="step1.showNext" not worked in angular 5
Always shows previous, next, done button.

here is my component code
step1: any = { showNext: true, showPrev: false };

my angular cli version:
"@angular/cli": "1.6.0",
angular version
"@angular/core": "^5.0.0",