+
+## Create basic attribute directives
+
+Namingconvention: `name.directive.ts`
+
+Generate it with the CLI:
+```bash
+ng generate directive 
+
+In `app.modules.ts` has to be added under `declarations` and *import* the source path to the directive.
+
+Use it in the template.html with just adding the name `appBasicHighlight` to the component.
+
+## Using Renderer for attribute directives
+
+
+
+Renderer is a better approach to accessing the DOM. Why? Because Angular dont works only in the Browser, but also with worker, which maight in certain circumstances will get errors.
+
+## HostListener
+
+With HostListener is a neat way to style the Element based on certain events triggered from the host (mouseover, mouseenter, mouseleave, etc).
+
+
+
+## HostBinding
+
+with HostBinding is the renderer no longer needed and is much simpler to change an elements backgroundcolor.
+```ts
+@Directive({
+ selector: '[appBetterHighlight]'
+})
+export class BetterHighlightDirective implements OnInit {
+ @HostBinding('style.backgroundColor') backgroundColor: string = 'transparent';
+
+ ngOnInit() {
+ }
+
+ @HostListener('mouseenter') mouseover(eventData: Event) {
+ this.backgroundColor = this.highlightColor;
+ }
+
+ @HostListener('mouseleave') mouseleave(eventData: Event) {
+ this.backgroundColor = this.defaultColor;
+ }
+}
+```
+
+## Binding to directive properties
+
+The hardcoded colors can be set from the outside using the `@Input` like so
+
+```html
+bliblubla
+``` + +```ts +import { + Directive, + Renderer2, + OnInit, + ElementRef, + HostListener, + HostBinding, + Input +} from '@angular/core'; + +@Directive({ + selector: '[appBetterHighlight]' +}) +export class BetterHighlightDirective implements OnInit { + @Input() defaultColor: string = 'transparent'; + @Input('appBetterHighlight') highlightColor: string = 'blue'; + @HostBinding('style.backgroundColor') backgroundColor: string; + + ngOnInit() { + this.backgroundColor = this.defaultColor; + } + + @HostListener('mouseenter') mouseover(eventData: Event) { + this.backgroundColor = this.highlightColor; + } + + @HostListener('mouseleave') mouseleave(eventData: Event) { + this.backgroundColor = this.defaultColor; + } + +} +``` + +## Building a structural directive + +```ts +import { Directive, Input, TemplateRef, ViewContainerRef } from '@angular/core'; + +@Directive({ + selector: '[appUnless]' +}) +export class UnlessDirective { + @Input() set appUnless(condition: boolean) { + if (!condition) { + this.vcRef.createEmbeddedView(this.templateRef); + } else { + this.vcRef.clear(); + } + } + + constructor(private templateRef: TemplateRef
+
+ngSwitch can be used for replacing a lot of ngIf statements.
\ No newline at end of file
diff --git a/img/attribute_structural_directives.png b/img/attribute_structural_directives.png
new file mode 100644
index 0000000..21a99c5
Binary files /dev/null and b/img/attribute_structural_directives.png differ
diff --git a/img/basic_directive.png b/img/basic_directive.png
new file mode 100644
index 0000000..c27c20b
Binary files /dev/null and b/img/basic_directive.png differ
diff --git a/img/ngSwitch.png b/img/ngSwitch.png
new file mode 100644
index 0000000..6b6b3b7
Binary files /dev/null and b/img/ngSwitch.png differ
diff --git a/img/reactive_directive.png b/img/reactive_directive.png
new file mode 100644
index 0000000..24464a2
Binary files /dev/null and b/img/reactive_directive.png differ
diff --git a/img/renderer.png b/img/renderer.png
new file mode 100644
index 0000000..182f42e
Binary files /dev/null and b/img/renderer.png differ
diff --git a/project/src/app/app.module.ts b/project/src/app/app.module.ts
index 76fe72d..2ab78da 100644
--- a/project/src/app/app.module.ts
+++ b/project/src/app/app.module.ts
@@ -9,6 +9,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({
declarations: [
@@ -19,7 +20,8 @@ import { ShoppingEditComponent } from './shopping-list/shopping-edit/shopping-ed
RecipeDetailComponent,
RecipeItemComponent,
ShoppingListComponent,
- ShoppingEditComponent
+ ShoppingEditComponent,
+ DropdownDirective
],
imports: [
BrowserModule,
diff --git a/project/src/app/header/header.component.html b/project/src/app/header/header.component.html
index c8df7dc..196570c 100644
--- a/project/src/app/header/header.component.html
+++ b/project/src/app/header/header.component.html
@@ -9,7 +9,7 @@