I have drop down made with Mat select angular component, I need to trigger an event when I clicked outside of the drop down (body of the page).

<mat-select #select multiple (change)=onSubmit($event) [(ngModel)]=emp>

    <mat-option *ngFor=let value of filter.default [value]=value>

        {{value}}

    </mat-option>

</mat-select>

Here is my ts file

export class AnotherComponent {

  public text: String;



  @HostListener('document:click', ['$event'])

  clickout(event) {

    if(this.eRef.nativeElement.contains(event.target)) {

      console.log(clicked inside);

    } else {

      console.log(clicked outside);

    }

  }



  constructor(private eRef: ElementRef) {



  }

}

Its not working properly, please help