otp-component-wu/otp/otp.component.html

How to build libraries with Angular (2, 4, 5...)

<section class="section-step">
  <form [formGroup]="formOtp">
    <div *ngIf="codeGenerated" class="container-text">{{messageInformate}}</div>
    <div *ngIf="codeExpirated" class="container-text">{{labelOtpExpirated}}</div>
    <div class="container-elements">
      <div class="container-camps">
        <div class="input-select-transition">
          <input type="text" required [attr.disabled]="!codeGenerated ? '' : null"
            [ngClass]="{'ng-touched': validateForm}" id="code" formControlName="code">
          <label for="code">Escribe tu código*</label>
          <p>Ingresa el código</p>
          <div class="msgCorrect sendCode" *ngIf="codeGenerated" [ngClass]="{'sendCode': sendCode}">Hemos enviado el
            código,
            verifica por
            favor.
          </div>
        </div>
        <div class="description-otp">
          <p *ngIf="!codeExpirated">Si aún no ha llegado tu código, solicitalo <a ng-href="" (click)="setCode()">aquí</a>.</p>
          <p *ngIf="codeExpirated">Haz click <a ng-href="" (click)="setCode()">aquí</a> para solicitar tu nuevo código.</p>
        </div>
      </div>
      <div class="container-buttons">
        <button (click)="goBackButton()" class="generic-button white-button">{{labelButtonCancelCode}}</button>
        <button (click)="onSubmit()" [disabled]="!sendCode" type="submit"
          class="generic-button blue-button">{{labelButtonSendCode}}</button>
      </div>
    </div>
  </form>
</section>

<div class="modal modalError fade" id="modalSimula" tabindex="-1" role="dialog" aria-labelledby="modelTitle"
  aria-hidden="true" data-keyboard="false" data-backdrop="static">
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content">
      <div class="modal-header"></div>
      <div class="modal-body">
        <div class="cont-title">
          <div class="icon-redondo"></div>
          <h3 class="title-body" [innerHtml]="title">
          </h3>
          <p class="message-body" [innerHtml]="message"></p>
          <p [innerHTML]="description"></p>
        </div>
      </div>
      <div class="modal-footer">
        <div class="content-btn">
          <button type="button" class="generic-button white-button" (click)="reload()">Acepta</button>
        </div>
      </div>
    </div>
  </div>
</div>