Intro

Learning a programming language or framework can be a tough challenge, and when it comes to Angular, even experienced front-end developers often consider it to have a high entry threshold compared to others. With the abundance of information, courses, and materials available, it's easy to feel overwhelmed and unsure where to begin.

To make your Angular learning journey smoother, I've written down a comprehensive list of free resources that will take you to the next level of expertise in the Angular world. This list includes carefully selected courses, videos, articles, and books categorized by relevant topics. Rest assured that I have personally gone through each resource, either in its entirety or by extensively sampling complete courses, so I can honestly recommend each one to you.

I want to keep this list up to date as the Angular ecosystem continuously evolves and exciting developments are on the horizon. The current version covers materials created up to Angular 16, and I promise to update this article whenever a new version of Angular is released. I aim to maintain this list's vitality so you can stay in tune with the latest advancements in our dynamic Angular community.

Join me on this learning journey, and together, let's explore the world of Angular.

Exploring the Angular Learning Journey: Foundational Concepts and Advanced Topics

The list has been organized into two separate articles. The first article will concentrate on the core concepts and building blocks of Angular, encompassing components, directives, pipelines, services, routing, gatekeepers, and dependency injection. We will thoroughly explore essential topics, including change detection, which can pose challenges even for experienced developers.

In the subsequent article, I provide recommendations for learning or enhancing your skills in RxJS, Forms, State Management, Architecture, Testing, and the latest features, such as Signals. These resources are carefully selected to assist you in gaining proficiency in these areas, empowering you to leverage advanced techniques and stay abreast of the newest developments within Angular.

By dividing the list into these two articles, I aim to ensure a focused and comprehensive learning experience catering to both the foundational aspects and advanced topics of Angular. Whether starting your Angular journey or seeking to deepen your knowledge, these curated materials will guide you toward mastering the intricacies of Angular development.

How to use this list effectively?

Answering this question definitively is challenging, as it largely depends on your current level of proficiency. If you're a beginner embarking on your programming journey or aiming to learn Angular from scratch, I highly recommend starting with the comprehensive course by Santosh Yadav, available here.

https://www.youtube.com/embed/3qBXWUpoPHo

This course will provide a solid foundation in Angular. Additionally, explore the relevant sections such as components, directives, and more to delve deeper into specific areas of interest.

The sections in this list are thoughtfully organized, progressing from fundamental Angular elements to more intricate concepts. If you're an experienced programmer with a specific area in mind that you'd like to learn, feel free to jump straight to the materials within those sections.

Furthermore, consider this list a valuable library of resources you can recommend to your friends or mentor junior developers. It serves as a repository of materials suitable for various learning levels and can be a helpful tool for guiding others on their Angular learning journey.

Components

The top 5 materials about Angular components include a beginner's guide by Fireship, covering the basics of creating and styling components, and another video by Fireship that explores data-sharing techniques between components in Angular. Additionally, there is an official Angular video on standalone components, Joshua Morony's video discussing the importance of creating "DUMB" components, and an article by Angular University comparing smart and presentational components in Angular architecture, offering valuable insights for building maintainable Angular applications.

Video - Angular Components Beginner's Guide by Fireship 

Video - Sharing Data between Components in Angular by Fireship

Video - Getting Started with Standalone Components in Angular by Angular

Video - Are your Angular components DUMB enough? by Joshua Morony

Article - Angular Architecture - Smart Components vs Presentational Components by Angular

Attribute Directives

The top 5 materials about Attribute Directives include a Fireship video tutorial on building a hold-to-delete button using Angular directives. My favorite article by Tim Deschryver is about implementing custom directives to extend components you don't own. This article helps me understand how and when to use Angular Directives. I'm highly recommending a series of articles by Armen Vardanyan titled "Superpowers with Directives and Dependency Injection," which provides insights and techniques for leveraging the power of directives and dependency injection in Angular. These resources offer practical use cases and in-depth explanations to enhance your understanding and proficiency in working with attribute directives in Angular.

Video - Angular Directives - Build a Hold-to-Delete Button by Fireship

Article - Use Angular directives to extend components that you don't own by Tim Deschryver

Article - Superpowers with Directives and Dependency Injection:
Part 1 by Armen Vardanyan

Article - Superpowers with Directives and Dependency Injection:
Part 3 by Armen Vardanyan

Article - Superpowers with Directives and Dependency Injection:
Part 4 by Armen Vardanyan

Structural Directives

The top 5 materials about Structural Directives include a video by Nir Kaufman that demystifies the workings of structural directives such as *ngIf and *ngFor. The videos by Dmytro Mezhenskyi explain how to create custom structural directives in Angular and how NgTemplateOutlet works in Angular. Additionally, an article from series mentioned earlier by Armen Vardanyan shows how structural directive could be used to implement loader. Last but not least, an article by Thomas Laforge guides readers in creating a custom structural directive to manage permissions.

Video - Demystified Angular Directives by Nir Kaufman

Video - Structural Directives in Angular – How to Create Custom Directive by Dmytro Mezhenskyi

Video - NgTemplateOutlet in Angular - Everything You Have to Know (2022) by Dmytro Mezhenskyi

Article - Superpowers with Directives and Dependency Injection:
Part 2 by Armen Vardanyan

Article - Create a custom Structural Directive to manage permissions by Thomas Laforge

Directive Composition API - a New Feature of Angular 15

The Directive Composition API is my favorite feature of Angular 15. In this section, you can find the presentation with great examples of Kevin Kreuzer at Angular Tiny Conf 2022, an introduction video by Angular showcasing the new feature in Angular 15, video by Kristiyan Kostadinov providing an introduction to the Directive Composition API.

Additionally, there is a video by Fanis Prodromou explaining the Directive Composition API and an article by Netanel Basal demonstrating the creation of DRY conditional structural directives using the Directive Composition API.

Video - Angular Directive Composition | Kevin Kreuzer | Angular Tiny Conf Peret 2022 by Kevin Kreuzer

Video - Introducing the Directive Composition API in Angular v15 by Angular -
a new feature of Angular 15

Video - Directive Composition API Intro w/ Kristiyan Kostadinov by Kristiyan Kostadinov

Video - Learn What the Directive Composition API Is and How To Use It in Angular 15 by Fanis Prodromou

Article - Making DRY Conditional Structural Directives Using Angular Directive Composition API by Netanel Basal

Pipes

The pipes in Angular are one of the most simple things to learn, however even in this area, we could find interesting materials, for example, a video by Dmytro Mezhenskyi on performance optimization using pure pipes, a video by Joshua Morony demonstrating effective usage of the async pipe. Additionally, there is an article by Thomas Laforge providing a deep dive into Angular pipes, another article by Alain Chautard highlighting 3 Angular pipes you should know, and an article by Maria Zayed offering a complete guide to Angular pipes.

Video - Angular Performance Optimization using Pure Pipes (2020, Advanced) by Dmytro Mezhenskyi

Video - How to use the ASYNC PIPE effectively in Angular Templates by Joshua Morony

Article - Deep Dive into Angular Pipes by Thomas Laforge

Article - 3 Angular pipes you should know about by Alain Chautard

Article - Angular Pipes: Complete Guide by Maria Zayed

Services and Dependency Injection

Becoming an expert in the Dependency Injection mechanism can unlock incredible opportunities, although it can be challenging to grasp initially. The list starts with beginner-friendly material, a YouTube course by Dmytro Mezhenskyi, which provides a comprehensive understanding of implementing a website and DI in Angular. Additionally, a video by Fanis Prodromou discusses the inject method, a new feature introduced in Angular 14. The list concludes with two informative articles, one covering InjectionTokens and the other focusing on decorators utilized by DI. These resources collectively offer valuable insights and knowledge for mastering Dependency Injection in Angular.

Video - Understanding Angular 2 Services - Tutorial by Design Course

Course - Angular Dependency Injection – Understanding hierarchical injectors (2021) by Dmytro Mezhenskyi

Video - Learn How to Use the Inject Method in Angular 14 by Fanis Prodromou

Article - Stop being Scared of InjectionTokens by Thomas Laforge

Article - Angular & Dependency Injection: tricks with Decorators by Michele Stieven

Routing

In this section, you'll find a collection of informative videos. To begin, an excellent video from Fireship covers the foundational concepts of routing. Next, there's a unique presentation by Santosh Yadav at the NG-BE 2023 conference. The remaining three videos, all by Decoded Front-end, cover various topics, with the video on providers in Angular Route being particularly intriguing. This video discusses a new feature introduced in Angular 14 and can serve as a valuable supplement to the previous paragraph.

Video - Angular Router - The Basics and Beyond by Fireship

Video - Angular Router - Undiscovered Parts - Santosh Yadav - NG-BE 2023 by Santosh Yadav

Video - Multiple Router Outlets in Angular using Named Outlets (2021) by Dmytro Mezhenskyi

Video - Providers in Angular Route - New Feature in Angular 14 (2022) by Dmytro Mezhenskyi

Video - Angular 14 Router - Updating the Page Title (2022) by Dmytro Mezhenskyi

Guards

The topic of Guards is closely tied to Dependency Injection and routing. The initial three materials feature informative videos by Decoded Front-end, demonstrating the implementation of different guards. There's also a captivating and humorous presentation at NgConf, directed by the remarkable Shai Reznik, featuring renowned Angular experts portraying the implementation of authentication and authorization in Angular in an accessible manner. Furthermore, Thomas Laforge contributes two articles, one related to an article from the section on structural directives, offering insights on managing permissions.

Video - Router Guards Pt.1: CanActivate vs. CanActivateChild (2021) by Dmytro Mezhenskyi

Video - CanMatch Guard in Angular 14.1 Router (2022) by Dmytro Mezhenskyi

Video - CanLoad Guard in Angular Router & Preloading Strategies (2021) by Dmytro Mezhenskyi

Video - Angular Router Authentication and Authorization Real LIVE LIVE LIVE LIVE LIVE Demo - Shai Reznik by Shai Reznik

Article - Everything you need to know about route Guard in Angular by Thomas Laforge

Article - Create a route Guard to manage permissions by Thomas Laforge

Change Detection

Change detection is a challenging aspect even experienced developers find difficult to master. Future versions of Angular are expected to bring significant changes, such as signal-based components. However, it is still valuable to familiarize oneself with the current change detection mechanism, including understanding concepts like zones and exploring the implementation of zoneless applications. Change detection is intricately connected to optimizing performance, and the following materials will undoubtedly aid in gaining a better understanding of this topic.

Video - 4 Runtime Performance Optimizations by Minko Gechev

Video - WTF is "Zone.js" and is it making your app slow? by Joshua Morony

Article - Angular Change Detection Cheat Sheet Explained by Brecht Billiet

Article - Angular Change Detection OnPush or not? by Brecht Billiet

Article - Angular Performance: Optimize Angular Change Detection by Juri Strumpflohner

Article - From zone.js to zoneless Angular and back — how it all works by Max Koretskyi

Acknowledging the Incredible Contributors

I want to thank all the creators who made this list possible. Each of you creates awesome content that allows us to become better programmers. In the first part of the article, the creators of the materials are (in alphabetical order):

• Alain Chautard
• Angular
• Angular University
• Armen Vardanyan
• Brecht Billiet
• Design Course
• Dmytro Mezhenskyi
• Fireship
• Joshua Morony
• Juri Strumpflohner
• Kevin Kreuzer
• Kristiyan Kostadinov
• Max Koretskyi
• Minko Gechev
• Netanel Basal
• Nir Kaufman
• Santosh Yadav
• Shai Reznik
• Tim Deschryver
• Thomas Laforge

Their dedication and hard work deserve our appreciation and gratitude. I encourage everyone to follow these talented authors, engage with their content, and support their ongoing efforts to empower and educate Angular programmers.