Build Generalized DRY Angular Code with Generics

With DRY, or "Don't Repeat Yourself" the goal is to reduce or eliminate duplicate code, making our intent more clear.
In this video, we'll examine techniques for using generics to build generalized functions in our Angular applications.
Links
Code: stackblitz.com/~/edit/stackbl...
KZbin video: "Understanding Immutability in JavaScript": • Understanding Immutabi...
Special Thanks
🌟 To Sander Elias for suggesting generics. Follow him at: mastodon.social/@sanderelias
Content
00:00 DRY - Don't repeat yourself
00:40 Sample application
01:36 Generics
03:51 Calling a generic function
04:42 keyof
08:00 Generalized signal update
10:46 Generic constraints
14:23 Wrap up
▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
😊About Me
Hey! I'm Deborah Kurata
I'm a software developer and KZbin content creator. I speak at conferences such as VSLive and ng-conf. I write articles for freeCodeCamp. And I'm a Pluralsight author with courses in the top 10 most popular (out of 7,000+) for over 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).
View my KZbin content: / @deborah_kurata
Contact me on Twitter: / deborahkurata
Find my Pluralsight courses: www.pluralsight.com/profile/a...
Access my freeCodeCamp articles: www.freecodecamp.org/news/aut...
▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
#angular
#angularsignals
#angulartutorials
#angulartutorial
#angulardevelopers
#angularTypeScript
#angularapplications
#generics
#genericswithangular
#DRYwithangular
#DRYwithgenerics
#bestangularpractices

[@dinysanchez]

Please continue creating this amazing content! It's hard to find advanced Angular content elsewhere. As always, Thank you!

[@deborah_kurata]

Glad to hear it's useful. Thank you!

[@HoNow222]

PLEASE more videos about Generics and Signals! 😍

[@deborah_kurata]

Great idea! Thanks!

[@gasparsantillan5357]

Signals + Typescript tricks? We needed this!!

[@deborah_kurata]

Glad to hear that! Thanks!

[@roman6504]

I consider myself very lucky that I accidentally saw it in the recommendations for your channel, Deborah. Thank you very much

[@deborah_kurata]

I am too! Thanks for watching!

[@RsPippen]

Amazing as always! I would love to see a video on unit testing best practices in Angular when using a declarative approach. I always get stuck and usually have to revert my code back to an imperative style

[@deborah_kurata]

Thank you! Yes! I had been putting off doing any testing content because the testing libraries Angular supports has changed (Karma, Jasmine, Jest, ngMocks, cypress, Playwright. But maybe it's time to get back to that! In the mean time, this could be helpful: angular.dev/guide/testing/services

[@jackiecooper9439]

Deborah , you are the best! No comparison. Waiting for your Angular 18 Getting Started course🤗

[@deborah_kurata]

Thank you so much!

[@joeyvico]

Love these advanced / expert tutorials on both Angular and Typescript. Thanks Deborah

[@deborah_kurata]

Glad it was helpful! Thanks!

[@kettenbach]

Always love your content Deborah. Been a fan for many many years. You're my goto source for the latest Angular features. Things are clear and concise and easy to digest. Thank you! 🙏

[@richarddefortune1329]

I learned angular by watching Deborah's courses on Pluralsight. She's the best.

[@kettenbach]

@@richarddefortune1329 same. Learned Rxjs too

[@deborah_kurata]

Wow, thank you! 😊

[@osamaabozahra]

Thank you for the fantastic video, Deborah. I was opening the video saying to myself what is going to be new in generics, I already know them 😅 Then I learnt "K extends keyof T" and it was mind blowing moment.

[@deborah_kurata]

Yay! It's so great to hear that the video was useful! Thanks!

[@lacerdae]

Ma'am, you are the best! So much I have learned with your Angular content. Keep it up

[@deborah_kurata]

That's great to hear. Thank you! 😊

[@selektahx]

Your content is amazing. Please continue to share your knowledge. You are great!

[@deborah_kurata]

Thank you so much!

[@MrPankoPanko]

I am impressed. Really good quality video! Looking for more angular tutorials!

[@deborah_kurata]

Thank you so much! 😊 You can find my Angular playlists here: kzbin.info/aero/PLErOmyzRKOCrzJ9zUEGgC1zVzVGt3hMmV And here: kzbin.info/aero/PLErOmyzRKOCr07Kcnx75Aqh6PWSbIokPB

[@rolygonz1964]

You are the best . Please continue creating this amazing content. Thank you !

[@deborah_kurata]

That's kind of you to say. Thank you!

[@MarcoPinheiro]

This is pure gold Deborah, thanks for this awesome resource!!

[@deborah_kurata]

Great to hear. Thank you!

[@cathyf5449]

Awesome video as always. Thanks!😄

[@deborah_kurata]

Thank you! 😊

[@janis666]

very informative! always enjoying to watch your tutorials. thanks!

[@deborah_kurata]

That's kind of you to say. Thank you!

[@ranjan4elex]

Awesome content as always.. love the way you explain complex concepts in very easy to understand way, Thank you!!!

[@deborah_kurata]

Thank you so much for the kind words! 😊

[@DraaElMizan]

Amazing, thanks Deborah.

[@deborah_kurata]

Thanks for listening! 😊

[@KiffinGish]

Nicely done again!

[@deborah_kurata]

Thank you!

[@nope7843]

Awesome as always thanks for sharing it with us 🙏

[@deborah_kurata]

Great to hear. Thank you!

[@EmilioDegiovanni]

Excellent video Deborah!

[@deborah_kurata]

Thank you! 😊

[@enverusta7811]

Awesome content! I was just tackling these kind of things on my projects. Awesome coinsidence.

[@deborah_kurata]

Perfect! Great to hear the info will be useful! Thanks!

[@stevewitman]

AWESOME video Deborah! My knowledge and ability to use generics is only that I know they exist. I have this video on my list to revisit this weekend, to type out and explain out loud several times until I can reproduce this all on my own. Thanks!

[@deborah_kurata]

Thank you! Let me know if you have any questions. Have fun! (I have the link to my stackblitz in the video notes if you want the code I used.)

[@denberghvanmartijn]

This is awesome! would also love a video about best practices in terms of project and folder structure.

[@deborah_kurata]

Thanks! Great idea!

[@_perfectCTO]

The community owes you big time, Deborah. I hope you never lack the energy to keep going for a long, long time. Just curious, how do you dive into and explore these sometimes new other times advanced concepts? How much trial and error does it involve, or do you have specific places to look beyond documentation?

[@deborah_kurata]

That's very kind of you to say. I came from Visual Basic -> C# -> JavaScript -> TypeScript, so many of these concepts (like Generics) I already knew from my VB.NET/C# days. I do spent quite a bit of time experimenting, to see how to actually *use* the techniques in an Angular app. Having a specific purpose makes it easier to explain and apply that technique. Then a good amount of googling to ensure I haven't missed or misunderstood something. 😊

[@en818]

You explained things so well 🙌

[@deborah_kurata]

Thank you! 😊

[@codewithmenow1412]

WOW Amazing as usual 🤩

[@deborah_kurata]

Thank you so much 😀

[@dougl765]

You're the best! Thank-you so much for you skills!

[@deborah_kurata]

That is kind of you. Thanks!

[@araujomartin]

Very usefull! Excellent video

[@deborah_kurata]

Thank you so much!

[@BJAnderson]

Amazing explanation. I understand generics, but wanted to see your take on them. Went from too easy to brain melting in 15 minutes, and all while keeping it clear and understandable. Great job :)

[@deborah_kurata]

Now I have that image from "Raiders of the Lost Ark" in my head. LOL! Thank you so much for the kind words! 😊

[@richarddefortune1329]

Thanks so much for this video. You present typescript better than their own website.

[@deborah_kurata]

Thanks! 😊

[@PanDaNWS]

Love your video, it helps me improve my coding better.

[@deborah_kurata]

Great to hear! Thank you!

[@syedmohammadnejat]

As Always Perfect Video :P

[@deborah_kurata]

Thank you so much!

[@Nabulio85]

❤ for you ❤️ for your content 😊 Thank you again.

[@deborah_kurata]

That is very kind. Thank you! 🧡

[@joepersonbelgica3980]

Very helpful. Thanks

[@deborah_kurata]

Glad it was helpful! Thank you! 😊

[@ChessPuzzlesVideo]

Another great content in a simple language 👍. Can you also make video on SOLID design principle (in angular)

[@deborah_kurata]

Thank you! And great idea! I'll add it to the list. 😊

[@rkumar.lnct24]

Awesome explanation 🎉

[@deborah_kurata]

Thank you! 😊

[@positivenegativ]

I simply cannot thank you enough

[@deborah_kurata]

So happy to hear that it was useful! Thank you!

[@valikonen]

Fantastic example! Let me give you an example: I have a http req. and the response from the backend it's very different from what I must use in front and I created two interfaces, one from the response from the backend and one for UI after I map the values. Can I use a generic in that case? One option it's to use a map operator in pipe...Thank you for your great content!

[@deborah_kurata]

Thank you! This is how I've done it (as you said, with 'map'), where ProductFromAPI is one interface and Product is the other: productsFromAPI$ = this.http.get('api/productsFromAPI') .pipe( map(products => products.map(product => ({ id: product.p_id, productName: product.p_nam, productCode: product.p_cd, description: product.p_des, categoryId: product.p_c_fk_id, price: product.p_p * 1.5 }) as Product)), catchError(this.handleError) ); My first thought is that you wouldn't be able to do something like this with generics because each object would require specific mapping. Unless the mappings for your different object types are very generalized, generics won't be able to help much.

[@zaferdemir4680]

Super. Thanks

[@deborah_kurata]

😊

[@andsons159]

My all time teacher,

[@deborah_kurata]

That is kind of you to say. Thank you!

[@epoppy]

this is awesome 🎉

[@deborah_kurata]

Thanks! 😊

[@hamadykais9318]

Powerful!!

[@deborah_kurata]

Yep! Thanks!

[@rippan87]

Great video as always! Very elegant, I wonder if it’s possible to make the generic update function to set multiple props?

[@deborah_kurata]

Thank you! TypeScript has variadic tuple types that support a generic spread operator. More information here: www.typescriptlang.org/docs/handbook/release-notes/typescript-4-0.html#variadic-tuple-types. You could possibly use something like that to take in any number of properties/values. (I haven't had the need for something like this, so don't have an example for you. Maybe a future video? 😄) Or maybe more straightforward, use a key/value pair to pass in property/values as an array?

[@vd2828]

Amazing video, Thank you so much. Could you please consider about a video demonstrating how to generically pass input values from a parent component to child component?

[@deborah_kurata]

Thanks! Could you elaborate on your suggestion? What's the scenario? The new input doesn't require a type, so it's already somewhat generalized: employee = input(); The parent component can pass anything. The child can *require* a type using something like this: employee = input(); And you can do something like this: export class FilterComponent { someArray = input.required(); } Is that what you are picturing?

[@vd2828]

Hi @@deborah_kurata, Thank you for your reply. export class FilterComponent { someArray = input.required(); } The class component with the type was what I looking for. We don't need to declare the type of any for the input variable, then we can call the generic function. This is great.

[@houseofgames6099]

Hello I have completed your couple of courses on plurasight.. really loved it.. I mean I was lucky to find you as an instructor for Angular courses.. Could you please do a course on Javascript please. not basic Js language but more of a little above begineer to super Advanced concepts and beauty of js language. So if anyone ask me any advanced/tricky concepts of js I should be able to solve it. More like book series "You don't know Js".. Please!!!

[@deborah_kurata]

Thank you so much! 😊 I did a JavaScript course here on KZbin. Here's the playlist: kzbin.info/aero/PLErOmyzRKOCpmitTOazq3_p74Y-yTQB6A I also have a general "JavaScript Topics" playlist you can find here: kzbin.info/aero/PLErOmyzRKOCqpYd2OvTxg74DUj9McAjbL This playlist includes a video on immutability and several lesser known array methods. You could check out those videos and see if I cover anything more "advanced beginner" that would be useful for you. Are there any other specific JS topics you'd be interested in?

[@mibi2007]

thanks 😊

[@deborah_kurata]

Welcome 😊

[@AlexLikeGolf]

You just taught Typescript Generic in 15 minutes. Can you create a deep-dive Angular Getting Started with your narration style? I enjoyed your Pluralsight videos, but I no longer have access to them.

[@deborah_kurata]

Thank you for watching! I have been considering doing some type of "Getting Started" content here. But I haven't quite figured out what that would look like in a KZbin environment. Maybe a set of build-along videos? Thanks for the suggestion.

[@michaelharrington5860]

Build along videos would be fantastic! ​@@deborah_kurata

[@matheusluz2318]

hi there! love your videos! if you can, please make a sequel about subscribe vs toSignal and async pipe (as mentioned in the video: Use takeUntilDestroyed to Unsubscribe from Angular's Observables 10:17)

[@deborah_kurata]

Thank you so much! Great suggestion! I'll add it to my list.

[@miloszivkovic6607]

I love you.

[@deborah_kurata]

I assume you mean you love my content. 😊 Thank you!

[@miloszivkovic6607]

@@deborah_kurata Content is amazing. And the content creator as you is a good human being who is spreading his knowledge to society... If 10M+ people can express love to music, movie stars and other entertainment content, why shouldn't I do the same for someone like yourself? Nothing personal, but this is entertainment for me, so i wanted to express it, exactly like I did, because you are a Rock Star! ( with a pretty nice and calming voice :D ). Joke aside. As a human to another human, thank you! Keep up with good and honorable work, we need you!

[@deborah_kurata]

That is so very kind of you to say! Thank you! 😊💖

[@bibbychung]

It's so hard ^^|||..

[@deborah_kurata]

Is there anything I can clarify?