title: understanding how @HostBinding works in angular for toggleClass directive
body: <p>I came across the following angular directive:</p>
  
  <pre><code>import { Directive , HostListener , HostBinding } from '@angular/core';
  
  @Directive({
      selector: '[appDropdown]'
  })
  
  export class DropdownDirective {
      @HostBinding('class.open') isOpen = false;
  
      @HostListener('click') toggleOpen() {
          this.isOpen = !this.isOpen;
      }
  }
  </code></pre>
  
  <p>While surfing code online , basically the code only toggles the <code>open</code> class on the element the directive is used on , so this directive can be used like so:</p>
  
  <pre><code>&lt;ul class="nav navbar-nav navbar-right"&gt;
      &lt;li class="dropdown" appDropdown&gt;
          &lt;a href="#" class="dropdown-toggle" role="button"&gt;Manage &lt;span class="caret"&gt;&lt;/span&gt;&lt;/a&gt;
          &lt;ul class="dropdown-menu"&gt;
              &lt;li&gt;&lt;a href="#"&gt;Save Data&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Fetch Data&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>Now what i don't understand is the below line of code in the directive:</p>
  
  <pre><code> @HostBinding('class.open') isOpen = false;
  </code></pre>
  
  <p>Whats exactly is it doing and how exactly does it function ? I am not quite understanding the above line of code. can somebody please explain ?</p>