Host Element Binding in Angular

In the newest versions of Angular, the @HostBinding and @HostListener decorators are no longer intended for use. As the new documentation states, they “exist exclusively for backwards compatibility”. There’s a new, more streamlined way to do this type of thing, and if you’ve worked with Angular in the past, it may look familiar to you. It’s kind of an old concept made new again. In this video we’ll look at a couple of examples I created for past videos about these decorators, and we’ll replace them with the newer methods. Also, we’ll update a few other concepts in these components and directives along the way too.
------------------------------------------------------------------------------
💖 Help Support the Channel:
If you found this helpful and want to show some love, you can always buy me a coffee (buymeacoffee.com/briantreese)!
------------------------------------------------------------------------------
🔗 Demo Links:
- @HostBinding Before (stackblitz.com/edit/stackblit...)
- @HostBinding After (stackblitz.com/edit/stackblit...)
- @HostListener Before (stackblitz.com/edit/stackblit...)
- @HostListener After (stackblitz.com/edit/stackblit...)
------------------------------------------------------------------------------
📚 Additional Resources:
- Angular Host Elements Documentation (angular.dev/guide/components/...)
------------------------------------------------------------------------------
📖 Chapters:
0:00 - Introduction
0:45 - Using Host Element Class Binding to Replace the @HostBinding Decorator
2:15 - How to Convert Form Value Observable to a Signal
3:08 - How to Use an effect() to Toggle a Class When a Form Field Status Changes
4:24 - Using Host Element Events to Replace the @HostListener Decorator
5:33 - How to Convert an Output Using the @Output Decorator to the New output() function
6:14 - Conclusion
------------------------------------------------------------------------------
#angular #angular_developer #angulartraining #javascript #typescript #frontend #angularcourse #host #angulardevelopment #hostbinding #hostlistener

[@crebuh]

Great explanation! After watching this, I immediately changed all my event emitters to the new output function. Thanks Brian!

[@LeungWong]

I hope they will improve the typing for "host". right now for instance it is possible to give any name for the click event function and it still would build.

[@sinthoras91]

Great we moved everything from host to hostbinding decorator and now we should move it back again? Thats how we can keep stay busy right?

[@paschalokafor9043]

Do you still need renderer when using host binding?

[@briantreese]

I this case I do since I’m using the addClass() and removeClass() methods to toggle a class on the body element. If I were only binding the class on the host element then I wouldn’t need it.
But, just to be clear, this is only for the example in this video. Binding a class on the host element does not require the renderer.
Hope that helps.

[@paschalokafor9043]

@@briantreese Wow. Very clear. Thank you. I tried using it but it throws an error about not having a provider. I am using standalone components