ally69
@ally69
недофронтенд

@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]="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 и т.д. Буду благодарна даже просто за подкинутую ссылку с информацией, которая навела бы на решение.
  • Вопрос задан
  • 175 просмотров
Пригласить эксперта
Ответы на вопрос 1
navix
@navix
Angular & TypeScript
Если нет каких-то дополнительных условий и нужно только лишь показывать блок в зависимости от чекбокса, то создавать директиву нет необходимости, а хватит встроенных 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.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы