Title: How to affect the directive children using @HostBinding?
Tags: angular;bootstrap-4;angular-directive
Question: I'm implementing a bootsrap's single button dropdown (docs).
In order to make it to be &quot;open&quot;, it must add a ```show``` class to main ```<div&gt;``` and to the ```<ul&gt;```.
This is closed:
```<div class=&quot;btn-group&quot;&gt;
  <button
      type=&quot;button&quot;
      class=&quot;btn btn-primary dropdown-toggle&quot;&gt;
      Manage (Using Directive) <span class=&quot;caret&quot;&gt;</span&gt;
    </button&gt;
  <ul class=&quot;dropdown-menu&quot;&gt;
    <li&gt;<a style=&quot;cursor: pointer;&quot;&gt;Edit </a&gt;</li&gt;
    <li&gt;<a style=&quot;cursor: pointer;&quot;&gt;Delete </a&gt;</li&gt;
  </ul&gt;
</div&gt;
```
This is open:
```<div class=&quot;btn-group show&quot;&gt;
  <button
      type=&quot;button&quot;
      class=&quot;btn btn-primary dropdown-toggle&quot;&gt;
      Manage (Using Directive) <span class=&quot;caret&quot;&gt;</span&gt;
    </button&gt;
  <ul class=&quot;dropdown-menu show&quot;&gt;
    <li&gt;<a style=&quot;cursor: pointer;&quot;&gt;Edit </a&gt;</li&gt;
    <li&gt;<a style=&quot;cursor: pointer;&quot;&gt;Delete </a&gt;</li&gt;
  </ul&gt;
</div&gt;
```

I'm trying to make it work as a directive with:
```<div class=&quot;btn-group&quot; appDropdown&gt;
  <button
      type=&quot;button&quot;
      class=&quot;btn btn-primary dropdown-toggle&quot;&gt;
      Manage (Using Directive) <span class=&quot;caret&quot;&gt;</span&gt;
    </button&gt;
  <ul class=&quot;dropdown-menu&quot;&gt;
    <li&gt;<a style=&quot;cursor: pointer;&quot;&gt;Edit </a&gt;</li&gt;
    <li&gt;<a style=&quot;cursor: pointer;&quot;&gt;Delete </a&gt;</li&gt;
  </ul&gt;
</div&gt;
```
And the dropdown.directive.ts:
```import { Directive, HostListener, HostBinding } from '@angular/core';

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

  @HostListener('click') toggleOpen() {
    this.isOpen = !this.isOpen;
  }
}
```
This way I'm only able to add the ```show``` class to the ```<div&gt;``` without adding it to the ```<ul&gt;```,
Is there a way to affect the directive children?
Here is a StackBlitz
This is a related question, but it does not mention any @HostBinding


Here is the accepted answer: I came across this post when I was looking for the answer to the same question. I solved the issue myself using ElementRef. I'm fairly new to Angular but coming from a React background I thought if the 'Ref' in element ref is similar to Refs in React then it should have HTML attributes &amp; properties, specifically querySelector.
So if anyone else is stumped on this, this can serve as a solution.
```import { Directive, HostListener, ElementRef } from '@angular/core';

@Directive({
  selector: '[appDropdown]',
})
export class DropdownDirective {
  constructor(private dropdownRef: ElementRef<HTMLElement&gt;) {}

  @HostListener('click') toggleOpen = () =&gt; {
    this.dropdownRef.nativeElement
      .querySelector('div')
      .classList.toggle('hidden');
  };
}
```



{'source': 'StackExchangeDataset', 'subset': 'stackoverflow.com', 'metadata': {'AnswerCount': 1, 'CommentCount': 0, 'ContentLicense': 'CC BY-SA 4.0', 'CreationDate': '2021:00:04/15/21', 'FavoriteCount': None, 'PostTypeId': 1, 'Tags': '<angular><bootstrap-4><angular-directive>', 'Title': 'How to affect the directive children using @HostBinding?', 'ViewCount': 143, 'id': 67116135, 'user_AboutMe': '<p>Looking for fellow programmer (FrontEnd - angular10 / Server - .net-core) to work on a side project, please contact me with Linkdin.</p>\n<p>If you find my answer useful you can buy me a <a href="https://www.buymeacoffee.com/ShaharShokrani" rel="nofollow noreferrer">coffee</a>.</p>\n', 'user_AccountId': 9211539.0, 'user_DisplayName': 'Shahar Shokrani', 'user_Reputation': 6544.0, 'user_Views': 775.0, 'user_id': 6844481.0}}