Left file: appwork-v1_5_2/angular-demo/src/app/+forms/ng2-archwizard/ng2-archwizard.component.html  
Right file: appwork-v1_6_0/angular-demo/src/app/+forms/angular-archwizard/angular-archwizard.component.html  
1 <h4 class="font-weight-bold py-3 mb-4"> = 1 <h4 class="font-weight-bold py-3 mb-4">
2   <span class="text-muted font-weight-light">Forms /</span> Ng2 Archwizard <> 2   <span class="text-muted font-weight-light">Forms /</span> Angular Archwizard
3 </h4> = 3 </h4>
4     4  
5 <hr class="container-m-nx border-light mt-0 mb-5">   5 <hr class="container-m-nx border-light mt-0 mb-5">
6     6  
7 <wizard [navBarLocation]="'top'" [navBarLayout]="'custom'"> <> 7 <aw-wizard [navBarLocation]="'top'" [navBarLayout]="'custom'">
8   <wizard-step navigationSymbol="1" navigationSymbolFontFamily="Roboto">   8   <aw-wizard-step [navigationSymbol]="{ symbol: '1' }">
9     <ng-template wizardStepTitle><div class="text-muted small">FIRST STEP</div>Keyboard</ng-template>   9     <ng-template awWizardStepTitle><div class="text-muted small">FIRST STEP</div>Keyboard</ng-template>
10   = 10  
11     <div class="card mb-3">   11     <div class="card mb-3">
12       <div class="card-body">   12       <div class="card-body">
13         Content of Step 1   13         Content of Step 1
14       </div>   14       </div>
15     </div>   15     </div>
16     16  
17     <div class="text-right">   17     <div class="text-right">
18       <button type="button" class="btn btn-default" nextStep>Next</button> <> 18       <button type="button" class="btn btn-default" awNextStep>Next</button>
19     </div> = 19     </div>
20   </wizard-step> <> 20   </aw-wizard-step>
21   <wizard-step navigationSymbol="2" navigationSymbolFontFamily="Roboto">   21   <aw-wizard-step [navigationSymbol]="{ symbol: '2' }">
22     <ng-template wizardStepTitle><div class="text-muted small">SECOND STEP</div>Effects</ng-template>   22     <ng-template awWizardStepTitle><div class="text-muted small">SECOND STEP</div>Effects</ng-template>
23   = 23  
24     <div class="card mb-3">   24     <div class="card mb-3">
25       <div class="card-body">   25       <div class="card-body">
26         Content of Step 2   26         Content of Step 2
27       </div>   27       </div>
28     </div>   28     </div>
29     29  
30     <div class="text-right">   30     <div class="text-right">
31       <button type="button" class="btn btn-default" previousStep>Previous</button> <> 31       <button type="button" class="btn btn-default" awPreviousStep>Previous</button>
32       <button type="button" class="btn btn-default" nextStep>Next</button>   32       <button type="button" class="btn btn-default" awNextStep>Next</button>
33     </div> = 33     </div>
34   </wizard-step> <> 34   </aw-wizard-step>
35   <wizard-step navigationSymbol="3" navigationSymbolFontFamily="Roboto">   35   <aw-wizard-step [navigationSymbol]="{ symbol: '3' }">
36     <ng-template wizardStepTitle><div class="text-muted small">THIRD STEP</div>Pager</ng-template>   36     <ng-template awWizardStepTitle><div class="text-muted small">THIRD STEP</div>Pager</ng-template>
37   = 37  
38     <div class="card mb-3">   38     <div class="card mb-3">
39       <div class="card-body">   39       <div class="card-body">
40         Content of Step 2 <> 40         Content of Step 3
41       </div> = 41       </div>
42     </div>   42     </div>
43     43  
44     <div class="text-right">   44     <div class="text-right">
45       <button type="button" class="btn btn-default" previousStep>Previous</button> <> 45       <button type="button" class="btn btn-default" awPreviousStep>Previous</button>
46       <button type="button" class="btn btn-default" nextStep>Next</button>   46       <button type="button" class="btn btn-default" awNextStep>Next</button>
47     </div> = 47     </div>
48   </wizard-step> <> 48   </aw-wizard-step>
49   <wizard-step navigationSymbol="4" navigationSymbolFontFamily="Roboto">   49   <aw-wizard-step [navigationSymbol]="{ symbol: '4' }">
50     <ng-template wizardStepTitle><div class="text-muted small">FOURTH STEP</div>Notifications</ng-template>   50     <ng-template awWizardStepTitle><div class="text-muted small">FOURTH STEP</div>Notifications</ng-template>
51   = 51  
52     <div class="card mb-3">   52     <div class="card mb-3">
53       <div class="card-body">   53       <div class="card-body">
54         Content of Step 3 <> 54         Content of Step 4
55       </div> = 55       </div>
56     </div>   56     </div>
57     57  
58     <div class="text-right">   58     <div class="text-right">
59       <button type="button" class="btn btn-default" previousStep>Previous</button> <> 59       <button type="button" class="btn btn-default" awPreviousStep>Previous</button>
60       <button type="button" class="btn btn-primary" (click)="finishFunction()">Finish</button> = 60       <button type="button" class="btn btn-primary" (click)="finishFunction()">Finish</button>
61     </div>   61     </div>
62   </wizard-step> <> 62   </aw-wizard-step>
63 </wizard>   63 </aw-wizard>
64   = 64  
65 <hr class="container-m-nx border-light my-4">   65 <hr class="container-m-nx border-light my-4">
66 <h6 class="text-muted small font-weight-bold py-3 my-4">   66 <h6 class="text-muted small font-weight-bold py-3 my-4">
67   With icons   67   With icons
68 </h6>   68 </h6>
69     69  
70 <wizard [navBarLocation]="'top'" [navBarLayout]="'custom'"> <> 70 <aw-wizard class="aw-wizard-icons" [navBarLocation]="'top'" [navBarLayout]="'custom'">
71   <wizard-step navigationSymbol="&#62544;" navigationSymbolFontFamily="Ionicons">   71   <aw-wizard-step [navigationSymbol]="{ symbol: '&#62544;', fontFamily: 'Ionicons' }">
72     <ng-template wizardStepTitle><div class="text-muted small">FIRST STEP</div>Keyboard</ng-template>   72     <ng-template awWizardStepTitle><div class="text-muted small">FIRST STEP</div>Keyboard</ng-template>
73   = 73  
74     <div class="card mb-3">   74     <div class="card mb-3">
75       <div class="card-body">   75       <div class="card-body">
76         Content of Step 1   76         Content of Step 1
77       </div>   77       </div>
78     </div>   78     </div>
79     79  
80     <div class="text-right">   80     <div class="text-right">
81       <button type="button" class="btn btn-default" nextStep>Next</button> <> 81       <button type="button" class="btn btn-default" awNextStep>Next</button>
82     </div> = 82     </div>
83   </wizard-step> <> 83   </aw-wizard-step>
84   <wizard-step navigationSymbol="&#62163;" navigationSymbolFontFamily="Ionicons">   84   <aw-wizard-step [navigationSymbol]="{ symbol: '&#62163;', fontFamily: 'Ionicons' }">
85     <ng-template wizardStepTitle><div class="text-muted small">SECOND STEP</div>Effects</ng-template>   85     <ng-template awWizardStepTitle><div class="text-muted small">SECOND STEP</div>Effects</ng-template>
86   = 86  
87     <div class="card mb-3">   87     <div class="card mb-3">
88       <div class="card-body">   88       <div class="card-body">
89         Content of Step 2   89         Content of Step 2
90       </div>   90       </div>
91     </div>   91     </div>
92     92  
93     <div class="text-right">   93     <div class="text-right">
94       <button type="button" class="btn btn-default" previousStep>Previous</button> <> 94       <button type="button" class="btn btn-default" awPreviousStep>Previous</button>
95       <button type="button" class="btn btn-default" nextStep>Next</button>   95       <button type="button" class="btn btn-default" awNextStep>Next</button>
96     </div> = 96     </div>
97   </wizard-step> <> 97   </aw-wizard-step>
98   <wizard-step navigationSymbol="&#62170;" navigationSymbolFontFamily="Ionicons">   98   <aw-wizard-step [navigationSymbol]="{ symbol: '&#62170;', fontFamily: 'Ionicons' }">
99     <ng-template wizardStepTitle><div class="text-muted small">THIRD STEP</div>Pager</ng-template>   99     <ng-template awWizardStepTitle><div class="text-muted small">THIRD STEP</div>Pager</ng-template>
100   = 100  
101     <div class="card mb-3">   101     <div class="card mb-3">
102       <div class="card-body">   102       <div class="card-body">
103         Content of Step 2 <> 103         Content of Step 3
104       </div> = 104       </div>
105     </div>   105     </div>
106     106  
107     <div class="text-right">   107     <div class="text-right">
108       <button type="button" class="btn btn-default" previousStep>Previous</button> <> 108       <button type="button" class="btn btn-default" awPreviousStep>Previous</button>
109       <button type="button" class="btn btn-default" nextStep>Next</button>   109       <button type="button" class="btn btn-default" awNextStep>Next</button>
110     </div> = 110     </div>
111   </wizard-step> <> 111   </aw-wizard-step>
112   <wizard-step navigationSymbol="&#62263;" navigationSymbolFontFamily="Ionicons">   112   <aw-wizard-step [navigationSymbol]="{ symbol: '&#62263;', fontFamily: 'Ionicons' }">
113     <ng-template wizardStepTitle><div class="text-muted small">FOURTH STEP</div>Notifications</ng-template>   113     <ng-template awWizardStepTitle><div class="text-muted small">FOURTH STEP</div>Notifications</ng-template>
114   = 114  
115     <div class="card mb-3">   115     <div class="card mb-3">
116       <div class="card-body">   116       <div class="card-body">
117         Content of Step 3 <> 117         Content of Step 4
118       </div> = 118       </div>
119     </div>   119     </div>
120     120  
121     <div class="text-right">   121     <div class="text-right">
122       <button type="button" class="btn btn-default" previousStep>Previous</button> <> 122       <button type="button" class="btn btn-default" awPreviousStep>Previous</button>
123       <button type="button" class="btn btn-primary" (click)="finishFunction()">Finish</button> = 123       <button type="button" class="btn btn-primary" (click)="finishFunction()">Finish</button>
124     </div>   124     </div>
125   </wizard-step> <> 125   </aw-wizard-step>
126 </wizard>   126 </aw-wizard>
127   = 127  
128 <hr class="container-m-nx border-light my-4">   128 <hr class="container-m-nx border-light my-4">
129 <h6 class="text-muted small font-weight-bold py-3 my-4">   129 <h6 class="text-muted small font-weight-bold py-3 my-4">
130   Boxed steps   130   Boxed steps
131 </h6>   131 </h6>
132     132  
133 <wizard class="ng2-archwizard-boxed-steps" [navBarLocation]="'top'" [navBarLayout]="'custom'"> <> 133 <aw-wizard class="aw-wizard-boxed-steps aw-wizard-icons" [navBarLocation]="'top'" [navBarLayout]="'custom'">
134   <wizard-step navigationSymbol="&#62544;" navigationSymbolFontFamily="Ionicons">   134   <aw-wizard-step [navigationSymbol]="{ symbol: '&#62544;', fontFamily: 'Ionicons' }">
135     <ng-template wizardStepTitle><div class="text-muted small">FIRST STEP</div>Keyboard</ng-template>   135     <ng-template awWizardStepTitle><div class="text-muted small">FIRST STEP</div>Keyboard</ng-template>
136   = 136  
137     <div class="card mb-3">   137     <div class="card mb-3">
138       <div class="card-body">   138       <div class="card-body">
139         Content of Step 1   139         Content of Step 1
140       </div>   140       </div>
141     </div>   141     </div>
142     142  
143     <div class="text-right">   143     <div class="text-right">
144       <button type="button" class="btn btn-default" nextStep>Next</button> <> 144       <button type="button" class="btn btn-default" awNextStep>Next</button>
145     </div> = 145     </div>
146   </wizard-step> <> 146   </aw-wizard-step>
147   <wizard-step navigationSymbol="&#62163;" navigationSymbolFontFamily="Ionicons">   147   <aw-wizard-step [navigationSymbol]="{ symbol: '&#62163;', fontFamily: 'Ionicons' }">
148     <ng-template wizardStepTitle><div class="text-muted small">SECOND STEP</div>Effects</ng-template>   148     <ng-template awWizardStepTitle><div class="text-muted small">SECOND STEP</div>Effects</ng-template>
149   = 149  
150     <div class="card mb-3">   150     <div class="card mb-3">
151       <div class="card-body">   151       <div class="card-body">
152         Content of Step 2   152         Content of Step 2
153       </div>   153       </div>
154     </div>   154     </div>
155     155  
156     <div class="text-right">   156     <div class="text-right">
157       <button type="button" class="btn btn-default" previousStep>Previous</button> <> 157       <button type="button" class="btn btn-default" awPreviousStep>Previous</button>
158       <button type="button" class="btn btn-default" nextStep>Next</button>   158       <button type="button" class="btn btn-default" awNextStep>Next</button>
159     </div> = 159     </div>
160   </wizard-step> <> 160   </aw-wizard-step>
161   <wizard-step navigationSymbol="&#62170;" navigationSymbolFontFamily="Ionicons">   161   <aw-wizard-step [navigationSymbol]="{ symbol: '&#62170;', fontFamily: 'Ionicons' }">
162     <ng-template wizardStepTitle><div class="text-muted small">THIRD STEP</div>Pager</ng-template>   162     <ng-template awWizardStepTitle><div class="text-muted small">THIRD STEP</div>Pager</ng-template>
163   = 163  
164     <div class="card mb-3">   164     <div class="card mb-3">
165       <div class="card-body">   165       <div class="card-body">
166         Content of Step 2 <> 166         Content of Step 3
167       </div> = 167       </div>
168     </div>   168     </div>
169     169  
170     <div class="text-right">   170     <div class="text-right">
171       <button type="button" class="btn btn-default" previousStep>Previous</button> <> 171       <button type="button" class="btn btn-default" awPreviousStep>Previous</button>
172       <button type="button" class="btn btn-default" nextStep>Next</button>   172       <button type="button" class="btn btn-default" awNextStep>Next</button>
173     </div> = 173     </div>
174   </wizard-step> <> 174   </aw-wizard-step>
175   <wizard-step navigationSymbol="&#62263;" navigationSymbolFontFamily="Ionicons">   175   <aw-wizard-step [navigationSymbol]="{ symbol: '&#62263;', fontFamily: 'Ionicons' }">
176     <ng-template wizardStepTitle><div class="text-muted small">FOURTH STEP</div>Notifications</ng-template>   176     <ng-template awWizardStepTitle><div class="text-muted small">FOURTH STEP</div>Notifications</ng-template>
177   = 177  
178     <div class="card mb-3">   178     <div class="card mb-3">
179       <div class="card-body">   179       <div class="card-body">
180         Content of Step 3 <> 180         Content of Step 4
181       </div> = 181       </div>
182     </div>   182     </div>
183     183  
184     <div class="text-right">   184     <div class="text-right">
185       <button type="button" class="btn btn-default" previousStep>Previous</button> <> 185       <button type="button" class="btn btn-default" awPreviousStep>Previous</button>
186       <button type="button" class="btn btn-primary" (click)="finishFunction()">Finish</button> = 186       <button type="button" class="btn btn-primary" (click)="finishFunction()">Finish</button>
187     </div>   187     </div>
188   </wizard-step> <> 188   </aw-wizard-step>
189 </wizard>   189 </aw-wizard>
190   = 190  
191 <hr class="container-m-nx border-light my-4">   191 <hr class="container-m-nx border-light my-4">
192 <h6 class="text-muted small font-weight-bold py-3 my-4">   192 <h6 class="text-muted small font-weight-bold py-3 my-4">
193   Bottom   193   Bottom
194 </h6>   194 </h6>
195     195  
196 <wizard [navBarLocation]="'bottom'" class="ng2-archwizard-bottom" [navBarLayout]="'custom'"> <> 196 <aw-wizard [navBarLocation]="'bottom'" class="aw-wizard-bottom aw-wizard-icons" [navBarLayout]="'custom'">
197   <wizard-step navigationSymbol="&#62544;" navigationSymbolFontFamily="Ionicons">   197   <aw-wizard-step [navigationSymbol]="{ symbol: '&#62544;', fontFamily: 'Ionicons' }">
198     <ng-template wizardStepTitle><div class="text-muted small">FIRST STEP</div>Keyboard</ng-template>   198     <ng-template awWizardStepTitle><div class="text-muted small">FIRST STEP</div>Keyboard</ng-template>
199   = 199  
200     <div class="card">   200     <div class="card">
201       <div class="card-body">   201       <div class="card-body">
202         <p>Content of Step 1</p>   202         <p>Content of Step 1</p>
203     203  
204         <div class="text-right">   204         <div class="text-right">
205           <button type="button" class="btn btn-default" nextStep>Next</button> <> 205           <button type="button" class="btn btn-default" awNextStep>Next</button>
206         </div> = 206         </div>
207       </div>   207       </div>
208     </div>   208     </div>
209   </wizard-step> <> 209   </aw-wizard-step>
210   <wizard-step navigationSymbol="&#62163;" navigationSymbolFontFamily="Ionicons">   210   <aw-wizard-step [navigationSymbol]="{ symbol: '&#62163;', fontFamily: 'Ionicons' }">
211     <ng-template wizardStepTitle><div class="text-muted small">SECOND STEP</div>Effects</ng-template>   211     <ng-template awWizardStepTitle><div class="text-muted small">SECOND STEP</div>Effects</ng-template>
212   = 212  
213     <div class="card">   213     <div class="card">
214       <div class="card-body">   214       <div class="card-body">
215         <p>Content of Step 2</p>   215         <p>Content of Step 2</p>
216     216  
217         <div class="text-right">   217         <div class="text-right">
218           <button type="button" class="btn btn-default" previousStep>Previous</button> <> 218           <button type="button" class="btn btn-default" awPreviousStep>Previous</button>
219           <button type="button" class="btn btn-default" nextStep>Next</button>   219           <button type="button" class="btn btn-default" awNextStep>Next</button>
220         </div> = 220         </div>
221       </div>   221       </div>
222     </div>   222     </div>
223   </wizard-step> <> 223   </aw-wizard-step>
224   <wizard-step navigationSymbol="&#62170;" navigationSymbolFontFamily="Ionicons">   224   <aw-wizard-step [navigationSymbol]="{ symbol: '&#62170;', fontFamily: 'Ionicons' }">
225     <ng-template wizardStepTitle><div class="text-muted small">THIRD STEP</div>Pager</ng-template>   225     <ng-template awWizardStepTitle><div class="text-muted small">THIRD STEP</div>Pager</ng-template>
226   = 226  
227     <div class="card">   227     <div class="card">
228       <div class="card-body">   228       <div class="card-body">
229         <p>Content of Step 3</p>   229         <p>Content of Step 3</p>
230     230  
231         <div class="text-right">   231         <div class="text-right">
232           <button type="button" class="btn btn-default" previousStep>Previous</button> <> 232           <button type="button" class="btn btn-default" awPreviousStep>Previous</button>
233           <button type="button" class="btn btn-default" nextStep>Next</button>   233           <button type="button" class="btn btn-default" awNextStep>Next</button>
234         </div> = 234         </div>
235       </div>   235       </div>
236     </div>   236     </div>
237   </wizard-step> <> 237   </aw-wizard-step>
238   <wizard-step navigationSymbol="&#62263;" navigationSymbolFontFamily="Ionicons">   238   <aw-wizard-step [navigationSymbol]="{ symbol: '&#62263;', fontFamily: 'Ionicons' }">
239     <ng-template wizardStepTitle><div class="text-muted small">FOURTH STEP</div>Notifications</ng-template>   239     <ng-template awWizardStepTitle><div class="text-muted small">FOURTH STEP</div>Notifications</ng-template>
240   = 240  
241     <div class="card">   241     <div class="card">
242       <div class="card-body">   242       <div class="card-body">
243         <p>Content of Step 4</p>   243         <p>Content of Step 4</p>
244     244  
245         <div class="text-right">   245         <div class="text-right">
246           <button type="button" class="btn btn-default" previousStep>Previous</button> <> 246           <button type="button" class="btn btn-default" awPreviousStep>Previous</button>
247           <button type="button" class="btn btn-primary" (click)="finishFunction()">Finish</button> = 247           <button type="button" class="btn btn-primary" (click)="finishFunction()">Finish</button>
248         </div>   248         </div>
249       </div>   249       </div>
250     </div>   250     </div>
251   </wizard-step> <> 251   </aw-wizard-step>
252 </wizard>   252 </aw-wizard>
253   = 253  
254 <hr class="container-m-nx border-light my-4">   254 <hr class="container-m-nx border-light my-4">
255 <h6 class="text-muted small font-weight-bold py-3 my-4">   255 <h6 class="text-muted small font-weight-bold py-3 my-4">
256   Vertical   256   Vertical
257 </h6>   257 </h6>
258     258  
259 <div class="demo-vertical-spacing">   259 <div class="demo-vertical-spacing">
260   <wizard [navBarLocation]="'left'" class="ng2-archwizard-left" [navBarLayout]="'custom'"> <> 260   <aw-wizard [navBarLocation]="'left'" class="aw-wizard-left aw-wizard-icons" [navBarLayout]="'custom'">
261     <wizard-step navigationSymbol="&#62544;" navigationSymbolFontFamily="Ionicons">   261     <aw-wizard-step [navigationSymbol]="{ symbol: '&#62544;', fontFamily: 'Ionicons' }">
262       <ng-template wizardStepTitle><div class="text-muted small">FIRST STEP</div>Keyboard</ng-template>   262       <ng-template awWizardStepTitle><div class="text-muted small">FIRST STEP</div>Keyboard</ng-template>
263   = 263  
264       <div class="card mb-3">   264       <div class="card mb-3">
265         <div class="card-body">   265         <div class="card-body">
266           Content of Step 1   266           Content of Step 1
267         </div>   267         </div>
268       </div>   268       </div>
269     269  
270       <div class="text-right">   270       <div class="text-right">
271         <button type="button" class="btn btn-default" nextStep>Next</button> <> 271         <button type="button" class="btn btn-default" awNextStep>Next</button>
272       </div> = 272       </div>
273     </wizard-step> <> 273     </aw-wizard-step>
274     <wizard-step navigationSymbol="&#62163;" navigationSymbolFontFamily="Ionicons">   274     <aw-wizard-step [navigationSymbol]="{ symbol: '&#62163;', fontFamily: 'Ionicons' }">
275       <ng-template wizardStepTitle><div class="text-muted small">SECOND STEP</div>Effects</ng-template>   275       <ng-template awWizardStepTitle><div class="text-muted small">SECOND STEP</div>Effects</ng-template>
276   = 276  
277       <div class="card mb-3">   277       <div class="card mb-3">
278         <div class="card-body">   278         <div class="card-body">
279           Content of Step 2   279           Content of Step 2
280         </div>   280         </div>
281       </div>   281       </div>
282     282  
283       <div class="text-right">   283       <div class="text-right">
284         <button type="button" class="btn btn-default" previousStep>Previous</button> <> 284         <button type="button" class="btn btn-default" awPreviousStep>Previous</button>
285         <button type="button" class="btn btn-default" nextStep>Next</button>   285         <button type="button" class="btn btn-default" awNextStep>Next</button>
286       </div> = 286       </div>
287     </wizard-step> <> 287     </aw-wizard-step>
288     <wizard-step navigationSymbol="&#62170;" navigationSymbolFontFamily="Ionicons">   288     <aw-wizard-step [navigationSymbol]="{ symbol: '&#62170;', fontFamily: 'Ionicons' }">
289       <ng-template wizardStepTitle><div class="text-muted small">THIRD STEP</div>Pager</ng-template>   289       <ng-template awWizardStepTitle><div class="text-muted small">THIRD STEP</div>Pager</ng-template>
290   = 290  
291       <div class="card mb-3">   291       <div class="card mb-3">
292         <div class="card-body">   292         <div class="card-body">
293           Content of Step 2 <> 293           Content of Step 3
294         </div> = 294         </div>
295       </div>   295       </div>
296     296  
297       <div class="text-right">   297       <div class="text-right">
298         <button type="button" class="btn btn-default" previousStep>Previous</button> <> 298         <button type="button" class="btn btn-default" awPreviousStep>Previous</button>
299         <button type="button" class="btn btn-primary" (click)="finishFunction()">Finish</button> = 299         <button type="button" class="btn btn-primary" (click)="finishFunction()">Finish</button>
300       </div>   300       </div>
301     </wizard-step> <> 301     </aw-wizard-step>
302   </wizard>   302   </aw-wizard>
303   = 303  
304   <wizard [navBarLocation]="'right'" class="ng2-archwizard-right" [navBarLayout]="'custom'"> <> 304   <aw-wizard [navBarLocation]="'right'" class="aw-wizard-right aw-wizard-icons" [navBarLayout]="'custom'">
305     <wizard-step navigationSymbol="&#62544;" navigationSymbolFontFamily="Ionicons">   305     <aw-wizard-step [navigationSymbol]="{ symbol: '&#62544;', fontFamily: 'Ionicons' }">
306       <ng-template wizardStepTitle><div class="text-muted small">FIRST STEP</div>Keyboard</ng-template>   306       <ng-template awWizardStepTitle><div class="text-muted small">FIRST STEP</div>Keyboard</ng-template>
307   = 307  
308       <div class="card mb-3">   308       <div class="card mb-3">
309         <div class="card-body">   309         <div class="card-body">
310           Content of Step 1   310           Content of Step 1
311         </div>   311         </div>
312       </div>   312       </div>
313     313  
314       <div class="text-right">   314       <div class="text-right">
315         <button type="button" class="btn btn-default" nextStep>Next</button> <> 315         <button type="button" class="btn btn-default" awNextStep>Next</button>
316       </div> = 316       </div>
317     </wizard-step> <> 317     </aw-wizard-step>
318     <wizard-step navigationSymbol="&#62163;" navigationSymbolFontFamily="Ionicons">   318     <aw-wizard-step [navigationSymbol]="{ symbol: '&#62163;', fontFamily: 'Ionicons' }">
319       <ng-template wizardStepTitle><div class="text-muted small">SECOND STEP</div>Effects</ng-template>   319       <ng-template awWizardStepTitle><div class="text-muted small">SECOND STEP</div>Effects</ng-template>
320   = 320  
321       <div class="card mb-3">   321       <div class="card mb-3">
322         <div class="card-body">   322         <div class="card-body">
323           Content of Step 2   323           Content of Step 2
324         </div>   324         </div>
325       </div>   325       </div>
326     326  
327       <div class="text-right">   327       <div class="text-right">
328         <button type="button" class="btn btn-default" previousStep>Previous</button> <> 328         <button type="button" class="btn btn-default" awPreviousStep>Previous</button>
329         <button type="button" class="btn btn-default" nextStep>Next</button>   329         <button type="button" class="btn btn-default" awNextStep>Next</button>
330       </div> = 330       </div>
331     </wizard-step> <> 331     </aw-wizard-step>
332     <wizard-step navigationSymbol="&#62170;" navigationSymbolFontFamily="Ionicons">   332     <aw-wizard-step [navigationSymbol]="{ symbol: '&#62170;', fontFamily: 'Ionicons' }">
333       <ng-template wizardStepTitle><div class="text-muted small">THIRD STEP</div>Pager</ng-template>   333       <ng-template awWizardStepTitle><div class="text-muted small">THIRD STEP</div>Pager</ng-template>
334   = 334  
335       <div class="card mb-3">   335       <div class="card mb-3">
336         <div class="card-body">   336         <div class="card-body">
337           Content of Step 2 <> 337           Content of Step 3
338         </div> = 338         </div>
339       </div>   339       </div>
340     340  
341       <div class="text-right">   341       <div class="text-right">
342         <button type="button" class="btn btn-default" previousStep>Previous</button> <> 342         <button type="button" class="btn btn-default" awPreviousStep>Previous</button>
343         <button type="button" class="btn btn-primary" (click)="finishFunction()">Finish</button> = 343         <button type="button" class="btn btn-primary" (click)="finishFunction()">Finish</button>
344       </div>   344       </div>
345     </wizard-step> <> 345     </aw-wizard-step>
346   </wizard>   346   </aw-wizard>
347 </div> = 347 </div>