Angular 14 Training

Level 1: Getting Started

Full Training on TypeScript

 What is Angular

 Angular vs Angular 2 vs Angular 8

 Editing the First App

 How to understand most out of this course

 IDE setup (VScode)

 Installing useful plugins for angular

 Understand the editor

Level:2 The Basics

 How the Angular App Loads

 What is component?

 The root component (App Component)

 Create the component

 Understand the Module and Decorators

 What is Angular CLI (command line interface)

 Create a component using CLI

 Styling a component

Level:3 Data Handling

 What is Databinding

 String Interpolation

 Property binding

 Property binding vs String Interpolation

 Event binding

 Data passing in event binding

 Two-way binding

 Demo App with this level

Level 4: Understanding Directives

What is Directives

 ngIf – output data conditionally

 enhance ngif with else condition

 ngStyle – styling element dynamically

 ngClass – styling class dynamically

 ngFor – loop to build List

 getting index with ngFor

 Assignment and Demo App

Level 5: Understand Debugging

 Important topic for any developer: debugging

 How to debug angular app

 Use debugger to debug

 How to use console

 How to use browser sourcemap to debug

 Use Augury to dive into Angular app structure

 An app with errors to solve

Level 6: Component and DataBinding more advance

 Start demo app to understand practically

 Split app into components

 Property & event binding

 Custom property (@Input decorator)

 Custom event (@output decorator)

 Local references, template variables

 Access Template and DOM with (@ViewChild decorator)

 Project content into component using ng-content

 Access project content with (@ContentChild decorator)

 Understanding component lifecycle

Level 7: Advancement with Directives

 Recap ngFor, ngIf, ngClass, ngStyle

 Custom directive, create your own directives

 @HostListner decorator to listen host events

 @HostBinding decorator to bind host properties

 Binding to directive properties

Level 8: Services and dependency injection

Why services?

 Creating service with/without CLI

 Injecting logging services into component

 Data service

 Practicing of services

Level 9: Routing & Navigations in Angular

Demo app to start routing practice

 Setting up Routes

 Using of RouterLink instead of href

 Understanding of navigation paths

 Navigate programmatically

 How to use Relative paths

 Passing parameters to Routes and fetching

 Passing Query String to Route and fetching

 Introduction to Route Guard

 How to secure route using Guard canActivate method

Level 10: Angular Forms

 Introduction to Angular Forms

 Template driven forms

 Use of ngModel

 Adding validation & specific validation errors

 Reactive forms

 Handling input fields with these forms

 Validating forms with ngModel & ngGroup

 Output error messages

Level 11: Rxjs - Observables

 What is observables

 Building custom observables

 Error & completion method of Observables

 Understanding of RXJS Operators

 Subscribe and unsubscribe an observables

 Understanding Memory leaks with observables

Level 12: Error Handling

 Handling Errors

 Handling unexpected errors

 Handling expected errors

 Throwing application specific errors

Level 13: Pipes in Angular

 Intro to Pipes and why is important

 Using pipes

 Creating custom pipes

 Example of creating filter pipe

 Understanding of async pipe

Level 14: Consuming HTTP Service

Understand HTTP client module

 What is JSON

 Getting data

 Creating data

 Updating data

 Deleting data

Level 15:CRUD Project

 Merge all the topics into a single project

 Enjoy Angular with practical experience

 Build a real time CRUD (Single Page Application) in Angular

Level 16: Deployment

 Angular compiler in action

 Code setup

 Production environment

 Build your final app

 Setup with Base url to run on server