Objectives
Have you been using Angular at work for a while and want to take your skill to the next level? Then this advanced course is for you. Our customers repeatedly told us about the challenges they are facing in their Angular projects. We have designed this course to directly address them.
Mange Complexity
Do you have complex pages with many components and these components need to communicate with each other? Simple @Input and @Output mechanism is not enough for this. We will show you several strategies to manage this situation and come up with good solutions.
Slow Page Update
When you have many components on a page refreshing their templates can slow down updates. Learn how to optimize change detection which will definitely improve data updates.
Custom Validators
Do have custom input validation logic? How about doing real time validation of user input on the server side? This course delves deep into the validator API and shows you how to do these things.
Angular Security
This is another popular topic that our customers keep asking us for. We show you the best practices for user authentication and authorization. We show how to prevent common attacks like XSS and CSRF.
And Much Much More…
Learn how to create multi-lingual Angular web sites, develop your own RxJS operators, perform HTTP call retries and many more advanced topics. Please have a look at the course outline for a detailed list of topics.
Real Life Hands on Exercises
The course uses project style hands on exercises where you gradually build a real life application. If you are an experienced web developer you will find the exercises challenging and engaging.
Prerequisites
- Very good understanding of Angular.
- WA2777 Comprehensive Angular 7 Programming Training
Duration
2 days
Outline for Angular 7 Deep Dive Training
Chapter 1. Advanced Component Concepts
- Detecting Change to @Input Binding
- Example Child and Parent Components
- Using a Custom Setter
- Using ngOnChanges
- Advanced Inter Component Communication
- Direct Access to Child
- Using a Template Local Variable
- Using the @ViewChild Decorator
- More About @ViewChild
- The @ViewChildren Decorator
- Live Monitoring of Children
- Direct Access to the Parent Component
- Communication Using Subject API
- Creating a Subject
- Publishing a Message in a Subject
- Subscribing to the Subject
- Problem With Ordering
- Content Projection
- Setup Projection Using ng-content
- Supplying Template for ng-content
- The Host Element
- Static Styling of the Host Element
- Setting DOM Properties of the Host
- Dynamically Loading a Component
- Dynamic Loading Example
- HostComponent Code
- Setting entryComponents
- Optimizing Change Detection
- Example Excessive Template Execution
- Using OnPush Change Detection Strategy
- Properly Changing @Input Variables
- Additional Notes on OnPush
- Summary
Chapter 2. Advanced RxJS
- Observable Creator Functions
- Subscribing to DOM Events
- The interval Function
- forkJoin and zip Function
- The concat Function
- The merge Function
- Recap of Operators
- The debounceTime Operator
- The distinct Operator
- The delay Operator
- The reduce Operator
- The flatMap Operator
- The switchMap Operator
- The retryWhen Operator
- Basic Example of retryWhen
- Retry for a Finite Time
- Creating a Custom Operator
- Advanced Example Custom Operator
- Intercepting All HTTP Calls
- Example Interceptor Service
- Registering the Interceptor
- Summary
Chapter 3. Custom Attribute Directive
- Recapping Attribute Directives
- Ways to Manipulate the Host Element
- Binding to the DOM Properties of the Host
- Listening for Host Events
- Obtaining the DOM Event Object
- Accessing the Host Component
- Adding @Input to a Directive
- Summary
Chapter 4. Custom Structural Directive
- How Do Structural Directives Work?
- Commonly Used API
- A Very Simple Conditional Directive
- Using the Sample Directive
- Passing Context Data to the Template
- Example Looping Directive
- Using the Looping Directive
- Summary
Chapter 5. Custom Validators
- Validator for Reactive Forms
- Example Validator Function
- Using the Validator
- Passing Data to Validator Function
- Validator for Template Driven Forms
- Example Validator Directive
- Using the Validator Directive
- Asynchronous Validator
- Example Asynchronous Validator Function
- Using the Validation Function
- Asynchronous Validator Directive
- Optimizing Asynchronous Validation
- Summary
Chapter 6. Distributing Angular Libraries
- Introduction
- About Workspace and Project
- Creating a Library Project
- Anatomy of a Library Project
- Create a Component in the Library
- Create a Service in the Library
- Building the Library
- Distributing the Library
- Using the Library from an Application
- Using the Library Artifacts
- Writing a Sample Application
- Summary
Chapter 7. Internationalization (I18N)
- Introduction
- Translatable Text
- Extract Translatable Text
- Example XLIFF File
- Providing Translation
- Configure the Build System
- Serving and Building
- Deploying the Application
- Custom Translation Unit ID
- Getting the Current Locale
- Translatable Attribute Text
- Summary
Chapter 8. Security in Angular Applications
- Overview of Authentication and Authorization
- About Identity Token
- Exchanging the Identity Token
- Example Login Code in Angular Service
- Options for Saving the Identity Token
- Sending the Token to Server
- Obtaining User Information
- Cross Site Scripting (XSS) Attack
- Angular and XSS
- Sanitizing Content
- Trusting HTML Content
- Cross-Site Request Forgery (XSRF)
- Preventing XSRF Using Angular
- Summary
Lab Exercises
Lab 1. Advanced Inter Component Communication
Lab 2. Advanced Component Techniques
Lab 3. Using the Subject API
Lab 4. HTTP Client Warmup Exercise
Lab 5. Advanced RxJS
Lab 6. Developing a Custom Attribute Directive
Lab 7. Develop Custom Validators
Lab 8. Creating Angular Library
Lab 9. Using Angular Library
Lab 10. Angular Security – Authentication
Lab 11. Angular Security - Authorization