Angular 10 Table of Content

Table of Content

Single Page Applications, Uses of Angular, and Getting Started

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

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/await

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

  • 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 Mechanism

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

  • Module Introduction
  • Angular Components and the @Component Decorator
  • Creating an Angular Component using the Angular command-line interface (CLI) on StackBlitz
  • 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
  • View Queries: @ViewChildren
  • View Queries: @ContentChild and @ContentChildren
  • Change Detection Mechanism in Angular Using ZoneJS and NgZones

Angular Routing, Guards

  • Introduction to Routing
  • 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
  • Introduction to Route Guards in Angular
  • CanActivate and CanActivateChild Guards in Angular
  • CanDeactivate Guard in Angular
  • Prefetching Data for a Component using Resolve

Dependency Injection (As a Pattern and Framework), Services, HTTP, Observables

  • Introduction to the 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, and Catch
  • Behavior Subject and Sharing Data Using Behavior Subjects

Directives and Pipes in Angular

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

Forms in Angular

  • Introduction to the Section
  • 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

Using Third Party Libraries and Frameworks, such as MDB, Angular Material and Firebase

  • Introduction to the Section
  • 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

Apply for certification

 For Support