@c8y/apps/tutorial/stepper/device-stepper.component.html

Cumulocity IoT applications

<div class="p-b-16">
  <div *ngIf="isModal" class="modal-header modal-header-primary text-center">
    <i [c8yIcon]="'diamond'" style="font-size: 32px"></i>
    <h3 class="p-t-16">{{ 'Create a new device ' }}</h3>
  </div>
  <c8y-stepper
    (onStepChange)="navigate($event)"
    [disableDefaultIcons]="{ edit: true, done: false }"
    [customClasses]="['m-l-40', 'm-r-40', 'm-t-32']"
    linear
  >
    <!-- override icons -->
    <ng-template c8yStepperIcon="final">
      <span [c8yIcon]="'hand-peace-o'"></span>
    </ng-template>
    <cdk-step [stepControl]="formGroupStepOne" label="Device name">
      <div class="m-l-40 m-r-40 m-t-32">
        <h4 title="Device name" class="p-b-8">Enter the device name</h4>
        <c8y-form-group>
          <div [formGroup]="formGroupStepOne">
            <input
              class="form-control"
              type="text"
              formControlName="name"
              placeholder="MyDevice"
              #nameRef
              required
            />
            <c8y-messages>
              <c8y-message [name]="'required'" [text]="'Enter the name of the Device'"></c8y-message>
            </c8y-messages>
          </div>
        </c8y-form-group>
      </div>
      <c8y-stepper-buttons></c8y-stepper-buttons>
    </cdk-step>
    <cdk-step [stepControl]="formGroupStepTwo" label="Device type">
      <div class="m-l-40 m-r-40 m-t-32">
        <h4 title="Enter device type" class="p-b-8">Enter the device type</h4>
        <c8y-form-group>
          <div [formGroup]="formGroupStepTwo">
            <input
              class="form-control"
              type="any"
              formControlName="type"
              placeholder="e.g. phone"
            />
          </div>
        </c8y-form-group>
      </div>
      <c8y-stepper-buttons
        title="Save device"
        (onNext)="save()"
        [labels]="{ next: 'Save' }"
        [pending]="pendingStatus"
      ></c8y-stepper-buttons>
    </cdk-step>
    <!-- Final step -->
    <cdk-step state="final" label="Job done!">
      <div class="m-l-40 m-r-40 m-t-32">
        <h4 class="p-b-32 text-center">Your device is now ready to save the world!</h4>
      </div>
      <c8y-stepper-buttons
        (onBack)="close(isModal)"
        [labels]="{ back: 'Got it!' }"
      ></c8y-stepper-buttons>
    </cdk-step>
  </c8y-stepper>
</div>