javascript – Angular: Cannot read property ‘nativeElement’ of undefined

Tengo este error y no se bien porque. “Cannot read property ‘nativeElement’ of undefined “
Estuve buscando soluciones. Puse las variables en el afterViewInit, en los viewChild puse el static:true, en false,etc.

Componente:

export class DetailsComponent implements OnInit,AfterViewInit {
  // filtros
  @ViewChild('floatMenu',{static:true}) floatMenuRef: ElementRef;
  @ViewChild('buttonFilter',{static:true}) buttonFilterRef: ElementRef;

  floatMenu;
  buttonFilter;
  
  @HostListener('document:click', ('$event'))
   clickout(event) {
    let calendar = document.querySelector('mat-datepicker-content')
    let overlay = document.querySelector('.cdk-overlay-backdrop')

    if(this.floatMenu.classList.contains('show-menu') &&
      !this.floatMenu.contains(event.target)    &&
      !this.buttonFilter.contains(event.target) &&
      (calendar ? !calendar.contains(event.target) : true )   && (overlay ?                     !overlay.contains(event.target) : true )){
      // QUE HACE
      calendar && calendar.parentElement.removeChild(calendar)
      this.floatMenu.classList.remove('show-menu')
    }
  }
  
    ngAfterViewInit(){
    this.floatMenu = this.floatMenuRef.nativeElement
    this.buttonFilter = this.buttonFilterRef.nativeElement
  }

HTML:

 
      <div class="filter-container" #buttonFilter (click)="floatToggle()">
        <span class="mat-icon filter-icon"> filter_alt </span>
        <p class="filter-text">Filtros</p>
      </div>
      
      <section class="menu-float-filter" #floatMenu>
        <mat-accordion>
          <mat-expansion-panel class="expansion-panel" >
            <mat-expansion-panel-header class="mat-expansion-panel-header">
              <mat-panel-title class="mat-expansion-panel-header-title"> Rango de Fecha </mat-panel-title>
            </mat-expansion-panel-header>
            <form class="form-date float-item" #formActions="ngForm">
              <mat-form-field
                class="
                input-date
                "
                appearance="fill"
              >
                <mat-label>Desde</mat-label>
                <input
                matInput
                (max)="maxDate"
                (matDatepicker)="pickerDesde"
                ((ngModel))="actionHelados.pickerDesde"
                (ngModelChange)="pickerDesdeChange(2)"
                  name="pickerDesde"
                  required
                />
                <mat-datepicker-toggle
                  matSuffix
                  (for)="pickerDesde"
                ></mat-datepicker-toggle>
                <mat-datepicker #pickerDesde></mat-datepicker>
              </mat-form-field>

              <mat-form-field
                class="input-date"
                appearance="fill"
              >
                <mat-label>Hasta</mat-label>
                <input
                  matInput
                  (min)="minDateHasta"
                  (max)="maxDateHasta"
                  (matDatepicker)="pickerHasta"
                  ((ngModel))="actionHelados.pickerHasta"
                  name="pickerHasta"
                  required
                />
                <mat-datepicker-toggle
                  matSuffix
                  (for)="pickerHasta"
                ></mat-datepicker-toggle>
                <mat-datepicker #pickerHasta></mat-datepicker>
              </mat-form-field>
            </form>
          </mat-expansion-panel>      
        </mat-accordion>
        <button (click)="filter(2)" class="button-filter">Filtrar</button>
      </section>

Como ven, los elementos que uso son

 <div class="filter-container" #buttonFilter (click)="floatToggle()"></div>
      
  <section class="menu-float-filter" #floatMenu>

En este momento los seteo en el afverViewInit, pero tambien probe en ngOnInit y nada!
Probe ponienedo if para validar si existian las propiedades y demas pero tampoco funciona. Es algo importante que tengo que resolver y no encuentro la solucion

  • Tambien me gustaria preguntar, sobre el hostlistener, hay que destruirlo en el ngOnDestroy? si es asi, como?