Stepper: update angular demos to use new syntax (DevExpress#29798)

Author: anna-shakhova

apps/demos/Demos/Stepper/FormIntegration/Angular/app/app.component.html

@@ -2,14 +2,14 @@
   [(selectedIndex)]="selectedIndex"
   (onSelectionChanging)="onSelectionChanging($event)"
 >
-  <dxi-item
+  <dxi-stepper-item
     *ngFor="let step of steps"
     [label]="step.label"
     [icon]="step.icon"
     [isValid]="step.isValid"
     [hint]="step.hint"
     [optional]="step.optional"
-  ></dxi-item>
+  ></dxi-stepper-item>
 </dx-stepper>
 <div class="content">
   <dx-multi-view
@@ -19,43 +19,43 @@
     [swipeEnabled]="false"
     [height]="400"
   >
-    <dxi-item>
+    <dxi-multi-view-item>
       <div *dxTemplate>
         <dates-form
           [formData]="formData"
           [validationGroup]="validationGroups[0]"
         ></dates-form>
       </div>
-    </dxi-item>
-    <dxi-item>
+    </dxi-multi-view-item>
+    <dxi-multi-view-item>
       <div *dxTemplate>
         <guests-form
           [formData]="formData"
           [validationGroup]="validationGroups[1]"
         ></guests-form>
       </div>
-    </dxi-item>
-    <dxi-item>
+    </dxi-multi-view-item>
+    <dxi-multi-view-item>
       <div *dxTemplate>
         <room-meal-plan-form
           [formData]="formData"
           [validationGroup]="validationGroups[2]"
         ></room-meal-plan-form>
       </div>
-    </dxi-item>
-    <dxi-item>
+    </dxi-multi-view-item>
+    <dxi-multi-view-item>
       <div *dxTemplate>
         <additional-form [formData]="formData"></additional-form>
       </div>
-    </dxi-item>
-    <dxi-item>
+    </dxi-multi-view-item>
+    <dxi-multi-view-item>
       <div *dxTemplate>
         <confirmation
           [formData]="formData"
           [isConfirmed]="isConfirmed"
         ></confirmation>
       </div>
-    </dxi-item>
+    </dxi-multi-view-item>
   </dx-multi-view>
   <div class="nav-panel">
     <div class="current-step">

apps/demos/Demos/Stepper/FormIntegration/Angular/app/app.component.ts

@@ -12,7 +12,7 @@ import {
   DxTextAreaModule,
 } from 'devextreme-angular';
 import type { Item, SelectionChangingEvent } from 'devextreme/ui/stepper';
-import validationEngine from "devextreme/ui/validation_engine";
+import validationEngine from 'devextreme/ui/validation_engine';
 import { AppService } from './app.service';
 import { BookingFormData } from './app.types';
 import { DatesFormComponent } from "./dates-form/dates-form.component";

apps/demos/Demos/Stepper/FormIntegration/Angular/app/app.service.ts

@@ -1,7 +1,6 @@
 import { Injectable } from '@angular/core';
 import { Item } from 'devextreme/ui/stepper';
-import {BookingFormData} from "./app.types";
-import {initialFormData, initialSteps} from "../../Vue/data";
+import { BookingFormData } from "./app.types";
 
 @Injectable({
   providedIn: 'root',

apps/demos/Demos/Stepper/Overview/Angular/app/app.component.html

@@ -12,12 +12,12 @@
           [selectOnFocus]="selectOnFocus"
           [rtlEnabled]="rtlMode"
         >
-          <dxi-item
+          <dxi-stepper-item
             *ngFor="let step of steps"
             [label]="step.label"
             [icon]="step.icon"
             [optional]="step.optional"
-          ></dxi-item>
+          ></dxi-stepper-item>
         </dx-stepper>
       </div>
 
@@ -32,11 +32,11 @@
           [selectOnFocus]="selectOnFocus"
           [rtlEnabled]="rtlMode"
         >
-          <dxi-item
+          <dxi-stepper-item
             *ngFor="let step of steps"
             [label]="step.label"
             [optional]="step.optional"
-          ></dxi-item>
+          ></dxi-stepper-item>
         </dx-stepper>
       </div>
 
@@ -51,7 +51,10 @@
           [selectOnFocus]="selectOnFocus"
           [rtlEnabled]="rtlMode"
         >
-          <dxi-item *ngFor="let step of steps" [text]="step.text"></dxi-item>
+          <dxi-stepper-item
+            *ngFor="let step of steps"
+            [text]="step.text"
+          ></dxi-stepper-item>
         </dx-stepper>
       </div>
     </div>