Access an Angular Signal's Value Inside Event Handler Methods
Event handlers can be created in Angular components to interact with signals. By defining a method in the component class and binding it to an event in the template, the current value of a signal can be accessed and logged when the event occurs.
It's important to note the difference between:
- Reactive signal calls in the template, which automatically update the view when the signal value changes
- Imperative signal calls in the TypeScript class code, which retrieve the current value only when the event is triggered
[00:00] Create a new method on the component class which will play the role of an event handler. We'll simply log the value of the signal. And for this reason, we'll need to call the signal function this dot items and a call. The handle click method is done and we'll create a simple button. Whenever the [00:20] button is called, the event handler will also be called and we'll just bind it over here. So our button is done. We'll open the dev tools and we can see that whenever log items gets clicked, the signal value is displayed in the console [00:39] log. The difference between calling the signal function within the template and the TypeScript class code is that the code in the template is reactive. Whenever the signal value changes, the component view will be updated. However, the call within the method is imperative. Current value is pulled only when the [00:59] event happens.