Advanced Angular Programming

Advanced Angular Programming (ANG211)

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.

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.
    Live Private Class
    • Private Class for your Team
    • Live training
    • Online or On-location
    • Customizable
    • Expert Instructors
    Request Proposal