You might not need that service after all 💉
If you've ever reached for a service in Angular just to wire up some component communication, this one's for you.
👕 Built for Angular builders. Get the Shieldworks “United by Craft” tee → https://shop.briantree.se/products/sh...
In this video, we’ll simplify that pattern by using Angular’s inject() function to access parent — or even grandparent — components directly. It’s a clean, context-aware approach that can eliminate unnecessary boilerplate and help you build more reusable, scalable components.
We’ll walk through a real-world example involving a dialog and nested action buttons, and show how to make your component logic flexible enough to work with or without its context.
------------------------------------------------------------------------------
🔔 Subscribe for more Angular tutorials & tips → [🔗 https://www.youtube.com/c/briantreese...]
👍 Like this video if you found it helpful, it really helps support the channel!
------------------------------------------------------------------------------
🔗 Demo Links:
Before (https://stackblitz.com/edit/stackblit...)
After (https://stackblitz.com/edit/stackblit...)
------------------------------------------------------------------------------
📚 Additional Resources:
Angular inject function docs (https://angular.dev/api/core/inject)
Angular Signals official guide (https://angular.dev/guide/signals)
Understanding dependency injection in Angular (https://angular.dev/guide/di/dependen...)
My course: "Styling Angular Applications" (https://app.pluralsight.com/library/c...)
------------------------------------------------------------------------------
🧰 About the Tools Used
This video demonstrates:
inject() for direct component access
inject(..., { optional: true }) for flexible logic
Angular Signals and computed state
A smart component architecture without outputs or shared services
Perfect for tightly coupled components like dialogs, overlays, or reusable button elements.
------------------------------------------------------------------------------
📖 Chapters:
0:00 - Introduction
0:39 - Previewing the App and the Problem
1:54 - Accessing Parent Component State with inject()
2:40 - Displaying Dialog Data from Context
3:31 - Injecting a Grandparent Component Without a Service
4:55 - Making Our Action Button Smarter
6:34 - Handling Optional Injection Gracefully
9:26 - Wrap-Up: When to Inject Components (and When Not To)
------------------------------------------------------------------------------
🙌 Like What You See?
Tap Like, hit Subscribe, and check out the links above for even more Angular architecture tips.
------------------------------------------------------------------------------
#angular #angularsignals #componentcommunication #injectfunction #angulararchitecture #frontenddev #typescript #angularpatterns