Superpowers with Signals | Emma Twersky & Alex Rickabaugh | ng-conf 2023

Learn how to break down complex state into manageable pieces using signals and computed values in an application, as demonstrated in a practical example of a superhero service and metric editor component.

Key takeaways

Use a granular approach to reactivity in an application, breaking down complex state into smaller, manageable pieces.
Instead of using computeds as simple functions, use them to update dependent values when the inputs change.
Use signals to represent small pieces of state that can be updated independently, such as a hero’s name or powers.
Create a superhero service that encapsulates the logic for calculating hero metrics and updates.
Use computed signals to update metrics based on changes to the hero’s name, angularness, nerdiness, and zonelessness.
Create a metric editor component that allows the user to edit a metric and updates the hero’s powers accordingly.
Use the ng attribute to bind the hero’s name signal to the character sheet component and the metric editor component.
Implement a limit on the number of points the hero can accumulate, and disable the up button when the limit is reached.
Use the inject function to inject the superhero service into the hero component.
Update the hero’s name signal using the set method.
Create computed signals for each metric to calculate the total points.
Memoize the computation of the hero’s metrics by only re-running the computation when the name changes.
Use signals to represent the hero’s metrics, such as angularness, nerdiness, and zonelessness.
Use computed signals to update the metrics based on changes to the hero’s powers.

Superpowers with Signals | Emma Twersky & Alex Rickabaugh | ng-conf 2023

More talks