@HostListener и CheckBox. Создание своей директивы. Есть идеи?

Question

[Алёна Хреновская]

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

<div class="mat mat-app-background basic-container">
  <app-check-box-pass></app-check-box-pass>
</div>
<div>
  <p appNgxHide [ngxHide]="ngxHide">Test element</p>
  <mat-checkbox [(ngModel)]="ngxHide">
    <span *ngIf="!ngxHide">Скрыть текст</span>
    <span *ngIf="ngxHide">Показать текст</span>
  </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,
  ElementRef,
  // HostListener,
  Input
} from '@angular/core';

@Directive({
  selector: '[appNgxHide]'
})
export class NgxHideDirective {
  @Input() ngxHide: boolean;
  constructor(private el: ElementRef)  {
    if (this.ngxHide = true) {
      el.nativeElement.style.display = 'none';
    } else {
      el.nativeElement.style.display = '';
    }
  }

  // @HostListener('mouseenter') onMouseEnter() {
  //   this.hideTest(this.ngxHide);
  // }
  // @HostListener('mouseleave') onMouseLeave() {
  //   this.hideTest(false);
  // }
  // private hideTest(test: boolean) {
  //   if (test === true) {
  //     this.el.nativeElement.style.display = 'none';
  //   } else {
  //     this.el.nativeElement.style.display = '';
  //   }
  // }
}

Закомментировано - это проверка, верно ли директива получает данные - и она работает.
А суть директивы в том, что она должна скрывать элемент при выборе чекбокса.
Возможно я слишком заморочилась и решение куда проще, чем я нарисовала в своей голове, потому что еще два месяца назад я не была знакома с JS/TS/Angular и т.д. Буду благодарна даже просто за подкинутую ссылку с информацией, которая навела бы на решение.

Answer 1

[Sasha Novik]

Если нет каких-то дополнительных условий и нужно только лишь показывать блок в зависимости от чекбокса, то создавать директиву нет необходимости, а хватит встроенных ngModelи ngIf.

<p *ngIf="ngxHide">Test element</p>
  <mat-checkbox [(ngModel)]="ngxHide">
    <span *ngIf="!ngxHide">Скрыть текст</span>
    <span *ngIf="ngxHide">Показать текст</span>
  </mat-checkbox>

Если нужно поменять стиль `display`, тогда биндинг будет таким:

<p [style.display]="ngxHide ? 'none' : 'block'">Test element</p>

Но ngIf использовать предпочтительно, т.к она убирает ненужные блоки из DOM и view-дерева, а не просто их скрывает через css.

Comments

[Алёна Хреновская]

Эх) в том то и дело, что нужно создание собственной директивы, которая бы скрывала элемент (в данном случае ) по выбору галочки на чекбоксе)

[Sasha Novik]

Вопрос тогда в том, зачем?

Можно самостоятельно реализовать функционал ngIf (только скрывать эл-т если передан true), получиться вот так: *ngxHide="ngxHide"

Собственно код ngIf можно изучить тут: https://github.com/angular/angular/blob/master/pac...

[Алёна Хреновская]

Sasha Novik, спасибо)