I am using Angular material for my website and I have a search box that has a dropdown list of results. When i scroll I have the issue of the absolute popup of results staying on the same position of the screen as where it was loaded, blocking other content. Does anyone know how i can hide this popup when the page is scrolled and then redisplay it when I scroll back to the original position?

HTML code

Thank you!

CodePudding user response：

One way is to use Angular's HostListener decorator to listen for the window:scroll event and toggle a boolean variable that controls the visibility of the dropdown list. This variable can be used in your template to conditionally show or hide the dropdown list.

import { Component, HostListener } from '@angular/core';

@Component({...})
export class MyComponent {
  dropdownVisible = true;

  @HostListener('window:scroll')
  onWindowScroll() {
    this.dropdownVisible = false;
  }
}

.

<mat-form-field>
 <input matInput [formControl]="searchControl">
  <mat-select *ngIf="dropdownVisible" [formControl]="searchControl">
    <mat-option *ngFor="let item of items" [value]="item">
      {{ item }}
    </mat-option>
  </mat-select>
</mat-form-field>