Mat-datepicker (dateChange), (dateInput), (change), (input) are not working if using

Question

Scenerios is I need a datepicker that allows to choose a date and then apply & close. Also at the same time I need one button inside datepicker that will perform another functionality in same datepicker and close. I'm able to have a button using but now its not allowing me to close datepicker on choosing a date. I need both and it should close in both.

My code - HTML -

 <ng-container matColumnDef="endsOn">
                <mat-header-cell class="m-1" style="max-width: 15%;" *matHeaderCellDef>
                    Ends On
                </mat-header-cell>
                <mat-cell class="m-1" *matCellDef="let element; let i=index">
                    <mat-form-field appearance="outline">
                        <input #dateInput placeholder="Select Date" matInput [matDatepicker]="picker" [value]="" [formControl]="element.get('END_TIME')" [min]="element.get('START_TIME').value" [max]="moment(element.get('START_TIME').value).add(10,'years').toDate()" (dateInput)="endDateChanged(i , $event)">
                        <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
                        <mat-datepicker #picker>
                            <mat-datepicker-actions>
                                <div class="datepicker-footer" #datepickerFooter>
                                    <div class="slider-date__button mt-3">
                                        <a mat-button="" style="background-color: #0062cc !important;" class="mat-focus-indicator btn btn-primary d-block w-100 text-white mat-flat-button mat-button-base" tabindex="0" aria-disabled="false" (click)="isPermanentClicked(moment(element.get('START_TIME').value).add(10,'years').toDate(), i , dateInput , picker)"><span class="mat-button-wrapper">Make Permanent</span><span matripple="" class="mat-ripple mat-button-ripple"></span><span class="mat-button-focus-overlay"></span></a>
                                    </div>
                                </div>
                            </mat-datepicker-actions>
                        </mat-datepicker>
                    </mat-form-field>
                </mat-cell>
            </ng-container>

TS-

 @ViewChild('datepickerFooter', {static: false}) datepickerFooter: ElementRef;
   @ViewChild('picker', {static: false}) datepickers: MatDatepicker<any>;
   @ViewChild('dateInput', {static: false}) dateInputs: ElementRef;

 endDateChanged(i, event: MatDatepickerInputEvent<Date>){
    this.datepickers.close(); 
  }// This method is never calling on datechange

  isPermanentClicked(permanent , index , dateInput: any, datePicker: any){
    console.log(this.dataSource[index].controls['PERMANENT'].value);
    console.log("Permanent clicked");
    this.permanentText = "Permanent";
    console.log(index);
    this.dataSource[index].controls['PERMANENT'].value = true;
    this.dataSource[index].controls['END_TIME'].setValue(permanent);
    dateInput.value = "Permanent";
    datePicker.close();
  
    console.log(this.dataSource[index].controls['END_TIME'].value);
    
  }