How to use the @angular/core.HostListener function in @angular/core

selector: '[sf-click]'
})
export class SfClickDirective {

  @Input('not') excludeText: string;
  @Input('group') groupText: string;

  @Output('sf-click') _validateEvent: EventEmitter = new EventEmitter();


  private validationResult = _DEFAULT_RESULT;

  constructor(private _el: ElementRef, private _injector: Injector, private _ngForm: NgForm) { }


  @HostListener('click', ['$event'])
  private onClick(event) {
    // this._ngForm.form.markAsPristine({});
    // console.log(this._ngForm);
    // console.log(this.excludeText);
    // console.log(this.groupText);

    event['validate'] = () => { return this.validate() };
    event['reset'] = () => { return this.reset() };
    this._validateEvent.emit(event);
  }

  public validate() {
    this.validationResult["validationSummaryMsgs"].length = 0;
    this.validationResult.isValid = true;
    let maps;
    if(this.groupText !== undefined) {

/* tslint:disable-next-line:directive-selector */
  selector: 'a[href]'
})
export class LinkDirective implements OnChanges {

  // We need both these decorators to ensure that we can access
  // the href programmatically, and that it appears as a real
  // attribute on the element.
  @Input()
  @HostBinding()
  href: string;

  @HostBinding()
  target: string;

  @HostListener('click', ['$event'])
  onClick($event) {
    if (this.isAbsolute(this.href)) {
      return true;
    } else {
      this.location.go(this.href);
      return false;
    }
  }

  private isAbsolute(url) {
    return /^[a-z]+:\/\/|\/\//i.test(url);
  }

  constructor(private location: LocationService) { }

  ngOnChanges() {

}

    this._itemsDiffer = this._iterableDiffers.find(this.items).create();
  }

  initFocus() { }

  enableIonItem(isEnabled: boolean) {
    if (!this.ionItem) {
      return;
    }

    this.ionItem.setElementClass('item-input-disabled', !isEnabled);
  }

  @HostListener('click', ['$event'])
  _click(event: UIEvent) {
    if (!this.isEnabled || event.detail === 0) {
      // Don't continue if the click event came from a form submit.
      return;
    }

    this._label = this._getLabelText();
    event.preventDefault();
    event.stopPropagation();
    this.open().then(() => {
      this.onOpen.emit({
        component: this
      });
    });
  }

*/
  @Output() ionCancel: EventEmitter<select> = new EventEmitter();

  constructor(
    private _app: App,
    form: Form,
    public config: Config,
    elementRef: ElementRef,
    renderer: Renderer,
    @Optional() item: Item,
    public deepLinker: DeepLinker
  ) {
    super(config, elementRef, renderer, 'select', [], form, item, null);
  }

  @HostListener('click', ['$event'])
  _click(ev: UIEvent) {
    if (ev.detail === 0) {
      // do not continue if the click event came from a form submit
      return;
    }
    ev.preventDefault();
    ev.stopPropagation();
    this.open(ev);
  }

  @HostListener('keyup.space')
  _keyup() {
    this.open();
  }

  /**</select>

constructor(private viewStateService: ViewStateService) {
    }

    ngOnInit() {
        this.viewState = this.viewStateService.initState;
        this.sub = this.viewStateService.state$.subscribe((value: ViewState) => {
            this.viewState = value;
        });
    }

    ngOnDestroy() {
        this.sub.unsubscribe();
    }

    @HostListener('@viewStateFooter.done')
    done() {
        if (this.viewState === ViewState.Destroy) {
            this.viewStateService.destroy();
        }
    }
}

this.selectedChange.emit(this);
        }
    }

    /** Focuses the element. */
    focus(): void {
        (this.elRef.nativeElement as HTMLElement).focus();
    }

    /** Returns HTMLElement representation of the component. */
    getHtmlElement(): HTMLElement {
        return this.elRef.nativeElement as HTMLElement;
    }

    /** @hidden */
    @HostListener('keydown.enter')
    @HostListener('click')
    selectionHandler(): void {
        if (!this.selected && !this.disabled) {
            this.selected = true;
            this.selectedChange.emit(this);
        }
    }

}

*
     * @param {*} event
     * @memberof MainComponentLegacyComponent
     */
    @HostListener('window:resize', ['$event'])
    onResize(event: any) {
        this.isTablet = event.target.innerWidth < 1025;
    }

    /**
     * Respond to document events and collapse the sidenav if is clicked outside
     *
     * @param {*} _event
     * @memberof MainComponentLegacyComponent
     */
    @HostListener('click', ['$event'])
    onClickOutside(_event: any) {
        if (this.isTablet && !this.isMenuCollapsed) {
            this.isMenuCollapsed = true;
        }
    }

    ngOnInit(): void {
        document.body.style.backgroundColor = '';
        document.body.style.backgroundImage = '';
        this.router.events.pipe(filter((event) => event instanceof NavigationEnd)).subscribe((_event) => this.setMenuState());
        this.setMenuState();
    }

    /**
     * Reload content search iframe when contentlet editor close
     *

this.seekStart();
                }
            }
        }
    }

    @HostListener('document:mousemove', [ '$event' ])
    onMouseMoveScrubBar($event: any) {
        if (this.target) {
            if (!this.target.isLive && this.vgSlider && this.isSeeking) {
                this.seekMove($event.offsetX);
            }
        }
    }

    @HostListener('document:mouseup', [ '$event' ])
    onMouseUpScrubBar($event: any) {
        if (this.target) {
            if (!this.target.isLive && this.vgSlider && this.isSeeking) {
                this.seekEnd($event.offsetX);
            }
        }
    }

    @HostListener('touchstart', [ '$event' ])
    onTouchStartScrubBar($event: any) {
        if (this.target) {
            if (!this.target.isLive) {
                if (!this.vgSlider) {
                    this.seekEnd(this.getTouchOffset($event));
                }
                else {

this.validateValue(this.hostElement.nativeElement.value);
  }

  /**
   * Event handler for host's change event
   */
  @HostListener('input')
  onInput() {
    this.validateValue(this.hostElement.nativeElement.value);
  }

  /**
   * Event handler for host's paste event
   * @param e
   */
  @HostListener('paste', ['$event'])
  onPaste(e: ClipboardEvent) {
    const value = e.clipboardData.getData('text/plain');
    this.validateValue(value);
    e.preventDefault();
  }

  /**
   * Event handler for host's keyup event
   * @param e
   */
  @HostListener('keyup', ['$event'])
  onKeyUp(e: KeyboardEvent): void {
    const value = e.target['value'];
    this.validateValue(value);
  }

onActivate() {
        if (this.contentElRef) {
            this.contentElRef.nativeElement.scrollTop = 0;
        }
        this.skipNavClicked();
        if (this.sectionsToolbar) {
            this.sectionsToolbar.onActivate();
        }
    }

    windowSize() {
        this.smallScreen = window.innerWidth < 992;
    }

    @HostListener('window:resize', ['$event'])
    onResize() {
        this.windowSize();
    }
}