IgxInput – 非活性の状態でもマウスドラッグによってテキストを選択したい

IgxInput は disabled プロパティを true に設定することにより非活性化できます。
しかしながら、この場合は css の pointer-events: none 設定が加わるため、要素へのあらゆるマウス操作が無効となり、テキストのマウスドラッグによる選択も不可となります。
IgxInput を非活性化しながらテキスト選択を可能にするには、disabled プロパティの代わりに readonly プロパティを使用して入力操作を無効としつつ、css 設定によって外観を調整する方法があります。

以下のように、非活性の外観を設定する css クラス disabled-look を作成します。

.disabled-look {
  input {
    color: rgba(0, 0, 0, 0.38) !important;
  }

  &.igx-input-group--focused {
    .igx-input-group__bundle-start {
      border-inline-start-width: 1px !important;
      border-block-width: 1px !important;
      border-inline-start-color: rgba(0, 0, 0, 0.38) !important;
      border-block-color: rgba(0, 0, 0, 0.38) !important;
    }

    .igx-input-group__bundle-end {
      border-inline-end-width: 1px !important;
      border-block-width: 1px !important;
      border-inline-end-color: rgba(0, 0, 0, 0.38) !important;
      border-block-color: rgba(0, 0, 0, 0.38) !important;
    }

    .igx-input-group__notch,
    .igx-input-group__filler {
      border-block-width: 1px !important;
      border-block-color: rgba(0, 0, 0, 0.38) !important;
    }
  }
}

IgxInput の活性・非活性状態を保持する変数 isDisabled を用意します。

public isDisabled = true;

isDisabled を igx-input-group の class.disabled-look と input 要素の readonly にバインドします。

<igx-input-group type="border" [class.disabled-look]="isDisabled">
  <input
    igxInput
    name="fullName"
    type="text"
    [readonly]="isDisabled"
    [(ngModel)]="value"
  />
</igx-input-group>