Hi All,
I am trying to integrate Metronic Wizard component in Angular project.
<a class="postlink" href="http://keenthemes.com/metronic/preview/?page=crud/wizard/wizard-4&demo=default#">http://keenthemes.com/metronic/preview/ ... o=default#</a>
I get it working with adding Metronic wizard.js reference to angular.json. But with all the changes related to Visual Setting (Theme) in ABP, not sure how to set colour theme to wizard component.
[attachment=1:20t4mpja]1.PNG[/attachment:20t4mpja]
I need some help on how to make new components work with the visual settings theme colour and steps to follow.
[attachment=0:20t4mpja]2.PNG[/attachment:20t4mpja]
Thank you.
15 Answer(s)
-
0
Are you able to login into the app after compiling the app with default config?
-
0
Yes. App is working fine. No issues.
-
0
@mmukkara It seems like we haven't generated different theme options for Metronic components.
I have created an issue here <a class="postlink" href="https://github.com/aspnetzero/metronic/issues/9">https://github.com/aspnetzero/metronic/issues/9</a>. We will include it into next release. -
0
Thanks @ismcagdas . Will wait for the fix.
-
0
Components get color from metronic base styles, so no need to create custom themes.
NOTE: We upgraded metronic to v5.3. So this can be resolved at metronic side.
-
0
@alirizaadiyahsi, Do you mean this issue has been fixed in metronic 5.3? Which version of ANZ is upgraded to metronic 5.3?
Thank you for a prompt reply.
-
0
We fixed at v5.5.1
Check this: <a class="postlink" href="https://github.com/aspnetzero/aspnet-zero-core/releases/tag/v5.5.1">https://github.com/aspnetzero/aspnet-ze ... tag/v5.5.1</a>
-
0
Still finding the same issue. What am I doing wrong?
I have upgraded ANZ solution to 5.5.2 now.
Copied whole wizard component from metronic (~\metronic_v5.1\default\dist\default\components\forms\wizard\wizard4.html)
and added "src/assets/metronic/src/js/framework/components/general/wizard.js" to angular.json.Do I have to do anything more?
Since I cannot attach html or txt file to this message, I have added metronic wizard component html code to this message.
Client Details
Please enter your first and last namesWe'll never share your email with anyone elseEnter your valid phone in US phone format. E.g: 1-541-754-3010Mailing Address
Street address, P.O. box, company name, c/oAppartment, suite, unit, building, floor, etcAccount Details
Please enter your preferred URL to your dashboardYour username to login to your dashboardPlease use letters and at least one number and symbolClient Settings
Please select user groupPlease select user communication optionsBilling Information
Billing Address
Delivery Type
1. Client InformationClient Details
Nick Stonenick.stone@gmail.com+206-78-55034890Corresponding Address
Headquarters 1120 N Street Sacramento 916-654-5266P.O. Box 942873 Sacramento, CA 94273-0001Polo AltoCaliforniaUSA2. Account SetupAccount Details
sinortech.vertoffice.comsinortech.admin*********Client Settings
CustomerPhone, Email3. Billing SetupBilling Information
Nick Stone*************4589102018***Billing Address
Headquarters 1120 N Street Sacramento 916-654-5266P.O. Box 942873 Sacramento, CA 94273-0001Polo AltoCalifornia37505USA -
0
In addition to the above message. After getting latest sample html code for wizard from metronic website, color schema picked up now in the wizard but wizard.js methods are not executed.
Anyone know how to define anchors in the page (on div) and navigate with to the anchor section in angular.
Thanks
-
0
Have you checked Metronic's Angular sample <a class="postlink" href="http://keenthemes.com/metronic/preview/default/angular/crud/wizard/wizard-4">http://keenthemes.com/metronic/preview/ ... d/wizard-4</a> ?
-
0
Thanks for the pointer. I have looked at it and Metronic Angular Demo still used JS file and it is loaded as
this._script.loadScripts('app-wizard-wizard-4', ['assets/demo/default/custom/crud/wizard/wizard.js']);Even then I don't see form on the right...
[attachment=0:31jjo1wn]3.PNG[/attachment:31jjo1wn]I was tried to recreate with typescript and getting following error...
"mWizard is not defined at...."I went through Metronic forums and found this....I implemented the same, but no use.
[https://keenthemes.com/forums/topic/how-to-implement-form-wizard-in-my-angular-5-application-with-metronic-5-theme/
])Hope to solve this problem. Any help would be appreciated.
Thanks
-
0
As I checked the code of wizard.js, WizardDemo.init() must be executed to convert html to Metronic's wizard.
So, including wizard.js into angular.json must be done at first.Then, you can run WizardDemo.init() in the ngAfterViewInit method of your component.
-
0
I tried the above as mentioned but only the navigation steps would change when you clicked the save and continue button. I had to add some code to the wizard.js plugin file so that when you clicked the save and continue button the navigation and the content change.
-
0
We haven't used this component actually.
The best way is to download Metronic v5.3 on <a class="postlink" href="https://github.com/aspnetzero/aspnet-zero-core/releases/download/v5.5.1/metronic_v5.3.zip">https://github.com/aspnetzero/aspnet-ze ... c_v5.3.zip</a> and check the source code for <a class="postlink" href="http://keenthemes.com/metronic/preview/default/angular/crud/wizard/wizard-4">http://keenthemes.com/metronic/preview/ ... d/wizard-4</a> sample. -
0
how to integrate Metronic Wizard3 component in Angular?
is there any documentation?
