Working with Arrays in Angular Signals

We often work with sets of data stored in an array. With the new Angular signals feature, we can work with an array as a signal. That gives us better reactivity, and improved change detection.
In this video, we walk through how to create a signal that contains an array, and then update that signal: inserting, updating, and deleting items in that array.
*Links*
Code: github.com/DeborahK/Angular-Signals
"Angular Signals: What, Why, and How?": kzbin.info/www/bejne/paK8gnpthrKXsNk
"RxJS and Angular Signal Fundamentals" - Pluralsight course: www.pluralsight.com/library/courses/rxjs-angular-signals-fundamentals
*Content*
00:00 Working with arrays in Angular signals
00:34 Demo
00:58 Creating the cart as an array in a signal
01:57 Adding items to the cart (the wrong way!)
03:57 Adding items to the cart (the right way!)
05:26 Removing items from the cart
05:54 Updating an item in the cart
07:18 Wrap up/Key Point
▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
😊About Me
Hey! I'm Deborah Kurata
I'm a software developer and KZbin content creator. I speak at conferences such as VS Live and ng-conf. I write articles for freeCodeCamp. And I'm a Pluralsight author with courses in the top 10 most popular (out of 10,000+) over the past 5 years. For my work in support of software developers, I've been recognized with the Microsoft Most Valuable Professional (MVP) award, and I'm a Google Developer Expert (GDE).
Contact me on Twitter: DeborahKurata
Find my Pluralsight courses: www.pluralsight.com/profile/author/deborah-kurata
Access my freeCodeCamp articles: www.freecodecamp.org/news/author/deborah-kurata/
View my KZbin content: www.youtube.com/@deborah_kurata

[@LucaMarasco]

I believe your videos are of excellent quality. I don't understand why they're not going viral. You're the mentor everyone would want.

[@deborah_kurata]

Thank you! And I'd love to see them get a broader audience.... maybe some day. 😊

[@pjotreknoname1680]

I've done many Angular courses, but yours is definitely the best. You always show in a concise way, using very good examples, how things work and how they can be used. These lessons are so... professional, even your voice is appropriately toned and it seems to be the thing you pay attention to when creating these materials. Thank you very much, you are doing a lot of good work!

[@deborah_kurata]

Wow, thank you! That is so very kind of you to say! 😊

[@justflying5323]

Once again, a very good video!

[@deborah_kurata]

Thank you! 😊

[@anthonydesouza4821]

Such a great explaination, thank you so much

[@deborah_kurata]

Glad to hear it was useful. Thanks!

[@iuliusciorica282]

I like your tutorials about Angular, thank you! ❤

[@deborah_kurata]

So great to hear. Thank you! 😊

[@stupidddd]

This was so unbelievably helpful, thank you!

[@deborah_kurata]

Glad it was helpful!

[@sakarsr]

Great teacher. Thank you and have good health.

[@deborah_kurata]

Thank you!

[@user-ml8kh8pw9q]

Well explained!! Thank you!

[@deborah_kurata]

Thanks for watching!

[@sanjivasen]

You are the best teacher Debb😊

[@deborah_kurata]

Wow, thank you! 🙏🏼

[@shidalgo2008]

Thank you. Your videos are so useful.

[@deborah_kurata]

Glad to hear that. Thanks!

[@jakedanforth8178]

Well done video

[@deborah_kurata]

Thanks!

[@zokizuan]

started angular from you plural sight course

[@MovaClub]

Thank you!

[@deborah_kurata]

Thanks for watching!

[@Emmodi10]

Well explained. Signals is a game changer

[@deborah_kurata]

Agreed! Hoping we see more features (two-way binding support, input properties, etc) soon! Thank you!

[@zokizuan]

Thanks

[@burak63783]

Love your Voice :) Nice tutorial thx for this. We need to push u more in the angular world!!!! @Angular

[@deborah_kurata]

Yes we do! 😊 Thank you so much for the kind words! They really brightened up my day!

[@user-ni8uk4of9l]

Love you.

[@deborah_kurata]

😊

[@zokizuan]

love your voice

[@Erril-1]

perfect!

[@deborah_kurata]

Thank you!

[@alissonprimo]

I'm having issues with computed and effect when using arrays with signals

[@deborah_kurata]

What issue are you having? Can you provide more details?

[@alissonprimo]

​ @deborah_kurata I've found out what the problem was, it is necessary to spread arrays in order to signals to detect they have changed. For example: foo = signal([]) bar = [1,2,3] If i just do foo.set(bar) it does not updates the component in the template. So I had to do foo.set([…bar])

[@deborah_kurata]

@@alissonprimo Glad you found it! For more info, have you seen this video: kzbin.info/www/bejne/enO9doaGiJJoo7M

[@WebGarmony]

Thank you very much for this material. It seems to me that you should challenge yourself on the UDEMY platform.

[@deborah_kurata]

Thank you! 😊 I have about 20 courses on Pluralsight. I tried to sign up to post a few courses on Udemy, but was never able to get past the "validate yourself" step. And I was unable to ever find an actual Udemy person to help me. 😐

[@WebGarmony]

@@deborah_kurata This is sad and not fair. Your courses are excellent. I have nothing to do with UDEMY, but if I can somehow help you with this, please write to me about it.

[@haroldpepete]

why not use reduce to update as well? and even to delete

[@deborah_kurata]

You could. It may be possible to throw out many of the other array operators and replace it with reduce. (Same could be said of the forEach. LOL) But the purpose of many of the operators are for simplifying and clarity. Filter is normally used for delete operations because it is a bit more obvious what it's doing. It's filtering to all but the deleted item. Map is normally used for changing one or more elements of an array. Again, it's a bit more obvious what it's doing.

[@NGprime]

are you debora, from frontendmaster ?

[@deborah_kurata]

I'm not from FrontEnd Masters, no. I have done courses for Pluralsight.

[@jazy3091]

It is a great tutorial unfortunately I can't focus on the content when I hear this artificial cheerfulness. I'm trying muting the sound and follow the subtitles, but it's a real bummer because authors natural voice as I heard in other video is just so much better.

[@deborah_kurata]

Seriously? "artificial cheerfulness"? I do the very best that I can to provide clear, clean, and accurate audio. You could try adjusting the speed of the video to see if that helps. Otherwise, the subtitles are your best bet.

[@jazy3091]

@@deborah_kurata I'm sorry, I didn't mean to offend you, but yes the tone of the video is unpalatable to me. Instead of focusing on the important things I'm trying hard not to get too irritated by the tone of the voice and constant fluctuations that are just over the top. Again, I'm really sorry that this is my criticism but it prevents me from watching your content and it's a pity because I find these valuable.

[@deborah_kurata]

So sad to hear this. What is your suggestion then? Would it be better for you if I set up an AI voice to record the audio?

[@LucNguyen-wk6to]

Great teacher. Thank you and have good health.

[@deborah_kurata]

Thanks! And thank you for watching!