Edit is not enabled for custom datepicker control in angular - angular-material

Question

I created an angular material custom date picker control, it is working and able select and update the date but when I tried to edit the input box it was not allowed. always it is readonly
Below is the code for reference. Can someone suggest this?
import { Component, EventEmitter, forwardRef, Input, OnInit, Output } from '#angular/core';
import { NG_VALUE_ACCESSOR, ControlValueAccessor} from '#angular/forms';
import { MatDatepickerInputEvent } from '#angular/material/datepicker';
import { formatDate } from '#angular/common';
import { DateAdapter, MAT_DATE_FORMATS, NativeDateAdapter } from '#angular/material/core';
type Value=number;
export const PICK_FORMATS = {
parse: {dateInput: {month: 'short', year: 'numeric', day: 'numeric'}},
display: {
dateInput: 'input',
monthYearLabel: {year: 'numeric', month: 'short'},
dateA11yLabel: {year: 'numeric', month: 'long', day: 'numeric'},
monthYearA11yLabel: {year: 'numeric', month: 'long'}
}
};
class PickDateAdapter extends NativeDateAdapter {
format(date: Date, displayFormat: Object): string {
if (displayFormat === 'input') {
return formatDate(date,'MM/dd/yyyy',this.locale);;
} else {
return date.toDateString();
}
}
}
#Component({
selector: 'app-date',
templateUrl: './date.component.html',
styleUrls: ['./date.component.css'],
providers:[
{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(()=>DateComponent),
multi:true
},
{provide: DateAdapter, useClass: PickDateAdapter},
{provide: MAT_DATE_FORMATS, useValue: PICK_FORMATS}
]
})
export class DateComponent implements OnInit,ControlValueAccessor {
value: Value;
isDisable:boolean;
#Input() placeholder:string;
#Input() min: Date;
#Input() max:Date;
#Output() changed = new EventEmitter<Value>();
constructor() { }
ngOnInit(): void {
}
get inputValue():Date{
return this.value ? new Date(this.value):null;
}
private propagateChange: any = () =>{ };
private propagateTouched: any = () =>{ };
writeValue(value: Value): void {
this.value=value
}
registerOnChange(fn: any): void {
this.propagateChange=fn;
}
registerOnTouched(fn: any): void {
this.propagateTouched=fn;
}
setDisabledState(isDisabled: boolean): void {
this.isDisable=isDisabled;
}
onChanged( event:MatDatepickerInputEvent<Date>):void{
const value=event.value ? event.value.getTime():null;
this.value=value;
this.propagateChange(value);
this.changed.emit(value);
}
OnClosed():void{
this.propagateTouched();
}
}
// Custome Control HTML
<div>
<input type="text"
[matDatepicker]="picker"
(dateChange)="onChanged($event)"
(click)="picker.open()"
[attr.disabled]="isDisable ? true : null"
[value]="inputValue" [min]="min" [max]="max"
placeholder="{{placeholder || 'Choose a date '}}"
>
<mat-datepicker-toggle matSuffix [for]="picker" [disabled]="isDisable"></mat-datepicker-toggle>
<mat-datepicker #picker (closed)="OnClosed()"></mat-datepicker>
</div>
//custom field
<app-date formControlName="Activedate" placeholder="Date" ></app-date>
I created an angular material custom date picker control, it is working and able select and update the date but when I tried to edit the input box it was not allowed. always it is readonly
Below is the code for reference. Can someone suggest this?
Thanks in advance