Base solution for your next web application
Open Closed

Metronic Wizard component integration in Angular (Ver 5.5.0) #5242


User avatar
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)
  • User Avatar
    0
    ashgadala created

    Are you able to login into the app after compiling the app with default config?

  • User Avatar
    0
    mmukkara created

    Yes. App is working fine. No issues.

  • User Avatar
    0
    ismcagdas created
    Support Team

    @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.

  • User Avatar
    0
    mmukkara created

    Thanks @ismcagdas . Will wait for the fix.

  • User Avatar
    0
    alirizaadiyahsi created

    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.

  • User Avatar
    0
    mmukkara created

    @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.

  • User Avatar
    0
    alirizaadiyahsi created

    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>

  • User Avatar
    0
    mmukkara created

    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 
    	                                                (&nbsp;Duties end taxes may be due 
    	                                                upon delivery&nbsp;)
    																					</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">
    																							$&nbsp;8.00
    																						</span>
    																					</span>
    																					<span class="m-option__body">
    																						Estimated 2-5 Day Shipping
    	                                                (&nbsp;Duties end taxes may be due
    	                                                upon delivery&nbsp;)
    																					</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>
    																			&nbsp;&nbsp;
    																			<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>
    																			&nbsp;&nbsp;
    																			<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 &amp; Continue
    																			</span>
    																			&nbsp;&nbsp;
    																			<i class="la la-arrow-right"></i>
    																		</span>
    																	</a>
    																</div>
    															</div>
    														</div>
    													</div>
    													
    												</form>
    											</div>
    											
    										</div>
    									</div>
    								</div>
    								
    							</div>
    							
    						</div>
    						
    					</div>
    
  • User Avatar
    0
    mmukkara created

    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

  • User Avatar
    0
    ismcagdas created
    Support Team

    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> ?

  • User Avatar
    0
    mmukkara created

    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

  • User Avatar
    0
    ismcagdas created
    Support Team

    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.

  • User Avatar
    0
    system15 created

    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.

  • User Avatar
    0
    ismcagdas created
    Support Team

    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.

  • User Avatar
    0
    demo.solaru created

    how to integrate Metronic Wizard3 component in Angular? is there any documentation?