Converting Observables to Signals in Angular: What You Need to Know | by Netanel Basal

Angular v16 comes with a new package named rxjs-interop, which introduces the toSignal function that converts an observable to a signal. In this article, we’ll take a closer look at this new feature and its usage.

What most devs don't get about declarative code (I didn't either) | by Joshua Morony

Imperative code generally looks easier and more intuitive, whilst declarative code looks confusing and hard to maintain. But this misses the true benefit of declarative code, and the organised structure it can bring to your applications.

Lazy loading services in Angular. What?! Yes, we can. | by Enea Jahollari

We’re used to lazy loading modules or components in Angular. But what about lazy loading services? Wait, what? Yes, we can. In this article, we will learn how to lazy load a service in Angular and it’s gotchas.

#ngCommunity

Angular Tiny Conf - Shemu 2023 | by Angular Tiny Conf

The Angular Tiny Conference is a quarterly one day online event aiming to share all of the amazing ways individuals and teams are using not only the latest and greatest features, but also to celebrate the hard won victories as a testimony to the longevity and health of the platform.

#ngPodcasts

S5E9 | RxJs and Signals Interoperability in Angular with Ben Lesh | by The Angular Plus Show

Signals are coming to Angular! So what does that mean for RxJs? In this episode we invite Ben Lesh to get his take on what the Signals story means for RxJs and Angular. How can Signals and RxJs work together, when one might be the better tool, and what bad patterns should developers watch out for as they begin to implement Signals in their code.

AMP 40: Vojtech Mašek on Exploring Advanced Lazy-Loading Strategies: Going Beyond the Angular Router | by Angular Master Podcast

I had an awesome time chatting with Vojtech Mašek, Head of Engineering at FlowUp, about advanced lazy-loading strategies in Angular! 💥

In this epic episode, we dive into:

• Angular Router limitations

• Best practices for advanced lazy-loading

• Optimization techniques for production-ready apps

• Trade-offs and future directions of lazy-loading in Angular

Don't miss out! Tune in now and let's level up our Angular skills together! 🚀

What’s next for Server Side Rendering in Angular | by Jessica Janiuk and Andrew Kushnir

In May of 2022, we shared Angular’s vision for the future, where we committed to investing in server side rendering and hydration. Angular has had support for server side rendering through Angular Universal, which originally came into being thanks to third party contributors. Eventually Angular Universal became the official SSR library for Angular.

Fast forward to 2023, and SSR is now an essential part of modern web applications and has been for a few years. We’ve conducted surveys and the community has let us know that server side rendering is the top area Angular users want improvements. As a result of your feedback and the changed landscape around SSR, we have made server side rendering a top priority in 2023.

#ngTutorials

Change Detection in Angular Pt.2 - The Role of ZoneJS (2023) | by Decoded Frontend (Dmytro Mezhenskyi)

Welcome back to my video series on Change Detection in Angular! In this second video, we'll examine the ZoneJS library and its role in the Change Detection process. You'll learn about the monkey-patching technique, how it looks in practice, and figure out how Angular uses ZoneJS under the hood.

How to setup reusable animations with Angular | by Catalin Ciubotaru

How to make your Angular apps prettier, more user-friendly, and overall more whimsical.

The story behind Angular Signals! | by Fatima Amzil

Days ago, Angular published Angular v16-next version with the big upcoming feature, which is signals as a developer preview!

Signal brings a big change to the whole framework and will, in my opinion, make Angular more popular in the upcoming years as this feature will fix a historic limitation of Angular, which is Zone.js.

Key RxJS Operators Every Angular Developer Should Know | by Dany Paredes

Top RxJS Operators I Frequently Use Examples Included

#ngPodcasts

To SSR or SPA, that is the question! | by AngularAir

Sander Elias will explain the differences between SSR and SSG. He will also demonstrate how SSR is even possible in Angular, what that looks like, and when you should utilize it. Alyssa also plans on bothering Sander at a higher level about how the JS community is slowly swinging back towards SSR (over SPA) and how we all feel about this upcoming development.

AMP 39: Manfred Steyer on Modern Architectures with Angular Latest Innovations | by Angular Master Podcast

Join us as we chat with the legendary Manfred Steyer, an awesome speaker, trainer, consultant, and author, all about modern architectures and Angular's freshest innovations! 🚀

In this dope episode, Manfred Steyer and I chop it up about:

1. The game-changing innovations in Angular-based architectures like standalone components, standalone APIs, functional services (e.g., Guards, Resolver, Interceptors), and router enhancements.

2. Organizing an Angular app's structure without using NgModules.

3. The lowdown on the Angular Sheriff's role.

4. The 411 on standalone APIs and the migration process.

5. Everything you need to know about routing and lazy loading in Angular.

6. The key aspects of functional services in Angular.

7. The impact of signals on the performance and functioning of the described elements.

Building Games and Q/A with the Angular Team | April 2023 | #ngGames | by Angular

Angular Community, join Jeremy Elbourn and Mark Thompson as they answer questions and have some fun!

#ngTutorials

The end of Angular's "service with a subject" approach? | by Joshua Morony

A "service with a subject" is one of Angular's most popular state management approaches, but what is this going to look like when signals become available?

Demystifying the push & pull nature of Angular Signals | by Tomas Trajan

Let's take a deep dive into Angular signals and how they can be understood using the primitive push & pull concepts to make sense of all their behaviors from setting a value all the way to effects and laziness!

How to get and use ng-template, ng-container and ng-content | by Dany Paredes

Using ng-template, ng-container, and ng-content with examples

Signals: what this means for NgRx | by Armen Vardanyan

On April 4th, 2023, the Angular team officially launched an RFC for the new reactive primitive, signals, that will arrive as a developer preview in Angular v16. This could mean a beginning of a new era of Angular development, less dependence on RxJS, more granular change detection, and maybe even zoneless applications.

But what this means for us, NgRx enthusiasts? Let's find out.

#ngPodcasts

Mobile Development with Angular, Capacitor, and Ionic - AiA 378 | by Adventures in Angular

Simon Grimm is a Creator, Indie Maker & Solopreneur. He is currently working at The Ionic Academy. He joins the show to talk about Ionic and building native mobile apps with Angular. He explains all about "Capacitor" and how it contributes to your web application.

Signals in Angular – How to Write More Reactive Code | by Deborah Kurata

An exciting new feature is coming to Angular: signals! Signals provide a new way for our code to tell our templates (and other code) that our data has changed. This improves Angular's change detection, which also improves performance, and makes our code more reactive.

Change Detection in Angular - Pt.1 View Checking | by Decoded Frontend (Dmytro Mezhenskyi)

This video is the first one in a video series that describes the Change Detection process in Angular and shows how everything works under the hood. In this video, we will focus more on the View Checking process and learn how Angular synchronizes the component views with corresponding data models (classes). I hope you will learn a lot from this video.

Superpowers with Directives and Dependency Injection: Part 5 | by Armen Vardanyan

Here we are, part 5 of our series dedicated to Angular's directives! In previous articles we have already explored various applications of directives and dependency injection. This time around we shall see how we can use directives to help components communicate on the most hard-to-reuse level - the template.

So, let's get started with today's use case.

Getting to Know the takeUntilDestroyed Operator in Angular | by Netanel Basal

Angular v16 introduces a new feature in the @angular/core/rxjs-interop entry that includes three new operators: fromSignal, fromObservable, and takeUntilDestroyed. These operators are designed to enhance the functionality of RxJS in Angular applications.

The takeUntilDestroyed operator allows developers to automatically complete an observable when the calling context (which can be a component, directive, service, or a pipe) is destroyed. This helps prevent memory leaks and ensures that resources are released properly.

Angular: The Framework of Past, Present, and Future | by Santosh Yadav

I started using Angular in 2017 when version 4 was released. And I have seen this framework growing since then. In this blog, let's see why Angular is a framework of Past, Present, and Future.

Bind Route Info to Component Inputs (New Router feature) | by Enea Jahollari

When building applications with Angular, most of the time we use the Router to render different pages for different urls.

And based on the url we also load the data based on its path parameters or query parameters.

In the latest version of Angular v16, we will get a new feature that will simplify the process of retrieving route information in the component and make it way easier.

Why I decided to switch to the inject() function in Angular | by Joshua Morony

Angular 14 gave us the ability to use the inject() function more generally in our projects, including replacing constructor based dependency injection. But is it a good idea to switch to it?

Mountain View and San Francisco Angular March Virtual Meetup

Reactive Angular. At its core | by Pawel Kozlowski at NGBE 2023

This year, the Angular team embarks on the journey of revisiting the change detection algorithm and baking-in reactive primitives into the framework. This talk is an occasion to re-trace our thinking, motivation behind the planned change and explorations done so far.

Angular Signals - Taking Reactivity to New Heights 🚀 | by Muhammad Ahsan Ayaz

Hey there Angular enthusiasts! Are you ready to level up your reactive game? Today, we'll dive into Angular Signals, a fresh take on reactive programming that'll send your apps soaring through the skies of performance and scalability! 🦸‍♀️🦸‍♂️

Angular Signals are here to save the day, simplifying how we manage reactive contexts and dependencies, and making our code cleaner and more efficient. In this post, we'll explore Angular Signals, learn how to use them, and might even crack a few jokes along the way! 🃏

Using the Inject Function in Angular 15 | by Dany Paredes

Since Angular 14/15, there has been an alternative way to inject dependencies in our Angular applications.

I will show two cases to use the inject function with Angular 14/15.

Why didn't the Angular team just use RxJS instead of Signals? | by Joshua Morony

Angular is introducing a new reactive primitive to the framework called "signals", which have been a popular reactive implementation in other frameworks. But, this begs the question: why didn't they just use BehaviorSubject which is already included in RxJS? This video explores that question.

Announcing @ngneat/cmdk — Fast, composable, unstyled command menu for Angular. | by Dharmen Shah

A few weeks ago I and Netanel Basal came up with an idea to create cmdk like a library for the Angular community.

#ngPodcasts

S5E5 Framework Building with Ryan Carniato | by The Angular Plus Show

Signals are coming to Angular, so who better to talk about it than Ryan Carniato the project founder of Solid Js. In this episode we talk about what drives people to create new frameworks and how collaboration and learning from past iterations is a vital part of the process. We talk about fine grained reactivity which is at the core of Solid Js and how Angular might leverage some of the features of SolidJs to improve the reactivity story for Angular.

First look at Signals in Angular | by Decoded Frontend (Dmytro Mezhenskyi)

The very first prototype of Signals was recently merged into the main Angular branch and available in Developer Preview Mode since Angular version 16.next.1. In this video, I will talk a little bit about the motivation to have reactive primitives in the core of the framework and how we as developers can benefit from it. I hope it will be interesting for you. Please share this video if you like it.

Angular Testing Tips: Ng-Mocks | by Bobby Galli

Write Better Tests Faster With Ng-Mocks and Jasmine-Auto-Spies

Mastering Angular: Repository and File Structure | by OZ

In this article, I’ll show you how to create and organize a repository for your Angular application in the most optimal way.

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

In the previous post we took a look at how we can use dependency injection + directives to both simplify our templates and achieve reusability. In this one, we are going to explore structural directives and how we can make components and directives interoperate and reduce clutter in our .html files even further.

Let's build a loader component!

#ngPodcasts

Angular Structural Directives and Their Microsyntax - AiA 374 | by Adventures in Angular

Chuck and Lucas join this week's panelist episode discussing Angular Structural Directives and Their Microsyntax. They kick us off as Lucas explains the concept of Structural directives, and how developers might use them to their advantage.

S5 E3 - Welcome to the ng Community with Jason Warner | by The Angular Plus Show

In this episode we welcome Jason Warner, an ngChampion, co-organizer of the Angular Meet Up, and Twitch Streamer! We talk about the Angular Community, how to get involved, and what it takes to contribute.

#ngWeb

Announcing TypeScript 5.0 | by Daniel Rosenwasser

Today we’re excited to announce the release of TypeScript 5.0!

This release brings many new features, while aiming to make TypeScript smaller, simpler, and faster. We’ve implemented the new decorators standard, added functionality to better support ESM projects in Node and bundlers, provided new ways for library authors to control generic inference, expanded our JSDoc functionality, simplified configuration, and made many other improvements.

#ngTutorials

Angular for Junior Developers: Dangers and Treasures of RxJS | by OZ

In this article, I’ll show you how to avoid known dangerous pitfalls of RxJS, and will share some useful snippets.

Angular Forms: Choosing Between Reactive and Template Driven Forms | by Dany Paredes

When we start to build an application in Angular and need to create forms, we must pick one of the two flavors: "Reactive" or "Template Forms".

For beginners, Template Forms are natural and appear less complex for new joiners, but some developers may try to convince you that "If you want to have true control then you must use Reactive Forms".

Do I believe the most effective method for determining which option is superior is by solving the same problem with both alternatives?

I used Angular's signals to build an actual app | by Joshua Morony

I refactored one of my existing Angular applications that relied heavily on RxJS and observables, to signals. This made me change my opinion on what I think is the likely fate of RxJS integration in Angular.

Form Validation Done Right | by Ward Bell

Many folks (incorrectly) try to argue that validation is a weakness of Template Driven forms. I will show that Angular validation, as taught, is a weakness of Reactive forms as well. What we need is a model-driven validation library that integrates with both modalities, one that is powerful and easy to use in the scenarios you wish you could handle today. Of course I'll show you an open-source validation library that we wrote and have used at our biggest Angular client for the last 3 years.

Functional router guards in Angular 15 open the door to happier code | by Kate Sky

How to seamlessly migrate deprecated class guards into functional ones

Angular 🚦 Signals 📡 (The future of Angular) | by Zied Zayani

Why and How Using Angular Signals

Getting Started w/Angular Reactivity: Tour of Heroes | by Brandon Roberts

Let's take a look through everyone's favorite Angular demo application, the Tour of Heroes, but with a fresh look using Signals for Reactivity.

#ngPodcasts

How to Succeed in Content Creation - AiA 373 | by Adventures in Angular

Chuck and Lucas join this week's panelist episode as they talk about "content creation". They start off as they dive into different ways of monetizing your content. Additionally, they talk about approaches on how to capture the interest of the audience to get them to subscribe to your courses. 

#ngCommunity

Angular LTS support starting with Nx 15.7 | by Zack

Each major version of the Angular framework goes with a major version of the Angular CLI. Similarly, this was also the case for Nx. Starting with 15.7 we detach Angular and Nx, allowing Nx to support all the Angular LTS versions.

Write better tests without Router mocks/stubs | by Andrew Scott

The RouterTestingHarness was released in Angular 15.2 to streamline tests for components and services that depend on the Router.

Let’s cover a test scenario and compare the mock/stub and spy approach to what the test looks like with new RouterTestingHarness.

Angular for Junior Developers: Mapping the Observables | by OZ

RxJS has a long list of operators. Some of them are extremely powerful, but not so easy to learn from the first attempt: they allow you to make nested observables in your observables.

In every example of this article, we’ll use a “main observable” and will add nested observables.

Design Patterns in Angular Source Code - Strategy Design Pattern | by Decoded Frontend (Dmytro Mezhenskyi)

Today I continue a video series where I try to reveal classical GoF design patterns in Angular source code. In the previous video we learned how Design Pattern Bridge is used to Design the Angular forms library and today I am going to talk about the Strategy Design pattern and how it was used to design the ASYNC pipe in Angular. Enjoy the video and I hope you will learn something new today.

Angular is about to get its most IMPORTANT change in a long time... | by Joshua Morony

Angular just released a preview of a prototype for their own implementation of signals as a new reactive primitive for the framework. This will help modernise the framework, improve change detection, and provide a more consolidated learning journey for new Angular developers.

Angular standalone components and Angular Testing Library make component tests easier | by Tim Deschryver

Standalone components give you a better foundation to build on, as your Angular component becomes less affected by its internals. It doesn't matter if the component has its own template, or if it's using child components. This makes your test cases less brittle than before with Angular Modules.

Revealing the TypeScript Magic behind NgRx APIs | by Brandon Roberts

Ever wondered how NgRx integrates type-safety into its APIs? Marko from the NgRx team shows advanced TypeScript usage within the framework.

Getting to Know the DestroyRef Provider in Angular | by Netanel Basal

Angular v16 has introduced a new provider called DestroyRef, which allows for registering destroy callbacks for a specific lifecycle scope. This feature is applicable to components, directives, pipes, embedded views, and instances of EnvironmentInjector.

Complete Guide to Angular Lifecycle Hooks | by Ion Prodan

In this guide, we will take a dive into the Angular component lifecycle hooks and explore how you can use them to manage the application better.

#ngPodcasts

Functional Programming in TypeScript - AiA 371| by Adventures in Angular

Lucas Paganini is the CEO of unvoid.com. He takes on this week's solo episode to talk about a library called, "fp-ts". It gives developers access to popular patterns and secure abstractions from typed functional languages in Typescript. He discusses some of the issues that the library resolves.

#ngTutorials

I changed my mind. Angular needs a reactive primitive | by Mike Pearson

Angular developers have waited 7 years for better integration with RxJS, but this doesn't seem to be happening. Instead, the Angular team wants its own reactive primitive that can't even handle asynchronous reactivity.

This made me angry at first, but after a lot of thinking and talking with other developers, I now believe that a reactive primitive could provide an overall better developer experience than just better RxJS support, even for the most diehard RxJS fans.

Angular Material components testing | by Kevin Kreuzer

How and why to use Angular Materials component harness to write reliable, stable and readable component tests

Deep dive into the OnPush change detection strategy in Angular | by Max Koretskyi

Angular implements two strategies to control change detection behavior on the level of individual components. Let’s now explore those strategies in greater detail.

I Don't Need a State Manager in Angular, or am I just delaying his arrival? | by Dany Paredes

We have to build an app with the following sections the home, profile, orders, and payment.

• Each section must allow saving data in the state.

• The home must render data from each section.

• Each Order discount from the balance.

We will use Rxjs Behavior subject to keep state and some rxjs operators to simplify and combine some operators.

#ngPodcasts

Angular Setup And Workflow - AiA 370 | by Adventures in Angular

Chuck, Lucas, and Subrat join this panelist episode to talk about setup and workflow for working in angular apps. They begin by discussing their thoughts on Visual Studio Code. Additionally, they tackle its features and VS code extensions that make working with angular apps easier.

#ngCommunity

Reactivity with Signals is coming to Angular ... | by Brandon Roberts

After many months of internal discussion and prototyping, the Angular Team has begun an open discussion about bringing a reactive primitive to the core framework. Angular Team member Alex Rickabaugh joins me to discuss the upcoming RFCs and details!

What's new in Nx 15.7? | by Juri Strumpflohner

Another feature packed-release that introduces first-class Node backend development support, Lockfile parsing & pruning (🔥 for Docker), a more flexible and customizable Webpack config in React apps, Storybook v7 beta support, and improvements to Angular. Have a look and let us know what you like the most :)

Building Games and Q/A with the Angular Team | February 2023 | #ngGames | by Angular

Angular Community, join Jeremy Elbourn and Mark Thompson as they answer questions and have some fun! We'll answer questions and most of all, try to build a game!

#ngTutorials

Get easy access to Angular route and query parameters with zod | by Tim Deschryver

To get access to route and query parameters in Angular, you need to manually parse the ActivatedRoute instance. While this is not hard, it can quickly bloat your codebase. Until Angular provides a better and typesafe way to access route and query parameters, you can use zod to make it easier.

The trick to make any IMPERATIVE code DECLARATIVE instantly | by Joshua Morony

We don't have control over what 3rd party libraries do, and sometimes those libraries are going to have an imperative API. Here's a little trick you can use to keep your codebase declarative, but still utilise those imperative APIs.

Internal Architecture of Angular Forms - GoF Design Pattern in Action | by Decoded Frontend (Dmytro Mezhenskyi)

Since I started investigating the source code of Angular, I found a few classical design patterns used to implement some framework features. In this video, I will share with you one of them used to design the Angular Forms package. In the first part of the video, you will learn what a Bridge design pattern is and how it was used in Angular Forms making them so flexible. I hope you will learn something new from this video and if you find this helpful video please share it with your colleagues.

Angular CLI: Command Line Interface Guide | by Ion Prodan

Discover the most commonly used options for generating new components and services, and explore the features that make Angular CLI a must-have for Angular projects.

#ngPodcasts

Becoming a Google Developer Expert in Angular - AiA 369 | by Adventures in Angular

Alain Chautard is a certified Google Developer in Angular and he works as an individual consultant for Angular projects. He joins the show to discuss his career as an Angular expert and Angular mentor. He talks about his projects and his blog. He offers advice on how to become a Google Developer Expert and discusses his experience in the field.

The most compelling reason to learn Angular in 2023 | by Joshua Morony

It turns out that Angular might be a little more popular than we all think, and the job opportunities for Angular might also be going unnoticed. This video presents some compelling reasons for why you might want to learn Angular in 2023.

I tried the Angular Standalone migration, and here is the result | by Tim Deschryver

Last week Minko Gechev tweeted about an Angular schematic to automate the migration from @NgModules to the standalone API. Of course, I had to try out this migration myself.

You can now put all of your NgRx State where?! | by Brandon Roberts

With NgRx v15.2, functional Effects were introduced, which means you can create Effects without using classes. Where will you put your NgRx state now?

Stop being scared of InjectionTokens | by Thomas Laforge

Injection Tokens seem to intimidate many developers. We don’t understand what they are, how to use them, and their purpose.

To overcome the fear of this feature, it is important to have a basic understanding of how Angular’s Dependency Injection works. (A separate article will dive deeper into the inner workings of Angular’s DI system for a full understanding).

RxJS Best Practices Aren't Always Black and White | by Deborah Kurata

Some RxJS best practices are universal, like avoiding unsubscribe hell and nested subscriptions. But some are less black and white. Should you use a mergeMap, concatMap, or swichMap? When does it make sense to use a forkJoin vs combineLatest vs zip? And how can you best set up your RxJS pipeline to react to user actions. We'll look at these and other suggestions for successfully working with RxJS.

Angular Development Simplified with Subjects and Behavior Subjects | by Gourav Kajal

Understand the benefits, use cases, and best practices for using subjects and behavior subjects in Angular

#ngPodcasts

Tailwind CSS - AiA 368 | by Adventures in Angular

Chuck, Lucas, and Subrat join this panelist episode to talk about Tailwind CSS. They begin by discussing their perspectives and knowledge gained by using Tailwind. They tackle its benefits and impact on your applications. 

#ngCommunity

Angular Standalone Applications with Nx | by Zack "Supaship" DeRxJS

Learn how to take advantage of Nx in Standalone Angular Applications

Leveraging @angular 15 host directives | by Denis Severin

Not while ago, Angular team released a stable 15 version with few neat features, such as host directives.
In this article I will try to explain how to leverage the directive composition approach and move from old class-inheritance to a composition approach.

Why you actually need RxJS (even if you don't realise it) | by Joshua Morony

RxJS provides a way to explicitly handle asynchronous reactivity in your applications. This video explains what that means exactly, the difference to synchronous reactivity, and why the out of the box reactivity solutions Svelte and SolidJS might not be enough.

Common Pitfalls in Angular Component Testing | by Dany Paredes

This article focuses on the typical problems or issues to face when we start adding testing in a single component with dependencies like services and child components.

Component-Less and Empty-Path Routes in Angular (2023) | by Decoded Frontend (Dmytro Mezhenskyi)

n this video, you will learn what component-less and empty-path routes in #angular are. You will see some use cases when this pattern might be helpful and help you to make your code base more reliable and flexible. I hope you will learn something new today and if so, please share this video with your colleagues and friends.

Angular & tRPC | by Kevin Kreuzer

Maximum type safety across the entire stack. How to setup a fullstack app with Angular and tRPC.

Change detection and component trees in Angular applications | by Max Koretskyi

We can think of an Angular application as a tree of components. Under the hood, for components Angular uses a low-level abstraction called View. In this article we'll take a detailed look how component tree corresponds to a tree of views

#ngPodcasts

Latest Versions Of NgRx v14 & v15 - AiA 367 | by Adventures in Angular

Armen Vardanyan is a Google Developer Expert for Angular, and Frontend Team Lead at Volo. He returns to the show to discuss his article, "Using NgRx Packages with Standalone Angular Features". He talks about how to use NgRx packages with standalone features.

#ngCommunity

Meetup: The Future of Angular | by Manfred Steyer

#ngWeb

Announcing TypeScript 5.0 Beta | by Daniel Rosenwasser

Armen Vardanyan is a Google Developer Expert for Angular, and Frontend Team Lead at Volo. He returns to the show to discuss his article, "Using NgRx Packages with Standalone Angular Features". He talks about how to use NgRx packages with standalone features.

#ngTutorials

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

Routing is a significant aspect of any SPA application, and protecting these routes is often necessary. We may want to guard our routes for permission access or to prevent users from exiting a route by mistake if a form has not been submitted correctly. Angular provides a set of built-in guards that can be easily used for various use cases. In this article, I will demonstrate and explain each of the built-in guards provided and show you how to use them with some common examples.

Improve page performance and LCP with NgOptimizedImage | by Maciej Wojcik

Explore mechanisms of NgOptimizedImage directive to improve overall page performance, targeting especially the Largest Contentful Paint (LCP) metric from Core Web Vitals. Enhance pages, make the best user experience and improve the web.

Mastering Angular Structural Directives - It’s all about the context | by Robin Goetz

Structural directives in Angular are one of the framework’s most powerful tools. We encounter them early in our Angular journeys. They are integral to developing even the most basic Angular applications.

The best of Angular: a collection of my favorite resources of 2022 | by Gergely Szerovay

Check out these resources to learn about what happened in the world of Angular last year.

Angular developers can learn Svelte so fast... | by Joshua Morony

It turns out that a lot of the concepts and APIs of Angular and SvelteKit are quite similar from a developer perspective, which means the leap for Angular developers to learn SvelteKit is reasonably small. This video takes a look at some of the similarities.

Async pipe is not pure | by Enea Jahollari

Yes, that’s normal! Why? Because of how Angular does change detection under the hood!

Angular & tRPC | by Kevin Kreuzer

Do you want maximum type safety accross the entire stack? Let's talk about Angular & tRPC.

#ngPodcasts

Angular's Custom Form Components - AiA 366 | by Adventures in Angular

Charles, Lucas, and Subrat take on this week's panelist episode as they tackle all about Custom Form Components. Lucas starts off the episode by explaining different methods on how you can effortlessly and with ease create custom form components. Subrat also shares his own insight on some other techniques for creating forms depending on how complex your form is. Moreover, they discuss integrating custom form components with Angular forms API.

#ngCommunity

Angular and the State of JavaScript 2022 is ... complicated | by Brandon Roberts

The State of JS 2022 is out and Angular is still a polarizing option in the front-end framework ecosystem.

#ngQuote

#ngTutorials

Demystifying Angular Two Way Binding (2023) | by Decoded Frontend (Dmytro Mezhenskyi)

In this video, I will try to demystify Two way binding in Angular, so you will get a solid understanding of how it is really working. At the end of the video, you will be able to create two-way data binding also for any property of your custom components. I hope you will learn something new from this video and if so, please don't hesitate to share this video with your colleagues and friends.

Rendering cycle in Angular applications — browser, angular and zone.js interaction | by Max Koretskyi

Modern web stack involves lots of moving parts. Let's take a look at all the actors and their functions in a typical Angular application.

Jest ESM - Total Guide To More Than 100% Faster Testing For Angular | by Tomas Trajan

Let's learn how to speed up our Angular Jest tests by more than 100% by switching to Jest ESM (a notoriously problematic migration) and how to solve all the troublesome issues that tend to pop up along the way!

The easier way to code Angular apps | by Joshua Morony

Ever hear about "declarative" coding or "reactive" coding? These are concepts I struggled to properly understand and appreciate for a long time. This video aims to give a brief explanation that gets right to the heart of what this is all about and why it is beneficial.

Angular ESLint Rules for Accessible HTML Content | by Sandi K Barr

Content accessibility for built-in HTML elements is the third and final category in this series on Angular ESLint accessibility rules. These rules validate several HTML attributes that developers commonly overlook regarding accessibility. They check for alt text on images, accessible content in buttons, links, and headings, and proper form labels and table header associations. Angular ESLint accessibility rules provide immediate guidance on accessibility best practices right in the code, resulting in more accessible and user-friendly Angular applications.

#ngPodcasts

Writing Clean Http Service Methods With Walid Bouguima - AiA 365 | by Adventures in Angular

Walid Bouguima is a Software Engineer at Hilti Group. He joins the show with Chuck, Lucas, and Subrat to discuss his article, " Angular Clean Http Service Methods: Handle Your Backend Communication With Ease". He explains his goals and reasons why he created this method and what advantages it may bring to developers in the Angular community. Moreover, the panel shares their own perspective and some tips about Walid's article. 

#ngCommunity

Moving Into Angular from the Backend with Perko & Rivas | Roadmap to Learning Angular E7 | ng-conf

How does learning Angular compare to learning backend technologies? Is it easier to learn frontend concepts once you already know the backend? Chris Perko & Giovanni Rivas, co-organizers of the Angular Community Meetup, share their experiences in this episode coming to Angular from jobs on the backend. They share insights, tips, and advice for making the transition but also for learning Angular in general.

#ngWeb

The State of JS 2022

The 2022 edition of the annual survey about the latest trends in the JavaScript ecosystem.

Storybook Ecosystem CI | by Michael Shilman

Upgrading npm packages can be a bit like crossing a minefield. Even a tiny patch upgrade can blow up your entire stack. Unfortunately, this kind of issue is common in modern open-source software. Packages often break due to bugs in their code, bugs in their dependencies, or incompatible transitive dependency upgrades.

As maintainers of Storybook—one of the most popular UI development tools—we're all too familiar with the terrors of package upgrades. That's why we've created Storybook Ecosystem CI, an early warning system to help protect our users from this chaotic environment.

#ngQuote

Playing Games and Q/A with the Angular Team | January 2022 | #ngGames

Angular Community, join Jeremy and the "People's Champ" Jessica Janiuk as they kick off a year of gaming in Angular in 2023!

#ngTutorials

Overview of Angular’s Change Detection operations in Ivy | by Max Koretskyi

I set out to make a video explaining the specifics of how dependency injection works in Angular. But then I started to wonder if ChatGPT could do a better job at explaining it than me. So, now this video is a competition between myself (a Google Developer Expert for Angular) and ChatGPT.

Have You Used ngTemplateOutletInjector Yet? | by Chau Tran

This lightning talk will introduce you to ngTemplateOutletInjector, a new Input on the ngTemplateOutlet directive. Community expert, Chau Tran will quickly show a use-case with Dependency Injection, the limitation of ContentProjection, and how ngTemplateOutletInjector helps.

Can AI explain the most challenging Angular concept? | by Joshua Morony

I set out to make a video explaining the specifics of how dependency injection works in Angular. But then I started to wonder if ChatGPT could do a better job at explaining it than me. So, now this video is a competition between myself (a Google Developer Expert for Angular) and ChatGPT.

#ngPodcasts

Standalone Components With Marek Panti - AiA 364 | by Adventures in Angular

Marek Panti is an Angular developer at UNIQA Insurance Group AG. He joins the panel to talk about his article, "Angular Standalone Components". Standalone components simplify the process of creating Angular applications. He explains how he was able to come up with the idea for his article.

#ngCommunity

Dos & Don'ts On the Job As A Programmer | Gechev, Saling, Bell, Newsom | Angular Community Meetup

Having a successful career isn't only about your programming skills. A lot of it depends on your day-to-day habits & decisions as well. But what are those habits? Which ones boost your career? Which ones hinder you?

Get answers to all these questions and more as Brooke Avery & Chris Perko from the Angular Community Meetup discuss the topic with Angular Product Lead Minko Gechev, GitHub Engineer Team Lead Liz Saling, Ward Bell, President of IdeaBlade, and Lara Newsom, Software Engineering Technical Lead from Cisco.

Incremental Builds with the Nx Cache | by Stefan Haas

Once your application is growing, the build times and testing times are growing as well. This affects all of the developers locally running the application on their machine but also affects the build pipeline. It is not rare to see build/test times of more than 10 minutes and even more. In order to improve the developer experience and reduce the time the build pipeline takes, you should consider going for an incremental build and remote caching. There are multiple ways of achieving this goal, but easiest solution is to use the Nx Cloud, which I will introduce in this article.

Wrap any command with Nx Run-Commands | by Juri Strumpflohner

The built-in "run-command" executor can be powerful to add custom commands to existing "project.json" files. And it even got simpler in 15.3.

#ngWeb

Future of Storybook in 2023 | by Michael Shilman

Storybook is the industry-standard UI development workshop for components and pages. It's used by BBC, Netflix, Twitter, and thousands more teams. Our goal is to make the tools and techniques used by the best frontend teams available to everyone.

WTF is a HOT observable? | by Joshua Morony

There seems to be some kind of important difference between "hot" and "cold" observables, but trying to grasp what that difference is can be confusing. This video aims to make hot observables easier to understand.

Discover the power of @Ngrx/component-store to create a Local Component State | by Thomas Laforge

The fifth challenge will teach you some good practices for architecture and creating scalable and readable components using Angular by refactoring a small Todo Application step by step. You will learn how to create reactive code with good separation of concerns and a great User and Developer eXperience. We will use and discover @Ngrx/component-store to create our local Component Store as well as @tomalaforge/ngrx-callstate-store to handle our loading and error states.

Component-First Architecture with Angular Standalone Components | by Colum Ferry at NG-DE 2022

Angular is releasing Standalone Components, and with that we need a new architecture approach. Component-First Architecture is where our components define and drive the user experience of our application. Anything that impacts the user’s experience should be handled via our components, as it is our components that the user interacts with. In this talk, I’ll describe what Component-First Architecture is, and how to implement it in Angular with the Angular Standalone Components

switchMap vs concatMap vs mergeMap ... Oh My! | by Deborah Kurata

Angular/RxJS Quick Take: Understand the difference between switchMap, concatmap, and mergeMap

NgTemplateOutlet in Angular - Everything You Have to Know (2022) | by Decoded Frontend (Dmytro Mezhenskyi)

This video will teach you how to utilize an Angular ngTemplateOutlet directive to create reusable components with customizable and extensible views. You will learn everything you have to know about this directive. We will cover all available features like creating views from templates, providing template context data, and controlling the proper Angular Dependency Injection flow. So if you watch the video until the end, you can be sure that you will be able to handle 80% of all possible use cases related to component view customization.

#ngWeb

An HTML-first Mental Model | by Noam Rosenthal

Writing a fast vanilla-based movies app, how to make it fast while maintaining a nice-ish framework-less developer experience?

#ngCommunity

Nx 2022 Year in Review | by Zack "Supaship" DeRxJS

Nx is picking up speed in 2022, and accelerating into the new year!

#ngQuote

Does Angular Support Generic Component Types? | by Stephen Cooper

You may be familiar with writing Typescript Generics like Grid<IRowData> but how does this work for Angular components? We can't provide generic types to our template selectors so how does Angular support generic components?

In this article we will explain how Angular does it, but also how you can help the Angular Compiler be more accurate in complex components.

Mastering Injectable Services: A Comprehensive Guide | by Thomas Laforge

In Angular, the @Injectable decorator is used to create services that can be provided to other components through Angular’s dependency injection system. These services can then inject other services provided by the dependency injection system (DI) inside their classes.

To declare a service injectable, we simply add the decorator on top of our class:

@Injectable()
class MyService {
}

However, just adding the @Injectable decorator does not automatically provide the service in Angular's DI system. Let's explore the various ways in which services can be provided in Angular.

Using Angular Testing Library with Test Harnesses | by Tim Deschryver

The test cases you write for your own components are mostly the simple ones to write because you know the code base and you're in control of the component's HTML structure. If it's needed you can always change the HTML structure in your template to make it easier to query the element that is needed in a test.

But, what if you want to write tests for a third-party component? Or, for a component that another team wrote? In these cases, you don't have control over the HTML structure and you can't make changes to it. This can make it harder to write tests, and it definitely makes it harder to write maintainable tests.

Even for the components that live in your code base, it can be tricky to query the correct element while keeping your test readable and resilient to changes.

In this post, we go over the combination of Angular Testing Library and Test Harnesses to make writing tests easier and enjoyable.

How To Implement Angular Micro Frontends With Module Federation and Nx | by Christian Lydemann

In this video, I will cover how to implement micro frontends with module federations and Nx

Component Testing w/Playwright and Angular [Live Coding] | by Brandon Roberts

Working on an example application that uses Playwright for Component Testing with Analog's Vite Plugin

Now AI is DESIGNING my entire app in minutes... | by Joshua Morony

The Midjourney AI can generate some pretty impressive mobile app user interface concepts. In this video, we see what is involved in taking one of those concepts and converting it into an actual application.

How to add Storybook and Chromatic to your Angular monorepo | by Catalin Ciubotaru

Storybook is an amazing tool, and you should use it if you’re thinking about starting a reusable component library for your project(s).

#ngPodcasts

State Management with RxJS - AiA 363 | by Adventures in Angular

Amal Ayyash is a UX Designer and Front-end Developer. and her current main focus is Angular. She joins Chuck and Lucas to discuss her article, “RxJS-based state management in Angular”. She starts the show off by explaining the reason why she chose to use RxJS to create state management instead of using NgRX. She also gives advice to other developers, encouraging them to use their own frameworks or codes rather than third-party solutions.

S4 E17 - Accessibility and Enterprise Applications with Sandi Barr | by The Angular Plus Show

It is too easy to forget about application accessibility which causes very real problems for every day users. Join us as we talk with Sandi Barr about steps we can take to make accessibility an integral part of not only our application but also our CICD pipelines.

#ngCommunity

Nx 15.4 is out! Here's all you need to know | by Zack "Supaship" DeRxJS

Nx is at it again, with another monster release 2 weeks after the MASSIVE 15.3 launch. Here's everything you need to know about what's new for Nx 15.4, in under 10 minutes!

#ngQuote

Playing Games and Q/A with the Angular Team | December 2022 | #ngGames

Angular Community your favorite game stream hosts Mark and Jeremy are back for an end-of-year stream featuring the “People’s Champ” Jessica Janiuk!

We’ll take a few moments to reflect on the stream for 2022, think about how we can grow the stream in 2023 and most of all, play some games!

www.youtube.com

#ngTutorials

Angular Builders – Creating Custom Builder from Scratch (Advanced, 2022) | by Decoded Frontend (Dmytro Mezhenskyi) 🇺🇦

Angular builders are nodejs scripts executed by Angular CLI and perform different tasks like application build, serving the app, or running a different kinds of tests. You can create your own builders that can perform some particular tasks for your Angular application and in this tutorial, you will learn how to do that. At the end of this video, we will build a custom builder that patches the application build information in a dedicated JSON file, the JSON file name can be configured by providing custom options for the builder, and additionally, you will learn how to schedule another target from your custom builder.

www.youtube.com

Ready to delete all your constructors in Angular? | by Brandon Roberts

www.youtube.com

Debug Angular Apps Easily Using Angular DevTools | by Nethmi Wijesinghe

This article will go through Angular DevTools in detail and provide step-by-step guidance on making the best of it.

www.syncfusion.com

#ngPodcasts

S4 E16 - Deep Dive into Angular Version 15 with Emma Twersky | by The Angular Plus Show

It’s always a pleasure to welcome Emma Twersky to the podcast. In this episode we talk about how the pandemic helped shape the public face of the Angular team, and then we dive into some of the exciting features of the V15 release.

www.spreaker.com

Angular 15: The Good Parts - AiA 362 | by Adventures in Angular

Chuck welcomes Lucas to the show as a regular host of Adventures in Angular. They begin by discussing Angular 15’s most recent updates and what benefit it might have for the current Angular community. Lucas also offers his perspective on the new tools and what makes him excited to use them.

topenddevs.com

#ngCommunity

Learning Angular w/ Minko Gechev | by Ryan Carniato

I’ve never looked at Angular before but that is all about to change. Who better to learn from than Minko Gechev the current Angular team lead.

www.youtube.com

Ben Lesh on Twitter: "🚀RxJS 7.8.0 is out!" / Twitter

RxJS 7 work is now “complete” as we shift focus to version 8. (7.7 and 7.8 were both published back-to-back after I realized we had more features ready to land) Thank you so much to all that contributed to v7

twitter.com

#ngQuote

www.goodreads.com

We'll take a few moments to reflect on the stream for 2022, think about how we can grow the stream in 2023 and most of all, play some games!

#ngTutorials

Angular builders are nodejs scripts executed by Angular CLI and perform different tasks like application build, serving the app, or running a different kinds of tests. You can create your own builders that can perform some particular tasks for your Angular application and in this tutorial, you will learn how to do that. At the end of this video, we will build a custom builder that patches the application build information in a dedicated JSON file, the JSON file name can be configured by providing custom options for the builder, and additionally, you will learn how to schedule another target from your custom builder.

This article will go through Angular DevTools in detail and provide step-by-step guidance on making the best of it.

#ngPodcasts

It's always a pleasure to welcome Emma Twersky to the podcast. In this episode we talk about how the pandemic helped shape the public face of the Angular team, and then we dive into some of the exciting features of the V15 release.

Chuck welcomes Lucas to the show as a regular host of Adventures in Angular. They begin by discussing Angular 15's most recent updates and what benefit it might have for the current Angular community. Lucas also offers his perspective on the new tools and what makes him excited to use them.

#ngCommunity

I've never looked at Angular before but that is all about to change. Who better to learn from than Minko Gechev the current Angular team lead.

RxJS 7 work is now "complete" as we shift focus to version 8. (7.7 and 7.8 were both published back-to-back after I realized we had more features ready to land) Thank you so much to all that contributed to v7

#ngQuote

#ngTutorials

Directive Type Checking | by Thomas Laforge — medium.com

The fourth challenge will teach us how to use the ngTemplateOutlet structural directive of Angular with strong typing.

Declarative RxJS with Custom Operators | by Stefan Haas — ng-journal.com

Usually, RxJS streams tend to get a bit messy and unreadable when a lot of pipe operators are needed. One reason for this unreadability is the imperative nature of these RxJS streams. Therefore, making them declarative by using custom operators makes your streams a lot more clean and readable.

NgRx Component Store meets Facade Pattern | by Stefan Haas — ng-journal.com On the one hand, the Component Store is a really fancy library for simple state management. But on the other hand, tightly coupling state management into an application is always a bad idea. The reason for that being, that the need for state management is changing during the lifetime of an application. In the beginning it is often unnecessary to invest too much time into a fully fledged state management library when a service-based state management would be enough. But suddenly, after a few months working with stateful services, the need for a fully fledged state management library arises. But what now? Just throw everything out of the window?

Reducing Angular Library Contributions to the Main Bundle | by Nicolas Gehlert — blog.ag-grid.com

....learn the best way to include AG Grid in your own shared Angular library that will not result in AG Grid being included in the main bundle, as long as it is only used in lazy loaded routes.

ChatGPT just built my entire app in minutes... | by Joshua Morony — www.youtube.com

I asked ChatGPT how to create a todo app in Angular and it provided me with an unexpectedly accurate answer. With very little input from myself, it was able to provide the code for the entire application.

Modern NgRx | by Brandon Roberts — www.youtube.com

I changed my mind. Angular needs a reactive primitive | by Mike F. Pearson — www.youtube.com

Angular developers have waited 7 years for better integration with RxJS, but this doesn't seem to be happening. This made me angry at first, but after a lot of thinking and talking with other developers, I now believe that a reactive primitive could provide an overall better developer experience than just better RxJS support, even for the most diehard RxJS fans.

#ngPodcasts

S4 E 15 - Typescript: Not Just For Angular Lovers with Shaundai Person — www.spreaker.com

As an Angular Developer, you might be writing Typescript but are you REALLY writing typescript? Join us as we welcome Shaundai Person to the podcast where we will talk about what we love about Typescript, what is frustrating about Typescript, and why Typescript is an important tool for teams and code bases across all Javascript frameworks.

#ngCommunity

What's new in Nx 15.3? | by Juri Strumpflohner — www.youtube.com

Here's all you need to know about what's new in Nx 15.3, in under 10 minutes!

Roadmap To Learning Angular | by ng-conf — www.youtube.com

Roadmap to Learning #Angular series, hosted by @JediBravery

#ngQuote

"Programming is the art of doing one thing at a time." - Michael C. Feathers — www.goodreads.com