← Back to blog
Learn Angular for free: resources you shouldn't miss (1/2)

Learn Angular for free: resources you shouldn't miss (1/2)

Author avatar
Pawel Kubiak
12 min read
  • #Angular
  • #Tutorials

Learn Angular for free: top online resources you shouldn't miss (1/2)

Discover free resources to learn Angular, from basic concepts to advanced topics, with expert recommendations and insights to help you master Angular.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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):

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.

What's Next?

This concludes the first part of our comprehensive Angular learning resource guide. We've covered the foundational concepts that every Angular developer should master - from components and directives to services, routing, and change detection.

In Part 2, we'll dive into more advanced topics including:

  • RxJS - Reactive programming patterns and operators
  • Forms - Template-driven and reactive forms mastery
  • State Management - NgRx, Akita, and other state solutions
  • Architecture - Building scalable Angular applications
  • Testing - Unit testing, integration testing, and E2E testing
  • Signals - Angular's new reactivity model
  • Performance - Advanced optimization techniques

Stay tuned for the second part where we'll explore these advanced concepts that will take your Angular expertise to the next level!

Conclusion

Learning Angular doesn't have to be overwhelming. With this curated list of free resources, you have access to high-quality content from some of the best Angular educators in the community. Whether you're just starting out or looking to deepen your understanding of specific concepts, these materials will guide you on your Angular journey.

Remember, the key to mastering Angular is consistent practice and hands-on coding. Use these resources as your guide, but make sure to build real projects and experiment with the concepts you learn.

Happy coding, and welcome to the Angular community!

Comments

Comments are disabled until analytics consent is granted.