We will share your bill in this lockdown | Please use #TOGETHER at checkout for 30% discount
Testprep Training Ltd.

Angular 9 Online Course

In this course, you will learn Angular concepts with the help of enjoyable and easy-to-understand coding examples. Angular is one of the most popular front-end frameworks for building SPAs or web apps with HTML, CSS, and TypeScript. If you want to become a successful front-end or full-stack developer, you should have angular skills on board.

By the end of this course, you'll be able to build end-to-end SPAs in Angular on your own, understand and fix common compile-time and runtime errors quickly, and implement clean and maintainable code like a professional.


Course Curriculum

1. Single Page Applications, Why Angular, and Getting Started

  • 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

2. TypeScript and ESNext

  • Module Introduction and Introduction to TypeScript
  • Setting up the environement 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

3. 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

4. @Component Decorator, Angular Components, Communication, and the Lifecycle Hooks

  • 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

5. Angular Routing, Guards

  • 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

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

  • 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

7. Directives and Pipes in Angular

  • 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

8. 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

9. Using Third Party Libraries and Frameworks like MDB, Angular Material & Firebase

  • 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

Tags: Angular 9 Online Course