From d968855bb61a2797abcc423dfcd49723fbf7e2c1 Mon Sep 17 00:00:00 2001
From: Nils Dittberner <nils@dittberner.it>
Date: Tue, 21 Nov 2017 16:23:42 +0100
Subject: [PATCH] 08-93 Adding own directive for dropdown

---
 src/app/app.module.ts                                      |  4 +++-
 src/app/header/header.component.html                       |  2 +-
 src/app/recipes/recipe-detail/recipe-detail.component.html |  2 +-
 src/app/shared/dropdown.directive.ts                       | 12 ++++++++++++
 4 files changed, 17 insertions(+), 3 deletions(-)
 create mode 100644 src/app/shared/dropdown.directive.ts

diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 45b4399..cecc330 100644
--- a/src/app/app.module.ts
+++ b/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,
diff --git a/src/app/header/header.component.html b/src/app/header/header.component.html
index 6ce6b1e..0a90ae9 100644
--- a/src/app/header/header.component.html
+++ b/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>
diff --git a/src/app/recipes/recipe-detail/recipe-detail.component.html b/src/app/recipes/recipe-detail/recipe-detail.component.html
index 42eb1c5..c610e54 100644
--- a/src/app/recipes/recipe-detail/recipe-detail.component.html
+++ b/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">
diff --git a/src/app/shared/dropdown.directive.ts b/src/app/shared/dropdown.directive.ts
new file mode 100644
index 0000000..2b20182
--- /dev/null
+++ b/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;
+    }
+}
\ No newline at end of file