SFM-Broker/src/app/loan-edit/loan-edit.component.html

<div class="container outer">
  <div class="container">
    <bkp-divider-shadow-bottom></bkp-divider-shadow-bottom>

    <div style="margin-top:20px;"></div>

    <div class="row">
      <div class="col-sm-12" class="stepper">
        <kendo-stepper
          #stepper
          [steps]="steps"
          [stepType]="'label'"
          [(currentStep)]="currentStep"
          [style.width.px]="570">
        </kendo-stepper>
      </div>
    </div>
    <span class="k-form-separator"></span>
    <app-loan-basic-info *ngIf="currentStep === 0"
                         #basicInfo
                         [Loan]="Loan"
                         (NotifyNext) ="next(0, $event)"
                         (errorOccurred)="showError($event)"
    ></app-loan-basic-info>
    <app-loan-edit-people *ngIf="currentStep===1"
                          #people
                          [Loan]="Loan"
                          (NotifyPrev) ="prev(1, $event)"
                          (NotifyNext)="next(1, $event)"
                          (errorOccurred)="showError($event)"
    >
    </app-loan-edit-people>
    <app-loan-people-reward *ngIf="currentStep === 2"
                            [Loan]="Loan"
                            (NotifyNext) ="next(2, $event)"
                            (NotifyPrev) ="prev(2, $event)"
                            (errorOccurred)="showError($event)"
    > </app-loan-people-reward>
    <app-loan-trail-income *ngIf="currentStep === 3"
                           [Loan]="Loan"
                           [LenderName]="LenderName"
                           (NotifyPrev) ="prev(3, $event)"
                           (errorOccurred)="showError($event)"
    > </app-loan-trail-income>

    <div class="row" *ngIf="Loan.Id !==''">
      <div class="col-sm-12 delete-button">
        Delete this Loan <kendo-switch [(ngModel)]="showDelete">Allow Delete</kendo-switch>
      </div>
      <div class="col-sm-12 delete-button" *ngIf="showDelete">
        <div class="k-form-buttons k-buttons-end delete-button">
            <button kendoButton icon="delete" class="k-button k-primary" (click)="del()" >Delete </button>
        </div>
      </div>

    </div>
    <div class="row">
      <div class="col-sm-12">
        <div class="vertical-spacer"></div>
        <div class="vertical-spacer"></div>
        <hr>
        Proudly presented by SuperCredit.com
      </div>
    </div>
  </div>
</div>


<kendo-dialog title="Message" *ngIf="dialogOpened" [minWidth]="250" [width]="450" (close)="action('close')">
  <p style="margin: 30px; text-align: center;">{{errorMessage}}</p>
  <kendo-dialog-actions>
    <button kendoButton (click)="action('ok')" primary="true">Ok, I got it.</button>
  </kendo-dialog-actions>
</kendo-dialog>