Как добавить класс во вложенный элемент при нажатии угловых 7

Question

Когда я нажимаю на кнопку, она содержит show класс и после другого нажатия show удаляет, что я сделал, но теперь мой вопрос заключается в том, когда я нажимаю на кнопку <div class="dropdown-menu"> содержит show класс и снова нажимаю удалить show class

Я не хочу добавлять bootstrap.js, jquery.js and pooper.js в свой угловой проект, я не хочу другую директиву для клика или изменения класса.

app.component.ts

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<div class="btn-group">
  <button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown" 
  appDropdown>Action</button>
  <div class="dropdown-menu">
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
  </div>
</div>

dropdown.directive.ts

import {Directive, HostBinding, HostListener} from '@angular/core';

@Directive({
    selector: '[appDropdown]'
})
export class DropdownDirective {
    @HostBinding('class.show') toggle = false;

    @HostListener('click') dropdownToggle() {
        this.toggle = !this.toggle;
        console.log('clicked');
    }
}

Answer 1

Использование свойства exportAs в декораторе Directive

directive.ts

@Directive({
  selector: '[appDropdown]',
  exportAs:'appDropdown'
})

Затем создайте переменную шаблона и назначьте экземпляр appDropdown этой переменной и добавьте классиспользование ngClass

component.html

<div class="btn-group">
  <button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown" 
  appDropdown #ref="appDropdown">Action</button>
  <div class="dropdown-menu" [ngClass]="{'show':ref.toggle}"  >
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
  </div>
</div>

Пример: https://stackblitz.com/edit/angular-ksaqam

Answer 2

Я предлагаю пропустить директиву и использовать ngClass:

HTML

<button type="button" [class.show]="show" class="btn btn-info dropdown-toggle"
                  data-toggle="dropdown" (click)="show=!show">Action</button>