0
mmukkara created
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.
<div class="m-content"> <div class="m-portlet m-portlet--full-height"> <div class="m-portlet__head"> <div class="m-portlet__head-caption"> <div class="m-portlet__head-title"> <h3 class="m-portlet__head-text"> Form Wizard </h3> </div> </div> <div class="m-portlet__head-tools"> <ul class="m-portlet__nav"> <li class="m-portlet__nav-item"> <a href="#" data-toggle="m-tooltip" class="m-portlet__nav-link m-portlet__nav-link--icon" data-direction="left" data-width="auto" title="Get help with filling up this form"> <i class="flaticon-info m--icon-font-size-lg3"></i> </a> </li> </ul> </div> </div> <div class="m-portlet__body m-portlet__body--no-padding"> <div class="m-wizard m-wizard--4 m-wizard--brand" id="m_wizard"> <div class="row m-row--no-padding"> <div class="col-xl-3 col-lg-12 m--padding-top-20 m--padding-bottom-15"> <div class="m-wizard__head"> <div class="m-wizard__nav"> <div class="m-wizard__steps"> <div class="m-wizard__step m-wizard__step--done" data-wizard-target="#m_wizard_form_step_1"> <div class="m-wizard__step-info"> <a href="#" class="m-wizard__step-number"> <span> <span> 1 </span> </span> </a> <div class="m-wizard__step-label"> Account Setup </div> <div class="m-wizard__step-icon"> <i class="la la-check"></i> </div> </div> </div> <div class="m-wizard__step" data-wizard-target="#m_wizard_form_step_2"> <div class="m-wizard__step-info"> <a href="#" class="m-wizard__step-number"> <span> <span> 2 </span> </span> </a> <div class="m-wizard__step-label"> Profile Setup </div> <div class="m-wizard__step-icon"> <i class="la la-check"></i> </div> </div> </div> <div class="m-wizard__step" data-wizard-target="#m_wizard_form_step_3"> <div class="m-wizard__step-info"> <a href="#" class="m-wizard__step-number"> <span> <span> 3 </span> </span> </a> <div class="m-wizard__step-label"> Billing Setup </div> <div class="m-wizard__step-icon"> <i class="la la-check"></i> </div> </div> </div> <div class="m-wizard__step" data-wizard-target="#m_wizard_form_step_4"> <div class="m-wizard__step-info"> <a href="#" class="m-wizard__step-number"> <span> <span> 4 </span> </span> </a> <div class="m-wizard__step-label"> Confirmation </div> <div class="m-wizard__step-icon"> <i class="la la-check"></i> </div> </div> </div> </div> </div> </div> </div> <div class="col-xl-9 col-lg-12"> <div class="m-wizard__form"> <form class="m-form m-form--label-align-left- m-form--state-" id="m_form"> <div class="m-portlet__body m-portlet__body--no-padding"> <div class="m-wizard__form-step m-wizard__form-step--current" id="m_wizard_form_step_1"> <div class="m-form__section m-form__section--first"> <div class="m-form__heading"> <h3 class="m-form__heading-title"> Client Details </h3> </div> <div class="form-group m-form__group row"> <label class="col-xl-3 col-lg-3 col-form-label"> * Name: </label> <div class="col-xl-9 col-lg-9"> <input type="text" name="name" class="form-control m-input" placeholder="" value="Nick Stone"> <span class="m-form__help"> Please enter your first and last names </span> </div> </div> <div class="form-group m-form__group row"> <label class="col-xl-3 col-lg-3 col-form-label"> * Email: </label> <div class="col-xl-9 col-lg-9"> <input type="email" name="email" class="form-control m-input" placeholder="" value="[email protected]"> <span class="m-form__help"> We'll never share your email with anyone else </span> </div> </div> <div class="form-group m-form__group row"> <label class="col-xl-3 col-lg-3 col-form-label"> * Phone </label> <div class="col-xl-9 col-lg-9"> <div class="input-group"> <div class="input-group-prepend"> <span class="input-group-text"> <i class="la la-phone"></i> </span> </div> <input type="text" name="phone" class="form-control m-input" placeholder="" value="1-541-754-3010"> </div> <span class="m-form__help"> Enter your valid phone in US phone format. E.g: 1-541-754-3010 </span> </div> </div> </div> <div class="m-separator m-separator--dashed m-separator--lg"></div> <div class="m-form__section"> <div class="m-form__heading"> <h3 class="m-form__heading-title"> Mailing Address <i data-toggle="m-tooltip" data-width="auto" class="m-form__heading-help-icon flaticon-info" title="Some help text goes here"></i> </h3> </div> <div class="form-group m-form__group row"> <label class="col-xl-3 col-lg-3 col-form-label"> * Address Line 1: </label> <div class="col-xl-9 col-lg-9"> <input type="text" name="address1" class="form-control m-input" placeholder="" value="Headquarters 1120 N Street Sacramento 916-654-5266"> <span class="m-form__help"> Street address, P.O. box, company name, c/o </span> </div> </div> <div class="form-group m-form__group row"> <label class="col-xl-3 col-lg-3 col-form-label"> Address Line 2: </label> <div class="col-xl-9 col-lg-9"> <input type="text" name="address2" class="form-control m-input" placeholder="" value="P.O. Box 942873 Sacramento, CA 94273-0001"> <span class="m-form__help"> Appartment, suite, unit, building, floor, etc </span> </div> </div> <div class="form-group m-form__group row"> <label class="col-xl-3 col-lg-3 col-form-label"> * City: </label> <div class="col-xl-9 col-lg-9"> <input type="text" name="city" class="form-control m-input" placeholder="" value="Polo Alto"> </div> </div> <div class="form-group m-form__group row"> <label class="col-xl-3 col-lg-3 col-form-label"> * State: </label> <div class="col-xl-9 col-lg-9"> <input type="text" name="state" class="form-control m-input" placeholder="" value="California"> </div> </div> <div class="form-group m-form__group row"> <label class="col-xl-3 col-lg-3 col-form-label"> * Country: </label> <div class="col-xl-9 col-lg-9"> <select name="country" class="form-control m-input"> <option value=""> Select </option> <option value="AF"> Afghanistan </option> <option value="AX"> Åland Islands </option> <option value="AL"> Albania </option> <option value="ZM"> Zambia </option> <option value="ZW"> Zimbabwe </option> </select> </div> </div> </div> </div> <div class="m-wizard__form-step" id="m_wizard_form_step_2"> <div class="m-form__section m-form__section--first"> <div class="m-form__heading"> <h3 class="m-form__heading-title"> Account Details </h3> </div> <div class="form-group m-form__group row"> <div class="col-lg-12"> <label class="form-control-label"> * URL: </label> <input type="url" name="account_url" class="form-control m-input" placeholder="" value="http://sinortech.vertoffice.com"> <span class="m-form__help"> Please enter your preferred URL to your dashboard </span> </div> </div> <div class="form-group m-form__group row"> <div class="col-lg-6 m-form__group-sub"> <label class="form-control-label"> * Username: </label> <input type="text" name="account_username" class="form-control m-input" placeholder="" value="nick.stone"> <span class="m-form__help"> Your username to login to your dashboard </span> </div> <div class="col-lg-6 m-form__group-sub"> <label class="form-control-label"> * Password: </label> <input type="password" name="account_password" class="form-control m-input" placeholder="" value="qwerty"> <span class="m-form__help"> Please use letters and at least one number and symbol </span> </div> </div> </div> <div class="m-separator m-separator--dashed m-separator--lg"></div> <div class="m-form__section"> <div class="m-form__heading"> <h3 class="m-form__heading-title"> Client Settings </h3> </div> <div class="form-group m-form__group row"> <div class="col-lg-6 m-form__group-sub"> <label class="form-control-label"> * User Group: </label> <div class="m-radio-inline"> <label class="m-radio m-radio--solid m-radio--brand"> <input type="radio" name="account_group" checked="" value="2"> Sales Person <span></span> </label> <label class="m-radio m-radio--solid m-radio--brand"> <input type="radio" name="account_group" value="2"> Customer <span></span> </label> </div> <span class="m-form__help"> Please select user group </span> </div> <div class="col-lg-6 m-form__group-sub"> <label class="form-control-label"> * Communications: </label> <div class="m-checkbox-inline"> <label class="m-checkbox m-checkbox--solid m-checkbox--brand"> <input type="checkbox" name="account_communication[]" checked value="email"> Email <span></span> </label> <label class="m-checkbox m-checkbox--solid m-checkbox--brand"> <input type="checkbox" name="account_communication[]" value="sms"> SMS <span></span> </label> <label class="m-checkbox m-checkbox--solid m-checkbox--brand"> <input type="checkbox" name="account_communication[]" value="phone"> Phone <span></span> </label> </div> <span class="m-form__help"> Please select user communication options </span> </div> </div> </div> </div> <div class="m-wizard__form-step" id="m_wizard_form_step_3"> <div class="m-form__section m-form__section--first"> <div class="m-form__heading"> <h3 class="m-form__heading-title"> Billing Information </h3> </div> <div class="form-group m-form__group row"> <div class="col-lg-12"> <label class="form-control-label"> * Cardholder Name: </label> <input type="text" name="billing_card_name" class="form-control m-input" placeholder="" value="Nick Stone"> </div> </div> <div class="form-group m-form__group row"> <div class="col-lg-12"> <label class="form-control-label"> * Card Number: </label> <input type="text" name="billing_card_number" class="form-control m-input" placeholder="" value="372955886840581"> </div> </div> <div class="form-group m-form__group row"> <div class="col-lg-4 m-form__group-sub"> <label class="form-control-label"> * Exp Month: </label> <select class="form-control m-input" name="billing_card_exp_month"> <option value=""> Select </option> <option value="01"> 01 </option> <option value="02"> 02 </option> <option value="03"> 03 </option> <option value="04" selected> 04 </option> </select> </div> <div class="col-lg-4 m-form__group-sub"> <label class="form-control-label"> * Exp Year: </label> <select class="form-control m-input" name="billing_card_exp_year"> <option value=""> Select </option> <option value="2018"> 2018 </option> <option value="2019"> 2019 </option> <option value="2020"> 2020 </option> <option value="2021" selected> 2021 </option> <option value="2022"> 2022 </option> <option value="2023"> 2023 </option> <option value="2024"> 2024 </option> </select> </div> <div class="col-lg-4 m-form__group-sub"> <label class="form-control-label"> * CVV: </label> <input type="number" class="form-control m-input" name="billing_card_cvv" placeholder="" value="450"> </div> </div> </div> <div class="m-separator m-separator--dashed m-separator--lg"></div> <div class="m-form__section"> <div class="m-form__heading"> <h3 class="m-form__heading-title"> Billing Address <i data-toggle="m-tooltip" data-width="auto" class="m-form__heading-help-icon flaticon-info" title="If different than the corresponding address"></i> </h3> </div> <div class="form-group m-form__group row"> <div class="col-lg-12"> <label class="form-control-label"> * Address 1: </label> <input type="text" name="billing_address_1" class="form-control m-input" placeholder="" value="Headquarters 1120 N Street Sacramento 916-654-5266"> </div> </div> <div class="form-group m-form__group row"> <div class="col-lg-12"> <label class="form-control-label"> Address 2: </label> <input type="text" name="billing_address_2" class="form-control m-input" placeholder="" value="P.O. Box 942873 Sacramento, CA 94273-0001"> </div> </div> <div class="form-group m-form__group row"> <div class="col-lg-5 m-form__group-sub"> <label class="form-control-label"> * City: </label> <input type="text" class="form-control m-input" name="billing_city" placeholder="" value="Polo Alto"> </div> <div class="col-lg-5 m-form__group-sub"> <label class="form-control-label"> * State: </label> <input type="text" class="form-control m-input" name="billing_state" placeholder="" value="California"> </div> <div class="col-lg-2 m-form__group-sub"> <label class="form-control-label"> * ZIP: </label> <input type="text" class="form-control m-input" name="billing_zip" placeholder="" value="34890"> </div> </div> </div> <div class="m-separator m-separator--dashed m-separator--lg"></div> <div class="m-form__section"> <div class="m-form__heading"> <h3 class="m-form__heading-title"> Delivery Type </h3> </div> <div class="form-group m-form__group"> <div class="row"> <div class="col-lg-6"> <label class="m-option"> <span class="m-option__control"> <span class="m-radio m-radio--state-brand"> <input type="radio" name="billing_delivery" value=""> <span></span> </span> </span> <span class="m-option__label"> <span class="m-option__head"> <span class="m-option__title"> Standart Delevery </span> <span class="m-option__focus"> Free </span> </span> <span class="m-option__body"> Estimated 14-20 Day Shipping ( Duties end taxes may be due upon delivery ) </span> </span> </label> </div> <div class="col-lg-6"> <label class="m-option"> <span class="m-option__control"> <span class="m-radio m-radio--state-brand"> <input type="radio" name="billing_delivery" value=""> <span></span> </span> </span> <span class="m-option__label"> <span class="m-option__head"> <span class="m-option__title"> Fast Delevery </span> <span class="m-option__focus"> $ 8.00 </span> </span> <span class="m-option__body"> Estimated 2-5 Day Shipping ( Duties end taxes may be due upon delivery ) </span> </span> </label> </div> </div> <div class="m-form__help"> </div> </div> </div> </div> <div class="m-wizard__form-step" id="m_wizard_form_step_4"> <div class="m-accordion m-accordion--default" id="m_accordion_1" role="tablist"> <div class="m-accordion__item active"> <div class="m-accordion__item-head" role="tab" id="m_accordion_1_item_1_head" data-toggle="collapse" href="#m_accordion_1_item_1_body" aria-expanded=" false"> <span class="m-accordion__item-icon"> <i class="fa flaticon-user-ok"></i> </span> <span class="m-accordion__item-title"> 1. Client Information </span> <span class="m-accordion__item-mode"></span> </div> <div class="m-accordion__item-body collapse show" id="m_accordion_1_item_1_body" class=" " role="tabpanel" aria-labelledby="m_accordion_1_item_1_head" data-parent="#m_accordion_1"> <div class="tab-content active m--padding-30"> <div class="m-form__section m-form__section--first"> <div class="m-form__heading"> <h4 class="m-form__heading-title"> Client Details </h4> </div> <div class="form-group m-form__group m-form__group--sm row"> <label class="col-xl-4 col-lg-4 col-form-label"> Name: </label> <div class="col-xl-8 col-lg-8"> <span class="m-form__control-static"> Nick Stone </span> </div> </div> <div class="form-group m-form__group m-form__group--sm row"> <label class="col-xl-4 col-lg-4 col-form-label"> Email: </label> <div class="col-xl-8 col-lg-8"> <span class="m-form__control-static"> [email protected] </span> </div> </div> <div class="form-group m-form__group m-form__group--sm row"> <label class="col-xl-4 col-lg-4 col-form-label"> Phone </label> <div class="col-xl-8 col-lg-8"> <span class="m-form__control-static"> +206-78-55034890 </span> </div> </div> </div> <div class="m-separator m-separator--dashed m-separator--lg"></div> <div class="m-form__section"> <div class="m-form__heading"> <h4 class="m-form__heading-title"> Corresponding Address <i data-toggle="m-tooltip" class="m-form__heading-help-icon flaticon-info" title="Some help text goes here"></i> </h4> </div> <div class="form-group m-form__group m-form__group--sm row"> <label class="col-xl-4 col-lg-4 col-form-label"> Address Line 1: </label> <div class="col-xl-8 col-lg-8"> <span class="m-form__control-static"> Headquarters 1120 N Street Sacramento 916-654-5266 </span> </div> </div> <div class="form-group m-form__group m-form__group--sm row"> <label class="col-xl-4 col-lg-4 col-form-label"> Address Line 2: </label> <div class="col-xl-8 col-lg-8"> <span class="m-form__control-static"> P.O. Box 942873 Sacramento, CA 94273-0001 </span> </div> </div> <div class="form-group m-form__group m-form__group--sm row"> <label class="col-xl-4 col-lg-4 col-form-label"> City: </label> <div class="col-xl-8 col-lg-8"> <span class="m-form__control-static"> Polo Alto </span> </div> </div> <div class="form-group m-form__group m-form__group--sm row"> <label class="col-xl-4 col-lg-4 col-form-label"> State: </label> <div class="col-xl-8 col-lg-8"> <span class="m-form__control-static"> California </span> </div> </div> <div class="form-group m-form__group m-form__group--sm row"> <label class="col-xl-4 col-lg-4 col-form-label"> Country: </label> <div class="col-xl-8 col-lg-8"> <span class="m-form__control-static"> USA </span> </div> </div> </div> </div> </div> </div> <div class="m-accordion__item"> <div class="m-accordion__item-head collapsed" role="tab" id="m_accordion_1_item_2_head" data-toggle="collapse" href="#m_accordion_1_item_2_body" aria-expanded=" false"> <span class="m-accordion__item-icon"> <i class="fa flaticon-placeholder"></i> </span> <span class="m-accordion__item-title"> 2. Account Setup </span> <span class="m-accordion__item-mode"></span> </div> <div class="m-accordion__item-body collapse" id="m_accordion_1_item_2_body" class=" " role="tabpanel" aria-labelledby="m_accordion_1_item_2_head" data-parent="#m_accordion_1"> <div class="tab-content m--padding-30"> <div class="m-form__section m-form__section--first"> <div class="m-form__heading"> <h4 class="m-form__heading-title"> Account Details </h4> </div> <div class="form-group m-form__group m-form__group--sm row"> <label class="col-xl-4 col-lg-4 col-form-label"> URL: </label> <div class="col-xl-8 col-lg-8"> <span class="m-form__control-static"> sinortech.vertoffice.com </span> </div> </div> <div class="form-group m-form__group m-form__group--sm row"> <label class="col-xl-4 col-lg-4 col-form-label"> Username: </label> <div class="col-xl-8 col-lg-8"> <span class="m-form__control-static"> sinortech.admin </span> </div> </div> <div class="form-group m-form__group m-form__group--sm row"> <label class="col-xl-4 col-lg-4 col-form-label"> Password: </label> <div class="col-xl-8 col-lg-8"> <span class="m-form__control-static"> ********* </span> </div> </div> </div> <div class="m-separator m-separator--dashed m-separator--lg"></div> <div class="m-form__section"> <div class="m-form__heading"> <h4 class="m-form__heading-title"> Client Settings </h4> </div> <div class="form-group m-form__group m-form__group--sm row"> <label class="col-xl-4 col-lg-4 col-form-label"> User Group: </label> <div class="col-xl-8 col-lg-8"> <span class="m-form__control-static"> Customer </span> </div> </div> <div class="form-group m-form__group m-form__group--sm row"> <label class="col-xl-4 col-lg-4 col-form-label"> Communications: </label> <div class="col-xl-8 col-lg-8"> <span class="m-form__control-static"> Phone, Email </span> </div> </div> </div> </div> </div> </div> <div class="m-accordion__item"> <div class="m-accordion__item-head collapsed" role="tab" id="m_accordion_1_item_3_head" data-toggle="collapse" href="#m_accordion_1_item_3_body" aria-expanded=" false"> <span class="m-accordion__item-icon"> <i class="fa flaticon-placeholder"></i> </span> <span class="m-accordion__item-title"> 3. Billing Setup </span> <span class="m-accordion__item-mode"></span> </div> <div class="m-accordion__item-body collapse" id="m_accordion_1_item_3_body" class=" " role="tabpanel" aria-labelledby="m_accordion_1_item_3_head" data-parent="#m_accordion_1"> <div class="tab-content m--padding-30"> <div class="m-form__section m-form__section--first"> <div class="m-form__heading"> <h4 class="m-form__heading-title"> Billing Information </h4> </div> <div class="form-group m-form__group m-form__group--sm row"> <label class="col-xl-4 col-lg-4 col-form-label"> Cardholder Name: </label> <div class="col-xl-8 col-lg-8"> <span class="m-form__control-static"> Nick Stone </span> </div> </div> <div class="form-group m-form__group m-form__group--sm row"> <label class="col-xl-4 col-lg-4 col-form-label"> Card Number: </label> <div class="col-xl-8 col-lg-8"> <span class="m-form__control-static"> *************4589 </span> </div> </div> <div class="form-group m-form__group m-form__group--sm row"> <label class="col-xl-4 col-lg-4 col-form-label"> Exp Month: </label> <div class="col-xl-8 col-lg-8"> <span class="m-form__control-static"> 10 </span> </div> </div> <div class="form-group m-form__group m-form__group--sm row"> <label class="col-xl-4 col-lg-4 col-form-label"> Exp Year: </label> <div class="col-xl-8 col-lg-8"> <span class="m-form__control-static"> 2018 </span> </div> </div> <div class="form-group m-form__group m-form__group--sm row"> <label class="col-xl-4 col-lg-4 col-form-label"> CVV: </label> <div class="col-xl-8 col-lg-8"> <span class="m-form__control-static"> *** </span> </div> </div> </div> <div class="m-separator m-separator--dashed m-separator--lg"></div> <div class="m-form__section"> <div class="m-form__heading"> <h4 class="m-form__heading-title"> Billing Address </h4> </div> <div class="form-group m-form__group m-form__group--sm row"> <label class="col-xl-4 col-lg-4 col-form-label"> Address Line 1: </label> <div class="col-xl-8 col-lg-8"> <span class="m-form__control-static"> Headquarters 1120 N Street Sacramento 916-654-5266 </span> </div> </div> <div class="form-group m-form__group m-form__group--sm row"> <label class="col-xl-4 col-lg-4 col-form-label"> Address Line 2: </label> <div class="col-xl-8 col-lg-8"> <span class="m-form__control-static"> P.O. Box 942873 Sacramento, CA 94273-0001 </span> </div> </div> <div class="form-group m-form__group m-form__group--sm row"> <label class="col-xl-4 col-lg-4 col-form-label"> City: </label> <div class="col-xl-8 col-lg-8"> <span class="m-form__control-static"> Polo Alto </span> </div> </div> <div class="form-group m-form__group m-form__group--sm row"> <label class="col-xl-4 col-lg-4 col-form-label"> State: </label> <div class="col-xl-8 col-lg-8"> <span class="m-form__control-static"> California </span> </div> </div> <div class="form-group m-form__group m-form__group--sm row"> <label class="col-xl-4 col-lg-4 col-form-label"> ZIP: </label> <div class="col-xl-8 col-lg-8"> <span class="m-form__control-static"> 37505 </span> </div> </div> <div class="form-group m-form__group m-form__group--sm row"> <label class="col-xl-4 col-lg-4 col-form-label"> Country: </label> <div class="col-xl-8 col-lg-8"> <span class="m-form__control-static"> USA </span> </div> </div> </div> </div> </div> </div> </div> <div class="m-separator m-separator--dashed m-separator--lg"></div> <div class="form-group m-form__group m-form__group--sm row"> <div class="col-xl-12"> <div class="m-checkbox-inline"> <label class="m-checkbox m-checkbox--solid m-checkbox--brand"> <input type="checkbox" name="accept" value="1"> Click here to indicate that you have read and agree to the terms presented in the Terms and Conditions agreement <span></span> </label> </div> </div> </div> </div> </div> <div class="m-portlet__foot m-portlet__foot--fit m--margin-top-40"> <div class="m-form__actions"> <div class="row"> <div class="col-lg-6 m--align-left"> <a href="#" class="btn btn-secondary m-btn m-btn--custom m-btn--icon" data-wizard-action="prev"> <span> <i class="la la-arrow-left"></i> <span> Back </span> </span> </a> </div> <div class="col-lg-6 m--align-right"> <a href="#" class="btn btn-primary m-btn m-btn--custom m-btn--icon" data-wizard-action="submit"> <span> <i class="la la-check"></i> <span> Submit </span> </span> </a> <a href="#" class="btn btn-success m-btn m-btn--custom m-btn--icon" data-wizard-action="next"> <span> <span> Save & Continue </span> <i class="la la-arrow-right"></i> </span> </a> </div> </div> </div> </div> </form> </div> </div> </div> </div> </div> </div> </div> -
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?
