Angular 11 Table of Contents

Table of Content


Single Page Applications and Angular Basics

  • Introduction to Single Page Applications (SPA)
  • Uses of Angular
  • Setting up a Development Environment
  • Angular Application Architecture
  • First Angular App

TypeScript and ESNext

  • TypeScript Introduction
  • Setting up the Environment to Write TypeScript
  • Variable declarations (var, let, and const)
  • Primitives Types
  • Reference and Special Types
  • Spread and Backticks Operators
  • Destructure and Rest Operators
  • Classes
  • Interface
  • Arrow Functions
  • Modules
  • fetch
  • async/await

Decorators, @NgModule, Angular Modules, and Angular App Bootstrap Mechanism

  • Angular Modules Introduction
  • Decorators
  • Angular Modules and the @NgModule Decorator
  • Declarations
  • Imports and Exports
  • Providers, Bootstrap, and entryComponents
  • Angular Application Bootstrap Mechanism

@Component Decorator, Angular Components, Communication, and Lifecycle Hooks

  • Angular Components and the @Component Decorator
  • Creating an Angular Component using the Angular CLI
  • Component Decorator Metadata
  • View Encapsulation - Emulated, Shadow DOM, 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: @ViewChild, @ViewChildren, @ContentChild and @ContentChildren
  • Change Detection Mechanism in Angular Using ZoneJS and NgZones

Angular Routing, Guards

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

Dependency Injection, Services, HTTP, Observables

  • DI as a Pattern, DI as a Framework and Types of Providers
  • Hierarchical Dependency Injection
  • 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, and Catch
  • Behavior Subject and Sharing Data Using Behavior Subjects

Directives and Pipes in Angular

  • 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 a Custom Property Decorator in Angular

Forms in Angular

  • Types of Form Building Strategies in Angular
  • Creating Long Bootstrap Forms Quickly with 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 the ngForm Directive
  • Disabling the Submit Button on a Form Using the Form's $invalid Flag
  • Getting the JavaScript Object Representation of a Form in the TypeScript Class
  • Adding Checkbox, Radio Buttons and Select List to your Template-driven Form
  • Creating Subsections in the Form Using the NgModelGroup Directive
  • Steps to Implement a Reactive Form in Angular
  • Quickly Creating a Bootstrap Form for a Reactive Form Using Emmet
  • Creating a Reactive Form in the TypeScript class and 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 a Reactive Form
  • Adding Async Custom Validations to a Reactive Form
  • Resetting the Value of a Form

MDB, Angular Material and Firebase

  • Creating an Angular CLI Project with SCSS as a Base Style
  • Introducing Material Design Bootstrap (MDB) 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 the Firebase Realtime Database Using the Methods on AngularFireList
  • Adding and Reading Data from the Realtime Database in Firebase
  • Updating and Deleting Data from the Firebase Realtime Database


  • Installation and Usage
  • Configuration

Other Angular 11 Features

  • Fonts Inlining
  • Component Test Harnesses
  • HMR
  • Language Service Preview

Apply for Certification

 For Support