Outline
- Fundamentals of Angular Directives - What is Modularity?
- Fundamentals of Angular Directives - Three Types of Directives in Angular
-
Fundamentals of Angular Directives - Attribute Directives
- Introduction
- Attribute Directives API
- ElementRef Exercise
- ElementRef Exercise Solution
- Renderer2 Exercise
- Renderer2 Exercise Solution
- Building our First Attribute Directive
- Building Actions Attribute Directive Exercise
- Actions Attribute Directive Exercise Solution
- Host Decorators
- HostBinding Exercise
- HostBinding Exercise Solution
- HostListener Exercise
- HostListener Exercise Solution
- Directive Inputs
- Directive Inputs Exercise
- Directive Inputs Exercise Solution
- Input, HostBinding and HostListener Exercise
- Input, HostBinding, and HostListener Exercise Solution
- BONUS: Mos Eisley Cantina Exercise
- Mos Eisley Cantina Exercise Solution
-
Fundamentals of Angular Directives - Structural Directives
- Introduction
- Built-in Structural Directives
- NgIf Built-in Structural Directive
- NgIf Structural Directive Exercise
- NgIf Exercise Solution
- NgFor Built-in Structural Directive
- NgFor Structural Directive Exericse
- NgFor Exercise Solution
- NgSwitch Built-in Structural Directive
- NgSwitch Structural Directive Exercise
- NgSwitch Exercise Solution
- NgSwitch with Enum
- NgSwitch with Enum Exercise
- NgSwitch with Enum Exercise Solution
- Structural Directives API
- FadeOut Structural Directive
- IfAndHide Structural Directive Exercise
- IfAndHide Directive Exercise Solution
-
Fundamentals of Angular Directives - Component Directives
- Introduction
- Component Templates
- Component Property Binding Exercise
- Component Property Binding Exercise Solution
- Component Event Binding Exercise
- Component Event Binding Exercise Solution
- Component Bindings
- Component Directive Exercise
- Component Directive Exercise Solution
- Component Output Binding Exercise
- Component Output Binding Exercise Solution
- Container and Presenter Component Design
- Modular Component Design Exercise
- Modular Component Design Exercise Solution
- Thank You
Outline
- Fundamentals of Angular Directives - What is Modularity?
- Fundamentals of Angular Directives - Three Types of Directives in Angular
-
Fundamentals of Angular Directives - Attribute Directives
- Introduction
- Attribute Directives API
- ElementRef Exercise
- ElementRef Exercise Solution
- Renderer2 Exercise
- Renderer2 Exercise Solution
- Building our First Attribute Directive
- Building Actions Attribute Directive Exercise
- Actions Attribute Directive Exercise Solution
- Host Decorators
- HostBinding Exercise
- HostBinding Exercise Solution
- HostListener Exercise
- HostListener Exercise Solution
- Directive Inputs
- Directive Inputs Exercise
- Directive Inputs Exercise Solution
- Input, HostBinding and HostListener Exercise
- Input, HostBinding, and HostListener Exercise Solution
- BONUS: Mos Eisley Cantina Exercise
- Mos Eisley Cantina Exercise Solution
-
Fundamentals of Angular Directives - Structural Directives
- Introduction
- Built-in Structural Directives
- NgIf Built-in Structural Directive
- NgIf Structural Directive Exercise
- NgIf Exercise Solution
- NgFor Built-in Structural Directive
- NgFor Structural Directive Exericse
- NgFor Exercise Solution
- NgSwitch Built-in Structural Directive
- NgSwitch Structural Directive Exercise
- NgSwitch Exercise Solution
- NgSwitch with Enum
- NgSwitch with Enum Exercise
- NgSwitch with Enum Exercise Solution
- Structural Directives API
- FadeOut Structural Directive
- IfAndHide Structural Directive Exercise
- IfAndHide Directive Exercise Solution
-
Fundamentals of Angular Directives - Component Directives
- Introduction
- Component Templates
- Component Property Binding Exercise
- Component Property Binding Exercise Solution
- Component Event Binding Exercise
- Component Event Binding Exercise Solution
- Component Bindings
- Component Directive Exercise
- Component Directive Exercise Solution
- Component Output Binding Exercise
- Component Output Binding Exercise Solution
- Container and Presenter Component Design
- Modular Component Design Exercise
- Modular Component Design Exercise Solution
- Thank You
Let's use a popular website and decompose the application into small units of reusable directives.
Tasks
- Visit mlb.com
- Take a screenshot of the website
- Draw boxes around each reusable section that you can identity that would be a directive.