08-93 Adding own directive for dropdown

src/app/app.module.ts

@@ -12,6 +12,7 @@ import { RecipeDetailComponent } from './recipes/recipe-detail/recipe-detail.com
 import { RecipeItemComponent } from './recipes/recipe-list/recipe-item/recipe-item.component';
 import { ShoppingListComponent } from './shopping-list/shopping-list.component';
 import { ShoppingEditComponent } from './shopping-list/shopping-edit/shopping-edit.component';
+import { DropdownDirective } from './shared/dropdown.directive';
 
 
 @NgModule({
@@ -23,7 +24,8 @@ import { ShoppingEditComponent } from './shopping-list/shopping-edit/shopping-ed
     RecipeDetailComponent,
     RecipeItemComponent,
     ShoppingListComponent,
-    ShoppingEditComponent
+    ShoppingEditComponent,
+    DropdownDirective
   ],
   imports: [
     BrowserModule,

src/app/header/header.component.html

@@ -10,7 +10,7 @@
                 <li><a href="#" (click)="onSelect('shopping-list')">Shopping List</a></li>
             </ul>
             <ul class="nav navbar-nav navbar-right">
-                <li class="dropdown">
+                <li class="dropdown" appDropdown>
                     <a href="#" class="dropdown-toggle" role="button">Manage <span class="caret"></span></a>
                     <ul class="dropdown-menu">
                         <li><a href="#">Save</a></li>

src/app/recipes/recipe-detail/recipe-detail.component.html

@@ -10,7 +10,7 @@
 </div>
 <div class="row">
   <div class="col-xs-12">
-    <div class="btn-group">
+    <div class="btn-group" appDropdown>
       <button 
         type="button" 
         class="btn btn-primary dropdown-toggl">

src/app/shared/dropdown.directive.ts

@@ -0,0 +1,12 @@
+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;
+    }
+}