Introduction to Angular Programming Training

Introduction to Angular Programming Training

  4.5 out of 5 - Read Testimonials
Course Length:
Delivery Methods:
Next Live Class:Apr 19-21, 2021 10AM-5PM ET
Register Now
Course Topics
  • Set up a complete Angular development environment
  • Develop single-page applications
  • Code with TypeScript
  • Work with Angular CLI to create applications and generate components
  • Create Components, Directives, Services, Pipes, and Custom Validators
  • Develop component templates that include Angular directives and bindings.
  • Retrieve and post data to network applications and RESTful services
  • Format data for display using Angular Pipes
  • Develop template-based and reactive forms to collect data
  • Navigate between multiple view screens using the Angular component router
Available Delivery Methods
Public Class
Public expert-led online training from the convenience of your home, office or anywhere with an internet connection. Guaranteed to run .
Private Class
Private classes are delivered for groups at your offices or a location of your choice.
Course Overview

This Introduction to Angular training class covers all the essential topics and is designed to get students up and running with Angular development in the shortest amount of time. Developers, application designers, and anyone tasked with supporting Angular applications will gain valuable knowledge required for success in their job roles.

Course Outline
  1. Introducing Angular
    1. What is Angular?
    2. Central Features of the Angular Framework
    3. Appropriate Use Cases
    4. Building Blocks of an Angular Application
    5. Basic Architecture of an Angular Application
    6. Installing and Using Angular
    7. Anatomy of an Angular Application
    8. Running the Application
    9. Building and Deploying the Application
    10. Summary
  2. Introduction to TypeScript
    1. Programming Languages for Use with Angular
    2. TypeScript Syntax
    3. Programming Editors
    4. The Type System – Defining Variables
    5. The Type System – Defining Arrays
    6. Type in Functions
    7. Type Inference
    8. Defining Classes
    9. Class Methods
    10. Class Constructors
    11. Class Constructors – Alternate Form
    12. Interfaces
    13. Working with ES6 Modules
    14. Visibility Control
    15. var vs let
    16. Arrow Functions
    17. Arrow Function Compact Syntax
    18. Arrow Function and Caller Context
    19. Template Strings
    20. Generics in Class
    21. Generics in Function
    22. Generics - Restricting Types
    23. TypeScript Transpilation
    24. Summary
  3. Components
    1. What is a Component?
    2. An Example Component
    3. Creating a Component Using Angular CLI
    4. The Component Class
    5. The @Component Decorator
    6. Registering a Component to Its Module
    7. Component Template
    8. Example: HelloComponent Template
    9. Example: The HelloComponent Class
    10. Using a Component
    11. Run the Application
    12. Component Hierarchy
    13. The Application Root Component
    14. The Bootstrap File
    15. Component Lifecycle Hooks
    16. Example Lifecycle Hooks
    17. CSS Styles
    18. Summary
  4. Component Templates
    1. Templates
    2. Template Location
    3. The Mustache {{ }} Syntax
    4. Setting DOM Element Properties
    5. Setting Element Body Text
    6. Event Binding
    7. Expression Event Handler
    8. Prevent Default Handling
    9. Attribute Directives
    10. Apply Styles by Changing CSS Classes
    11. Example: ngClass
    12. Applying Styles Directly
    13. Structural Directives
    14. Conditionally Execute Template
    15. Example: ngIf
    16. Looping Using ngFor
    17. ngFor Local Variables
    18. Manipulating the Collection
    19. Example - Deleting an Item
    20. Item Tracking with ngFor
    21. Swapping Elements with ngSwitch
    22. Grouping Elements
    23. Template Reference Variable
    24. Summary
  5. Inter Component Communication
    1. Communication Basics
    2. The Data Flow Architecture
    3. Preparing the Child to Receive Data
    4. Send Data from Parent
    5. More About Setting Properties
    6. Firing Event from a Component
    7. @Output() Example - Child Component
    8. @Output() Example - Parent Component
    9. Full Two Way Binding
    10. Setting up Two Way Data Binding in Parent
    11. Summary
  6. Template Driven Forms
    1. Template Driven Forms
    2. Importing Forms Module
    3. Basic Approach
    4. Setting Up a Form
    5. Getting User Input
    6. Omitting ngForm Attribute
    7. Initialize the Form
    8. Two Way Data Binding
    9. Form Validation
    10. Angular Validators
    11. Displaying Validation State Using Classes
    12. Additional Input Types
    13. Checkboxes
    14. Select (Drop Down) Fields
    15. Rendering Options for Select (Drop Down)
    16. Date fields
    17. Radio Buttons
    18. Summary
  7. Reactive Forms
    1. Reactive Forms Overview
    2. The Building Blocks
    3. Import ReactiveFormsModule
    4. Construct a Form
    5. Design the Template
    6. Getting Input Values
    7. Initializing the Input Fields
    8. Setting Form Values
    9. Subscribing to Input Changes
    10. Validation
    11. Built-In Validators
    12. Showing Validation Error
    13. Custom Validator
    14. Using a Custom Validator
    15. Supplying Configuration to Custom Validator
    16. Sub FormGroups - Component Class
    17. Sub FormGroups - HTML Template
    18. Why Use Sub FormGroups
    19. Summary
  8. Services and Dependency Injection
    1. What is a Service?
    2. Creating a Basic Service
    3. The Service Class
    4. What is Dependency Injection?
    5. Injecting a Service Instance
    6. Injectors
    7. Injector Hierarchy
    8. The Root Injector
    9. Registering a Service with a Component's Injector
    10. Where to Register a Service?
    11. Dependency Injection in Other Artifacts
    12. Providing an Alternate Implementation
    13. Dependency Injection and @Host
    14. Dependency Injection and @Optional
    15. Summary
  9. HTTP Client
    1. The Angular HTTP Client
    2. Using The HTTP Client - Overview
    3. Importing HttpClientModule
    4. Service Using HttpClient
    5. Making a GET Request
    6. What does an Observable Object do?
    7. Using the Service in a Component
    8. The PeopleService Client Component
    9. Error Handling
    10. Customizing the Error Object
    11. Making a POST Request
    12. Making a PUT Request
    13. Making a DELETE Request
    14. Summary
  10. Pipes and Data Formatting
    1. What are Pipes?
    2. Built-In Pipes
    3. Using Pipes in HTML Template
    4. Chaining Pipes
    5. Internationalized Pipes (i18n)
    6. Loading Locale Data
    7. The date Pipe
    8. The number Pipe
    9. Currency Pipe
    10. Create a Custom Pipe
    11. Custom Pipe Example
    12. Using Custom Pipes
    13. Using a Pipe with ngFor
    14. A Filter Pipe
    15. Pipe Category: Pure and Impure
    16. Pure Pipe Example
    17. Impure Pipe Example
    18. Summary
  11. Introduction to Single Page Applications
    1. What is a Single Page Application (SPA)
    2. Traditional Web Application
    3. SPA Workflow
    4. Single Page Application Advantages
    5. HTML5 History API
    6. SPA Challenges
    7. Implementing SPA's Using Angular
    8. Summary
  12. The Angular Component Router
    1. The Component Router
    2. View Navigation
    3. The Angular Router API
    4. Creating a Router Enabled Application
    5. Hosting the Routed Components
    6. Navigation Using Links and Buttons
    7. Programmatic Navigation
    8. Passing Route Parameters
    9. Navigating with Route Parameters
    10. Obtaining the Route Parameter Values
    11. Retrieving the Route Parameter Synchronously
    12. Retrieving a Route Parameter Asynchronously
    13. Query Parameters
    14. Supplying Query Parameters
    15. Retrieving Query Parameters Asynchronously
    16. Problems with Manual URL entry and Bookmarking
    17. Summary
Class Materials

Each student in our Live Online and our Onsite classes receives 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:

  • Web development experience using HTML, CSS, and JavaScript. Prior Angular experience, with AngularJS or the current version of Angular, is not required.

Experience in the following would be useful for this Angular class:

  • Knowledge of the browser DOM.
Follow-on Courses
Register for a Live Class
$1,725.00

    • See More Class Dates

Please select a class.
Request a Private Class
  • Private Class for your Team
  • Online or On-location
  • Customizable
  • Expert Instructors
Request Pricing