angularangular-material

How can I pass data from a Calendar Header Component in Angular Material


I would like to send the data from the DatePickerHeaderComponent back the parent component in Angular material but I still haven't find a to access it data I can't use emit because the component was passed as a property.

parent.component.html

<next-gen-form-field appearance="blue" (click)="datePicker.open()" [ngClass]="{ 'focus-manually': datePicker.opened }">
      <next-gen-input-label>{{ label }}</next-gen-input-label>
      <input nextGenInput [matDatepicker]="datePicker" #dateInput (dateChange)="onDateChange($event)" />
      <next-gen-icon [iconUrl]="'calendar' | iconNameIconPath" size="lg" nextGenSuffix />
     
      <mat-datepicker #datePicker [dateClass]="dateClass" [calendarHeaderComponent]="datePickerHeader">
        
        @if (this.clearReturn && this.dashboardType == 'classic') {
          <mat-datepicker-actions>
            <button class="clear-button" nextGenButton shape="borderless" (click)="deleteReturn(datePicker)" size="lg" variant="danger" >
              <next-gen-icon size="lg" [iconUrl]="'nxt_delete' | iconNameIconPath"></next-gen-icon>
              Delete return
            </button>
          </mat-datepicker-actions>
        }
      </mat-datepicker>
    </next-gen-form-field>


    export class DatePickerHeaderComponent extends MatCalendarHeader<Date> {
      
      @Output() toggleButtonEmitter = new EventEmitter();
      protected buttons = [
        {
          name: 'Departed at',
          value: 'true'
        },
        {
          name: 'Arrive by',
          value: 'false'
        }
      ];
     
    
      selectionChange(event:string[]) {
        this.toggleButtonEmitter.emit(event)
      }
  
}

enter image description here


Solution

  • Methods in the parent class can be called using the $parent object in this context.

    It's advisable to declare a method in your DatePickerHeaderComponent that calls the $parent object when the value of the datepicker component changes.

    When you define this.$parent.setDate(dateobj)in your inherited class, the setDate method defined in your parent class is accessible, where you can declare extra functionality based on passed data.

    In more complex setups when you are in need of calling services from multiple controllers, it's more advisable to work with event subscribers as explained in this example: https://stackoverflow.com/a/34402906/21134334