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
Hi there 👋
My name is Brian Love, and I'm excited to teach you how to build modular applications using directives in Angular.
A little bit about me:
- I am a Google Developer Expert in Web Technologies and Angular
- I enjoy sharing what I learn through writing, speaking and creating course videos (like this)
- I also enjoy traveling, hiking, camping, and a hoppy beer
You can connect with me:
- On Twitter: https://twitter.com/brian_love
- On my blog: https://brianflove.com
Some things I'm up to:
- Building Polaris - an AI-powered Site Reliability Platform
- Angular architecture reviews and consulting: https://liveloveapp.com
- Sharing best practices and expert advice: https://lookout.dev
Course Overview
In this course you will learn to:
- Create better components
- Create custom decorator directives
- Understand and create structural directives