@HostListener и CheckBox

Я могу как-то прослушать клик по чекбоксу для использования директивы на другом элементе? app.component.html:

<div class="mat mat-app-background basic-container">
  <app-check-box-pass></app-check-box-pass>
</div>
<div>
  <p [appNgxHide]="ngxHide">Test element</p>
  <mat-checkbox [(ngModel)]="ngxHide">test</mat-checkbox>
</div>

app.component.ts:

import {Component} from '@angular/core';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  ngxHide = false;
}

ngx-hide.directive.ts:

     import {Directive,
  HostBinding,
  HostListener,
  Input,
  OnInit} from '@angular/core';
@Directive({
  selector: '[appNgxHide]'
})
export class NgxHideDirective implements OnInit {
  @Input('appNgxHide') ngxHide: boolean;
  @HostBinding('style.display') display: string;
  constructor() {
  }
  ngOnInit() {
    this.display = '';
  }
  @HostListener('прослушка клика по чекбоксу') onClick() {
    if (this.ngxHide === true) {
      this.display = 'none';
    } else {
      this.display = '';
    }
  }
}

Если менять значение ngxHide вручную в коде с false на true и обратно, то сама логика в HostListener (с прослушкой клика по самому элементу <p></p>) срабатывает и текст пропадает (либо нет).