Angular 2 - Handle click on disabled input

Question

This is what I have right now. Trying to call the checkToEnable function.

<input type="text" ([ngModel])="city.arr.date" [id]="city.id+'_arr_date'" [name]="city.id+'_arr_date'" [attr.disabled]="selectedTripType=='OT' ? true : null" class="input-icon-date input-default-last  form-control" (click)="checkToEnable()" placeholder="Return Date"/>

Answer 1

Disabled elements don't fire mouse events. Most browsers will propagate an event originating from the disabled element up the DOM tree, so event handlers could be placed on container elements.

---

But you can achieve it by this way :

Component Side:

disableTextbox =  false;

toggleDisable() {
    this.disableTextbox = !this.disableTextbox;
}

Template side :

<div (click)='toggleDisable()'>
  <input [disabled]='disableTextbox' >
</div>

---

WORKING DEMO