Angular Progression Ladder

The Angular progression ladder is a grouping of concepts and skills relevant to Angular programming. It provides aspiring Angular programmers with a way to track and improve their Angular skills.

novice
CONCEPTS	SKILLS	RESOURCES	COMPLETED
Angular versioning	The Angular versioning & release schedule
Angular CLI	Angular CLI is a tool to initialize, develop, scaffold & maintain Angular applications
Bootstrapping the application	Learn how to bootstrap the application
Components	Introduction to components, templates, views & syntax
Component's template in-line	HTML template of components in-line
Component's style	Component's style, special selectors, in-line styles
Life-cycle hooks	Learn where components trigger actions at specific points in the lifecycle
Interpolation	Interpolation in Angular for binding, template expressions & expression/statement context
Property binding	How to bind into properties, targets or use interpolation instead
Other bindings	Attribute binding, class binding, style binding, event binding
NgFor	How to use the built-in NgFor structural directive
NgIf & NgIf-Else	How to use the built-in NgIf & Else structural directives
NgSwitch	How to use the built-in NgSwitch structural directive (NgSwitch, NgSwitchCase & NgSwitchDefault)
NgStyle	How to set inline styles dynamically by NgStyle
Services	Introduction to services, DI, singleton services & examples
HttpClient	Usage of HttpClient service, reading response, headers & more usages
Feature Module	NgModules for the purpose of organizing code
Browser support	Supported browsers & polyfills
Typescript configuration	Overview about TS configuration for Angular projects
Deployment	Deploying your Angular application & optimizing for production
advanced_beginner
CONCEPTS	SKILLS	RESOURCES	COMPLETED
Communication from parent to child	How to communicate from parent to child via Input
Intercept Input property changes	Learn how to intercept Input property changes by Setter & ngOnChanges
Communication from child to parent	How to communicate from child to parent via Output
Communication by service	How to communicate among components by service
ViewChild & ViewChildren	Learn more about ViewChild & ViewChildren APIs
AfterViewInit & AfterViewChecked	Learn more about AfterViewInit & AfterViewChecked events APIs
Directives	Directive overview, types, respond to events & binding to Input property
Pipes	Parameterizing pipes, chaining pipes & custom pipes
Built-in pipes	Get to know the built-in Angular pipes
Pure pipes & Impure pipes	Learn the differences between pure pipes & impure pipes
Routing fundamentals	Router outlet, router links, active router links & registering routes
Activated route	Full view of what the activated route API exposes
Hash location strategy	Hash location strategy vs Path location strategy
competent
CONCEPTS	SKILLS	RESOURCES	COMPLETED
Environments	Set up different named build configurations with different defaults
AOT Compiler	The Ahead-of-Time (AOT) compiler
Template driven forms	Introduction, example, data flow & testing template driven forms
Template driven validation	Form validation in template driven forms
Reactive vs Template	Common & differences of reactive & template driven forms
Reactive forms	Introduction, example, data flow & testing reactive forms
Reactive validation	Form validation in reactive forms
Modules import order	Notice the modules import order
Sharing modules	Organize and reuse shared modules
Routing: Wildcard	Intercept invalid URLs by adding wildcard routes
Routing: Redirects	Redirect URLs to the default route
Routing: Parameters	Get route params, either using observables or snapshots
proficient
CONCEPTS	SKILLS	RESOURCES	COMPLETED
RxJS: Observables	Learn basics of Observable, subscribing, error handing and practice!
Async pipes	Impure async pipes, caching pipe, pure pipes & managing subscriptions
Lazy loading modules	Learn lazy loading feature modules & routing configuration
Guards	Learn guards, can-active and securing routes
Testing: Set Up	Setting up & Continuos Integration
Testing: Implementation	Testing services, components, attribute, directives, pipes & debugging
Content projection	Use content projection to reuse flexible components
Change detection	Change detection mechanism, dive deeper, on push detection & ExpressionChangedAfterItHasBeenCheckedError
View encapsulation	Look at the shadow dom view encapsulation
Language service	See the Angular language service, Installing it & Set it up on your IDE
expert
CONCEPTS	SKILLS	RESOURCES	COMPLETED
Security in Angular	Security contexts, Sanitization, XSS, Safe values & Http vulnerabilities
Internationalization: i18n	Setting up locales, pipes, template translations, source files, plurals & merging
Service workers	Learn the prerequisites, getting started & tutorial for PWA
Angular Universal	A complete tutorial per steps of how to prepare your app for Angular Universal
Dynamic components	Loading components at runtime & dynamic content projection
Dynamic forms	Creating forms dynamically
Angular animations	Getting started, simple transition, state, styles & timing
Routing with animations	Add animations to routings

Please note: This section is about Angular Framework, if you are looking to know more about Typescript check out the Typescript section

This is a community-driven document, please share your feedback, help us to improve it. Please open an issue or send us a PR on Github!

Angular Progression Ladder

The Angular progression ladder is a grouping of concepts and skills relevant to Angular programming. It provides aspiring Angular programmers with a way to track and improve their Angular skills.

Contributors

We need your help!