Angular ng-pick-datetime - Disable the input based on a condition

I'm working on Angular 8 and I'm using ng-pick-datetime plugin. I wish to disable the date time picker as well as the input element that triggers it based on a condition dynamically. I tried to search but couldn't find any solution. Following is my code:-

<input type="text" 
 style="cursor: pointer; border: none; height: 25px; text-align: center; font-size: small; box- 
 shadow: 0 0 0 0 white !important;"
 placeholder="DD MMM YYYY" class="datepicker" 
 id="date" [disabled]="!editable" #date 
 [owlDateTimeTrigger]="date" [owlDateTime]="date" 
 [min]="min" [max]="max"> 

<img alt="" 
  src="./assets/images/datepicker.svg" 
  style="position: relative; top: 6px; margin-right: 5px;" height="20px" width="20px;">


<owl-date-time [disabled]="!editable" [pickerType]="'calendar'" 
  #date></owl-date-time>

When tried above, a class termed owl-dt-trigger-disabled gets attached to my input element. It seems like the input element is disabled, but we can still edit the input element manually.

Here, when my 'editable' variable is false, I want to disable the datepicker input. If anyone have an answer, please help me.

I found a question but didn't find any answer- Can't dynamically disabled ng-pick-datetime component

Update

Please find the stackblitz link for the same question asked above. I have already set editable as false - Angular ng-pick-datetime - Disable the input based on a condition

I have found the answer. You just need to add an attribute [readonly]="true" to your input. That will make it select only the date and so you cannot edit it.

<input [readonly]="true" type="text"
 placeholder="DD MMM YYYY"
 id="date" [disabled]="!editable"
 [owlDateTimeTrigger]="date" [owlDateTime]="date"
 [min]="min" [max]="max">

I have edited my stackblitz. Please check the answer.