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
Angular CLI
The Angular command-line interface is a powerful and necessary tool for almost all Angular developers. You can find instructions on downloading and installing the CLI at: cli.angular.io. The CLI enables us to quickly and easily scaffold out new directives containing the necessary template, stylesheet, TypeScript class and unit test.
To get started with a new project using the Angular CLI use the following command:
ng new [application-name]
This will create a new directory containing everything you need to get started. Next, change directory into the new directory via cd [application-name]
.
Once in the project directory we can use the CLI to generate a new directive using the following command:
ng generate directive [path-to-directives/my-directive]
Don't forget that you can use the --dry-run
flag to first see what files will be created and modified. This can be helpful to ensure that the files are generated in the correct directory.
Angular Console
The Angular Console is a well-designed and easy-to-use graphical user-interface for the Angular CLI. You can find the download and more details on the Angular Console at: angularconsole.com. The console is available for Windows, macOS and Linux.