Getting started with Angular Signals
Getting started with Angular Signals
Introducing Signals, a new reactivity model in Angular. Signals equips you with high quality tools for fine-grained reactivity,
while setting you on a well lit path and providing you with guardrails to make your app performant. Learn how to start exploring the developer preview in Angular v16 today.
Resources:
Getting started with Signals → https://goo.gle/41T99yl
Signals Request for Comments →
Angular Twitter → https://goo.gle/3zyIA4Y
Speakers: Emma Twersky, Alex Rickabaugh
Watch more:
Watch all Angular Sessions → https://goo.gle/IO23_angular
Watch all the workshops from Google I/O 2023 → https://goo.gle/IO23_workshops
Watch more Web Sessions → https://goo.gle/IO23_web
All Google I/O 2023 Sessions → https://goo.gle/IO23_all
Subscribe to Angular → https://goo.gle/Angular
#GoogleIO
Content
0.84 -> foreign
4.56 -> hi I'm Emma a senior developer relations
7.919 -> engineer on the angular team and I'm
10.559 -> Alex the technical lead for the core
12.719 -> angular framework
14.34 -> and today we're going to develop our
16.44 -> first app with angular signals let's get
19.56 -> started
20.76 -> angular signals introduce three reactive
23.46 -> Primitives to the angular that you know
25.56 -> and love simplifying your development
27.779 -> and helping you build faster apps by
30.66 -> default
31.92 -> but Alex what is a reactive primitive
35.04 -> and why should we care
37.2 -> Primitives are the building blocks the
39.36 -> framework gives you to build
40.32 -> applications
41.579 -> angular is getting some new reactive
43.44 -> Primitives which you can use to tell the
45.78 -> framework about what data your UI cares
48.42 -> about and when that data changes
51.66 -> with that kind of information angular
54.059 -> can easily keep your application's UI in
57.12 -> sync with that data as it changes
59.46 -> our three new reactive Primitives are
62.34 -> writable signals computed signals and
65.1 -> effects
66.24 -> I think that the best way to understand
68.1 -> those angular signals is to start
70.799 -> building with them
72.24 -> today we're going to start by building a
75.06 -> game powered by signals oh that's a
78 -> great idea games have a lot of state so
80.64 -> I'm sure we can find some places to use
82.32 -> signals I think we can
84.96 -> we'll be building an angular Cipher game
88.259 -> ciphers are systems for encrypting and
91.08 -> decrypting data in this game users can
94.32 -> decode a secret message by dragging and
96.72 -> dropping Clues to solve a cipher and you
99.659 -> can even customize your own message and
101.939 -> share the URL with your friends to send
103.92 -> your own secret messages
105.78 -> everything you need to follow along to
108.24 -> this Workshop is in the description box
109.979 -> below
111 -> to get started make a fork of the stack
113.1 -> Blitz to create your own editable
114.96 -> workspace
117.42 -> you can pause the workshop and play with
119.7 -> the code a little unpause and join us
122.399 -> when you're ready to Define your first
123.96 -> signal
124.85 -> [Music]
127.459 -> step one defining our first signal
131.879 -> so Alex what is a signal
135.239 -> a signal is kind of like a variable it
138.06 -> holds a value for us and we can change
140.459 -> that value whenever we'd like
143.22 -> unlike a variable though a signal knows
146.4 -> where in the application it's used like
149.04 -> which components are displaying its
150.9 -> value in their templates
152.459 -> and it can signal to those components
154.44 -> whenever we change the value inside
157.92 -> very cool
159.42 -> in our app a great candidate to become
162.12 -> our very first signal is the super
164.58 -> secret message
166.44 -> super secret message is a value in
169.319 -> message service that defines the secret
171.72 -> message that we're decoding
173.94 -> currently this value doesn't notify the
176.879 -> application of changes so our customize
179.459 -> button is a little bit broken
181.98 -> we can solve this by making it a signal
190.86 -> by making super secret message a signal
193.86 -> we make it so that any dependencies on
196.08 -> it can be notified whenever we customize
199.08 -> the message in a dialog
201.48 -> you can find each of these places under
203.94 -> the comments that say to do one Define
206.519 -> your first signal
208.62 -> doing this will automatically prompt you
210.599 -> to import signal from angular core
214.44 -> and if you try to refresh the page at
216.959 -> this point
217.92 -> you'll likely run into errors where you
220.14 -> previously referred to super secret
221.58 -> message
222.659 -> this is because we've changed its type
224.64 -> from a string to a writable signal which
228 -> is a function
229.799 -> and we can fix these by changing all of
232.799 -> the references of super secret message
234.659 -> to call that function instead
236.99 -> [Music]
243.84 -> foreign
257.699 -> we have two other signals in our
259.799 -> application
261.959 -> the cipher service
264.06 -> defines a cipher signal
267.66 -> this is a randomly generated mapping of
270.96 -> key value pairs of one letter of the
273.12 -> alphabet to a new ciphered letter
276.12 -> we use this to scramble the message and
279.06 -> to determine if we found a successful
280.8 -> match for a letter on the keyboard
283.74 -> we also have a decoded Cipher signal of
287.82 -> the key value pairs that we've
289.139 -> successfully decoded and we'll add to
291.479 -> that as we solve the cipher
293.88 -> a unique and Powerful feature of angular
296.46 -> signals library is that we're
298.38 -> introducing reactivity everywhere
300.96 -> we've defined these three signals once
303.12 -> in our services and we can use them in
305.639 -> our templates components and other
307.979 -> services basically anywhere you can
310.44 -> write application code
312.06 -> they're not limited to or bound to a
314.4 -> single component
315.78 -> and there you go your first signal you
319.5 -> can pause the workshop and play with the
321.479 -> code a little and then unpause and join
324 -> us when you're ready to Define your
326.1 -> first computed
326.88 -> [Music]
330.36 -> step two defining our first computed
334.62 -> so Alex you mentioned something about
337.62 -> writable and non-writable signals what's
340.74 -> a computed
342.06 -> ah computers
344.1 -> well some signals we want to change
346.56 -> directly but that's not always the
348.84 -> easiest way to do things
350.58 -> if I know the temperature in celsius I
352.919 -> can always calculate it in Fahrenheit
354.78 -> but it'd be nice to not have to do that
357.24 -> manually
358.44 -> computed signals also hold values but
362.759 -> instead of changing them directly they
364.68 -> derive their values from the values of
366.72 -> other signals
368.039 -> and because signals can notify consumers
370.56 -> when they change
371.88 -> computed signals are automatically kept
374.22 -> up to date without us having to set them
376.74 -> ourselves
377.88 -> in our app a great candidate to become
380.639 -> our very first computed is solved
383.4 -> message
386.28 -> solve message is the in-progress result
388.919 -> of decoding the secret message with the
392.34 -> decoded Cipher key
394.139 -> currently
395.46 -> the solved message doesn't change
397.319 -> whenever the secret message changes so
399.96 -> we don't see any updates on the screen
401.759 -> when we solve our Cipher using a
404.4 -> computed is going to fix this problem
406.979 -> rather than having to manually redecode
409.44 -> the message every time the user drags a
412.259 -> new letter into their key
413.819 -> we can use a computed to automatically
416.639 -> keep the solved message up to date
419.28 -> as the key changes
421.8 -> and when you first use a computed you'll
424.38 -> be prompted to import it from the
426.3 -> angular core package
432.479 -> if you try and refresh the page here
434.52 -> you'll run into errors where you
436.68 -> previously referred to solve message
439.02 -> just like with the writable signals
441.06 -> we've changed the type of solved message
444.24 -> so we can fix this by changing all of
446.52 -> those references to call it instead as a
449.28 -> function
459.22 -> [Music]
461.66 -> just like decoded message secret message
465.24 -> is also a great candidate for our
468 -> computed
469.38 -> this is the super secret message encoded
471.9 -> by our Cipher that will work to solve
474.24 -> and display to users
476.28 -> and lastly
477.72 -> the cipher service defines an unsolved
480.539 -> alphabet computed which calculates a
483.24 -> list of all the letters which are not
484.8 -> yet solved
486.12 -> this is derived from the decoded Cipher
489.06 -> awesome we can now verify that our app
491.88 -> works
493.44 -> you can pause the workshop and play with
495.479 -> the code or decipher your own message
498.12 -> and then unpause and join us when you're
500.94 -> ready to Define your very first effect
503.46 -> [Music]
506.039 -> step 3.
507.96 -> so I get signals and I get computed
511.339 -> derived on signals but what's an effect
515.94 -> effects are the last piece of the signal
518.339 -> puzzle
519.659 -> an effect is something you want to have
521.94 -> happen whenever some signals change
524.88 -> with the effect API we can tell angular
527.399 -> to run a function which is going to use
529.92 -> the values of some signals an angular
532.8 -> will take care of automatically
534.3 -> re-running that function if those
536.76 -> signals are updated
539.399 -> I have something that I want to occur
541.44 -> when a signal is updated
543.6 -> confetti
545.279 -> now that our application is functional
547.2 -> we'll add some fun to it by adding
549.779 -> confetti when the cipher is solved and
552.12 -> The Secret Message is decoded
554.82 -> [Music]
570.2 -> notice how this effect depends on a
573.24 -> signal and on a computed value
576.18 -> the super secret message and the solved
578.58 -> message
581.48 -> [Music]
588.36 -> foreign
596.12 -> and when these messages match we get
598.92 -> confetti
601.98 -> whoa I didn't realize effects Works in
605.04 -> real life
607.019 -> you can pause the workshop and play with
609 -> the code a little we'll be cleaning up
611.339 -> all this confetti
613.92 -> [Music]
616.82 -> congratulations your angular Cipher is
619.98 -> now ready to decode and share secret
621.839 -> messages
623.279 -> have a message for the angular team tag
626.04 -> us on social media at angular so we can
628.44 -> decode it
629.519 -> you now have three new reactive
631.62 -> Primitives in your angular toolbox to
633.959 -> simplify your development and build
635.339 -> faster apps by default we're excited to
638.1 -> see what you'll build using angular
640.14 -> signals NG update to V16 for angular
643.86 -> signals in developer preview today and
647.04 -> learn more at all the links in the
648.72 -> description box
649.98 -> thank you
651.34 -> [Music]
654.72 -> foreign
Source: https://www.youtube.com/watch?v=EEzDLpIbW9w