Advanced Angular Programming

Advanced Angular Programming

4.1 out of 5 - Read Testimonials
Course Length: 2 days
Delivery Methods: Available as private class only
Course Overview

This Advanced Angular Programming training class covers advanced topics of this next generation of the Angular framework. This course is intended for those that already have a basic understanding of the Angular 8 fundamentals and now want to cover more advanced features the Angular 8 framework offers.

Note: Although initially the 1st major revision of the AngularJS framework was known as "Angular 2" this is now technically incorrect as the Angular framework is releasing newer major versions (although the structure is still the same). Now "AngularJS" refers to the old architecture while simply "Angular" refers to the new architecture.

Register Now
Course Benefits

    Manage 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 8 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.

Course Outline
  1. Advanced Component Concepts
    1. Detecting Change to @Input Binding
    2. Example Child and Parent Components
    3. Using a Custom Setter
    4. Using ngOnChanges
    5. Advanced Inter Component Communication
    6. Direct Access to Child
    7. Using a Template Local Variable
    8. Using the @ViewChild Decorator
    9. More About @ViewChild
    10. The @ViewChildren Decorator
    11. Live Monitoring of Children
    12. Direct Access to the Parent Component
    13. Communication Using Subject API
    14. Creating a Subject
    15. Publishing a Message in a Subject
    16. Subscribing to the Subject
    17. Problem With Ordering
    18. Content Projection
    19. Setup Projection Using ng-content
    20. Supplying Template for ng-content
    21. The Host Element
    22. Static Styling of the Host Element
    23. Setting DOM Properties of the Host
    24. Dynamically Loading a Component
    25. Dynamic Loading Example
    26. HostComponent Code
    27. Setting entryComponents
    28. Optimizing Change Detection
    29. Example Excessive Template Execution
    30. Using OnPush Change Detection Strategy
    31. Properly Changing @Input Variables
    32. Additional Notes on OnPush
    33. Summary
  2. Advanced RxJS
    1. Observable Creator Functions
    2. Subscribing to DOM Events
    3. The interval Function
    4. forkJoin and zip Function
    5. The concat Function
    6. The merge Function
    7. Recap of Operators
    8. The debounceTime Operator
    9. The distinct Operator
    10. The delay Operator
    11. The reduce Operator
    12. The flatMap Operator
    13. The switchMap Operator
    14. The retryWhen Operator
    15. Basic Example of retryWhen
    16. Retry for a Finite Time
    17. Creating a Custom Operator
    18. Advanced Example Custom Operator
    19. Intercepting All HTTP Calls
    20. Example Interceptor Service
    21. Registering the Interceptor
    22. Summary
  3. Custom Attribute Directive
    1. Recapping Attribute Directives
    2. Ways to Manipulate the Host Element
    3. Binding to the DOM Properties of the Host
    4. Listening for Host Events
    5. Obtaining the DOM Event Object
    6. Accessing the Host Component
    7. Adding @Input to a Directive
    8. Summary
  4. Custom Structural Directive
    1. How Do Structural Directives Work?
    2. Commonly Used API
    3. A Very Simple Conditional Directive
    4. Using the Sample Directive
    5. Passing Context Data to the Template
    6. Example Looping Directive
    7. Using the Looping Directive
    8. Summary
  5. Custom Validators
    1. Validator for Reactive Forms
    2. Example Validator Function
    3. Using the Validator
    4. Passing Data to Validator Function
    5. Validator for Template Driven Forms
    6. Example Validator Directive
    7. Using the Validator Directive
    8. Asynchronous Validator
    9. Example Asynchronous Validator Function
    10. Using the Validation Function
    11. Asynchronous Validator Directive
    12. Optimizing Asynchronous Validation
    13. Summary
  6. Distributing Angular 8 Libraries
    1. Introduction
    2. About Workspace and Project
    3. Creating a Library Project
    4. Anatomy of a Library Project
    5. Create a Component in the Library
    6. Create a Service in the Library
    7. Building the Library
    8. Distributing the Library
    9. Using the Library from an Application
    10. Using the Library Artifacts
    11. Writing a Sample Application
    12. Summary
  7. Internationalization (I18N)
    1. Introduction
    2. Translatable Text
    3. Extract Translatable Text
    4. Example XLIFF File
    5. Providing Translation
    6. Configure the Build System
    7. Serving and Building
    8. Deploying the Application
    9. Custom Translation Unit ID
    10. Getting the Current Locale
    11. Translatable Attribute Text
    12. Summary
  8. Security in Angular 8 Applications
    1. Overview of Authentication and Authorization
    2. About Identity Token
    3. Exchanging the Identity Token
    4. Example Login Code in Angular Service
    5. Options for Saving the Identity Token
    6. Sending the Token to Server
    7. Obtaining User Information
    8. Cross Site Scripting (XSS) Attack
    9. Angular and XSS
    10. Sanitizing Content
    11. Trusting HTML Content
    12. Cross-Site Request Forgery (XSRF)
    13. Preventing XSRF Using Angular
    14. Summary
Class Materials

Each student will receive a comprehensive set of materials, including course notes and all the class examples.

Class Prerequisites

Experience in the following is required for this Angular class:

  • Some prior understanding of Angular fundamentals in addition to web development using HTML, CSS, and JavaScript. Experience developing with AngularJS (the prior version) is not required.
Prerequisite Courses

Courses that can help you meet these prerequisites: