Angular Training


Our online Angular Certification Training Course includes ✔️50 hrs of blended learning ✔️3 industry projects to help you learn Angular concepts. Enroll now!

SKU: 9a9ad03ae60a Category:

Program Overview:

This Angular Certification Training Course will help you master front-end web development
with Angular. Gain in-depth knowledge of Angular concepts such as facilitating the
development of single-page web applications, dependency injection, typescript,
components, directives, pipes, forms, routing, and testing.

Program Features:

  • 50 hours of Blended Learning
  • 20 hours of online self-paced learning
  • 30 hours of instructor-led training
  • Free introductory JavaScript course
  • Flexibility to choose classes
  • Industry-recognized course completion certificate

Delivery Mode:

Blended – Online self-paced learning and live virtual classroom


There are no prerequisites for taking this Angular certification training course.

Target Audience:

  • UI developers
  • Technical project managers
  • Full-stack web developers
  • Quality assurance specialists
  • Architects
  • Students who wish to learn front-end UI development

Key Learning Outcomes:

By the end of this online Angular training course, you will be able to:

  • Understand the design of single-page applications and how Angular facilitates their development
  • Separate the model, view, and controller layers of your application and implement them using Angular
  • Master Angular expressions, filters, and scopes
  • Build Angular forms
  • Write Angular directives
  • Unit test and end-to-end test your Angular applications
  • Developing interactive and dynamic UI using Bootstrap

Certification Details and Criteria:

  • Complete at least 85 percent of the course or attend one complete batch
  • Successful completion and evaluation in the project

Course Curriculum:

Self-paced Curriculum:

Lesson 01 – Single page Applications

  • Course Overview
  • Introduction to Single Page Applications (SPA)
  • What do we need Angular for
  • Setting up the Development Environment
  • Angular Application Architecture
  • First Angular App

Lesson 02 – TypeScript and ESNext

  • Module Introduction and Introduction to TypeScript
  • Setting up the environment to write TypeScript
  • Variable declarations (var, let, and const)
  • Types – Primitives
  • Types – Reference and Special Types
  • Operators – Spread and Backticks
  • Operators – Destructure and Rest
  • Classes
  • Interface
  • Arrow Functions
  • Modules
  • Fetch
  • Async or await

Lesson 03 – Decorators

  • Module Introduction and an overview of Angular Modules
  • What are decorators
  • Angular Modules and the @NgModule Decorator
  • Declarations
  • Imports and Exports
  • providers, bootstrap, and entryComponents
  • Angular Application Bootstrap Mechanis

Lesson 04 – Component Decorator

  • Module Introduction
  • Angular Components and the @Component Decorator
  • Creating an Angular Component using the Angular CLI and on StackBlitz
  • Component Decorator Metadata
  • View Encapsulation – Emulated, ShadowDom, None
  • Data Binding – String Interpolation – {{ }}
  • Property Binding – []
  • Event Binding – ()
  • @Input and @Output Property Decorators
  • Two-way Data Binding – [()]
  • Attribute Binding – [attr.]
  • Class Binding – [class.]
  • Style Bindings – [style.]
  • Introduction to Lifecycle Hooks in Angular
  • Using Lifecycle Hooks in Angular
  • View Queries – View Child, View Children, Content Child, Content Children
  • Change Detection Mechanism in Angular. ZoneJS, NgZones

Lesson 05 – Angular Routing

  • Introduction to Routing
  • Implementing Routing in an Angular App
  • Creating a User List. Setting the stage for Child Routing
  • Abstracting the user link to a separate component
  • Implementing Child Routes
  • Path Match and Route Types
  • Introduction to Route Guards in Angular
  • CanActivate and CanActivateChild Guards in Angular
  • CanDeactivate Guard in Angular
  • Prefetching Data for a Component using Resolve

Lesson 06 – Dependency Injection

  • Introduction to Section
  • DI as a Pattern, DI as a Framework and Types of Providers
  • Hierarchical Dependency Injection
  • Introduction to Services in Angular
  • GET data from a Rest API using HttpClient
  • CRUD Operations using HttpClient, HttpParams and HttpHeaders
  • Observables and Operators in Observables – Map, Retry, Catch
  • Behavior Subject and Sharing Data using Behavior Subjects

Lesson 07 – Directives Deep Dive

  • Introduction to Section
  • Introduction to Directives
  • Built in Structural Directives
  • Built in Attribute Directives
  • Building custom Attribute Directives
  • Building Custom Structural Directives
  • Introduction to Pipes in Angular
  • Using Built In Pipes
  • Creating Custom Pipes in Angular
  • Pure and Impure Pipes in Angular
  • Decorators Revisited
  • Building Custom Decorators in Angular
  • Building a Custom Lifecycle Hook Class Logger Decorator
  • Building Custom Property Decorator in Angular

Lesson 08 – Forms in Angular

  • Introduction to Section
  • Types of Form Building Strategies in Angular
  • Creating Long Bootstrap forms quickly using VS Code using Emmet
  • Adding FormControl(s) to a Template Driven form using the ngModel directive
  • Getting the JavaScript Object Representation of a form using ngForm directive
  • Disabling the Submit Button on a Form using form’s $invalid flag
  • Getting the JavaScript Object Representation of a form in TypeScript Class
  • Adding Checkbox, Radio Buttons and Select List to your Template Driven Form
  • Creating Subsections in the form using NgModelGroup directive
  • Steps to implement a Reactive form in Angular
  • Quickly creating a Bootstrap form for our Reactive form using Emmet
  • Creating a Reactive form in the TypeScript class & connecting it to the template
  • Adding form Validations to a Reactive Form
  • Dynamically Adding or Removing FormControl(s) or FormGroup(s) using FormArray(s)
  • Adding Synchronous Custom Validations to your Reactive Form
  • Adding Async Custom Validations to your Reactive Form
  • Resetting the value of a form

Lesson 09 – Using Third Party Libraries

  • Introduction to the Section
  • Creating an Angular CLI Project with SCSS as a base style
  • Introducing Material Design Bootstrap into your Angular CLI Project
  • Adding a Navbar in your header
  • Adding Material Design Buttons
  • Adding Cards
  • Using Material Design Dropdowns and Form Inputs
  • Introducing Angular Material into your Angular CLI Project on the top of MDB
  • Adding Radio Buttons, Slide Toggle, Slider, Progress Bar and Spinner
  • Introduction to Firebase
  • Creating an App using the Firebase Console
  • Setting up your Angular CLI Project to support Firebase
  • Interacting with Firebase Realtime Database using methods on AngularFireList
  • Adding and Reading Data from Realtime Database in Firebase
  • Updating and Deleting Data from Realtime Database in Firebase

Live Virtual Class Curriculum:

Lesson 01 – Features of TypeScript

  • Introduction
  • Introduction to TypeScript
  • Introduction to Data Types
  • Let vs Const
  • Introduction to Functions
  • Introduction to Parameters
  • Introduction to Classes

Lesson 02 – Features of Angular

  • History of Angular
  • Understanding Angular
  • Set up Angular App
  • Angular Building Blocks
  • Observables
  • Introduction to Reactive Forms
  • Introduction to Server Communication

Lesson 03 – Ngmodule

  • Angular Modules
  • Routing Module
  • Feature Module
  • Sharing Module
  • Systematically Arranging Components of App

Lesson 04 – Ng Unit Testing and Observables

  • Introduction to Automated Testing
  • Types of Automated Testing
  • Introduction to Testing Tools
  • Introduction to Test Bed
  • Handling Component Dependencies
  • RxJS – Observable

Lesson 05 – Bootstrap

  • Learning Objectives
  • Explain Responsive Web Design (RWD)
  • Understand the Bootstrap Grid System
  • Learn Bootstrap Components
  • Quiz
  • Key Takeaways

Lesson 06 – Binding and Events

  • Learning Objectives
  • What is Template Model?
  • How Angular Binding works and the Type of Bindings
  • Understand Angular Built-in Directives
  • Basics of Webpack and SystemJS
  • Quiz
  • Key Takeaways

Lesson 07 – Dependency Injection and Service

  • Learning Objectives
  • Understand Dependency Injection (DI)
  • Understand DI Application Programming Interface
  • Explain a Service
  • Describe How to Create a Service
  • Explain Injecting a Service
  • Quiz
  • Key Takeaways

Lesson 08 – Directives

  • Learning Objectives
  • Angular Directives
  • Types of Angular Directives
  • Built-in Angular Directives
  • Working with Custom Directives
  • Quiz
  • Key Takeaways

Lesson 09 – Pipes

  • Learning Objectives
  • What is Pipe in Angular
  • Understand How Built-in Pipes Work in Angular
  • Understand Angular Custom pipes
  • Quiz
  • Key Takeaways

Lesson 10 – Forms

  • Learning Objectives
  • Angular Form Benefits
  • Template-Driven Approach
  • Model-Driven Approach
  • Angular Form Validation
  • Quiz
  • Key Takeaways

Lesson 11 – Routing

  • Learning Objectives
  • Understand How Angular Helps to Achieve SPA Using Routing
  • Define the Benefits of @NgModule
  • Identify Multiple Ways of Accessing Routes
  • Understand the Process of Routing Cycle
  • Quiz
  • Key Takeaways

Lesson 12 – HTTP, Promises, and Observables

  • Learning Objectives
  • Understand Working with RxJS
  • Understand Angular Interaction with HTTP GET
  • Describe the Process of Sending Data to the Server
  • Explain the Difference Between Promises and Observables
  • Quiz
  • Key Takeaways

Lesson 13 – Testing

  • Learning Objectives
  • Understand Tools and Setup
  • Understand Testing of Angular Class
  • Describe Testing Service
  • Understand Testing DOM
  • Explain End to End Testing
  • Quiz
  • Key Takeaways

Course End Project:

Build a Product List Web App in Angular

Implement CRUD functionality in Angular and build an Angular app with the following features:
Product form, product list, view, delete, and update products from the list.