number-picker.component.html

<div class="d-flex flex-column align-items-center justify-content-around mr-3">
    <button
      class="btn btn-link"
      type="button"
      tabindex="-1"
      [disabled]="disabled"
      (click)="toggleUp()">
      <span class="chevron"></span>
      <span class="sr-only">Increment</span>
    </button>
    <input
      type="text"
      class="form-control d-inline-block text-center"
      maxlength="{{size}}"
      size="{{size}}"
      placeholder="{{placeholder}}"
      [name]="name"
      [(ngModel)]="value"
      (change)="update($event); $event.stopPropagation();"
      (focus)="onFocus($event); $event.stopPropagation();"
      [readonly]="disabled"
      [disabled]="disabled"
      [ngClass]="{'is-invalid': invalid}"
      aria-label="name"
    >
    <button
      class="btn btn-link"
      type="button"
      tabindex="-1"
      [disabled]="disabled"
      (click)="toggleDown()">
      <span class="chevron bottom"></span>
      <span class="sr-only">Decrement</span>
    </button>
</div>