Build Generalized DRY Angular Code with Generics

[@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!

[@gasparsantillan5357]

Signals + Typescript tricks? We needed this!!

[@deborah_kurata]

Glad to hear that! 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! 😊

[@yonester7]

This is one of those things I've seen around a bunch but never really understood thoroughly enough to use. Your explanation cleared this up perfectly for me. Thank you so much for all these videos, they're immensely helpful. I think I'll make this required training for my team :)

[@deborah_kurata]

That's wonderful to hear. Thank you!

[@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!

[@theintjengineer]

Came for Angular and stayed for the TypeScript gold lessons/hints🤷🏾‍♂️. Thank you🫶. Love you❤.

[@deborah_kurata]

So great to hear that the videos are useful! Thank you!

[@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

[@ajaykarwal]

Brain explode gif is about right. Might have to watch this again an delve deeper but that was very informative and something worth trying to grasp

[@deborah_kurata]

Glad to hear that it was interesting and informative. All the best!

[@HoNow222]

PLEASE more videos about Generics and Signals! 😍

[@deborah_kurata]

Great idea! Thanks!

[@julienr8114]

Best KZbin Content for Angular. Thks a lot Deborah.

[@deborah_kurata]

Wow, thank you! 😊

[@joeyvico]

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

[@deborah_kurata]

Glad it was helpful! Thanks!

[@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

[@ArchitecturalAesthetics2046]

so informative. never even heard of `extends keyof` operator. thank you Deborah.

[@deborah_kurata]

So glad to hear it was useful! Thank you for watching!

[@selektahx]

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

[@deborah_kurata]

Thank you so much!

[@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.

[@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.)

[@jackiecooper9439]

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

[@deborah_kurata]

Thank you so much!

[@MarcoPinheiro]

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

[@deborah_kurata]

Great to hear. Thank you!

[@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! 😊

[@denberghvanmartijn]

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

[@deborah_kurata]

Thanks! Great idea!

[@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! 😊

[@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!

[@nathanalberg]

my only advice would be at around 3:30... I would have explained more in depth how the relationships between the generics and the incoming arguments work. ie... If you dont pass in a type when calling logSignal.. the type will be inferred by the argument that was passed in etc etc. For example.. calling `logSignal(this.mySignal) would error.. however `logSignal(this.mySignal)` would not.

[@rolygonz1964]

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

[@deborah_kurata]

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

[@_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. 😊

[@rippan23452]

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?

[@07bakabaka]

Amazing , hero of angular beginners!!!

[@deborah_kurata]

Thank you!

[@pazzuto]

Great content! Generics seem easy at first, but can get pretty crazy quick. I remember when they were first introduced in C# back in early 2000 (I think) - It was an interesting concept to grasp, but I can't imagine coding without it now. When it comes to TypeScrpt, it kinda feels the same as back ~2000, the syntax can really give you a headache, but it's definitely worth using it. Thank you for a great explanation!

[@deborah_kurata]

Thank you! And yep! This topic is definitely more straightforward for those coming to Angular with a .NET background! For many that come to Angular from HTML or vanilla JavaScript, generics are completely new. I'm sure it must be a big mental shift to "think generically". 😊

[@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!

[@pavelernestonavarroguerrer7871]

Incredible useful and interesting video, thank you so much.

[@deborah_kurata]

I'm glad you found it useful. Thank you! 😊

[@EnriqueMartinezInter]

This content is simply...AMAZING!!

[@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! 😊

[@en818]

You explained things so well 🙌

[@deborah_kurata]

Thank you! 😊

[@mohitpandey2388]

What an amazing & knowledgeable video. Keep up the good work❤️

[@deborah_kurata]

Thank you so much!

[@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.

[@EmilioDegiovanni]

Excellent video Deborah!

[@deborah_kurata]

Thank you! 😊

[@richarddefortune1329]

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

[@deborah_kurata]

Thanks! 😊

[@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. 😊

[@TheAdamwest29]

Nice! Is there a library that implements this?

[@deborah_kurata]

Thanks! I would guess that many code libraries leverage generics using techniques like this. But I don't know of one in particular.

[@DraaElMizan]

Amazing, thanks Deborah.

[@deborah_kurata]

Thanks for listening! 😊

[@lijiklevi827]

Great content & explanation, Thank you❤

[@deborah_kurata]

Thanks! 😊

[@PanDaNWS]

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

[@deborah_kurata]

Great to hear! Thank you!

[@joepersonbelgica3980]

Very helpful. Thanks

[@deborah_kurata]

Glad it was helpful! Thank you! 😊

[@cathyf5449]

Awesome video as always. Thanks!😄

[@deborah_kurata]

Thank you! 😊

[@KiffinGish]

Nicely done again!

[@deborah_kurata]

Thank you!

[@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.

[@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?

[@araujomartin]

Very usefull! Excellent video

[@deborah_kurata]

Thank you so much!

[@nope7843]

Awesome as always thanks for sharing it with us 🙏

[@deborah_kurata]

Great to hear. Thank you!

[@positivenegativ]

I simply cannot thank you enough

[@deborah_kurata]

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

[@dougl765]

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

[@deborah_kurata]

That is kind of you. Thanks!

[@andsons159]

My all time teacher,

[@deborah_kurata]

That is kind of you to say. Thank you!

[@daringuL]

Very nice tutorial❤

[@deborah_kurata]

Thank you! 😊

[@codewithmenow1412]

WOW Amazing as usual 🤩

[@deborah_kurata]

Thank you so much 😀

[@rkumar.lnct24]

Awesome explanation 🎉

[@deborah_kurata]

Thank you! 😊

[@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.

[@Nabulio85]

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

[@deborah_kurata]

That is very kind. Thank you! 🧡

[@syedmohammadnejat]

As Always Perfect Video :P

[@deborah_kurata]

Thank you so much!

[@Ali-cx7sy]

Please about SOLID in Angular

[@zaferdemir4680]

Super. Thanks

[@deborah_kurata]

😊

[@richardbraul1702]

This is wonderful 😮😮😮

[@deborah_kurata]

Thank you! 🙏🏼

[@rowilduazo1367]

Amazing! 😯❤

[@deborah_kurata]

Thank you! 😊

[@epoppy]

this is awesome 🎉

[@deborah_kurata]

Thanks! 😊

[@DejanFilipov-gv8qz]

Teacher 💜

[@hamadykais9318]

Powerful!!

[@deborah_kurata]

Yep! Thanks!

[@martinflores9611]

wow very good video

[@deborah_kurata]

Thank you 🤗

[@alexandrechmakotine8712]

excellent !

[@deborah_kurata]

Thank you! 😊

[@mibi2007]

thanks 😊

[@deborah_kurata]

Welcome 😊

[@Ali-cx7sy]

Bilbo, Frodo, Drogo!

[@kyawswarthwin6451]

🎉🎉🎉

[@deborah_kurata]

🙏🏼🙏🏼😊

[@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! 😊💖

[@dragonstore6308]

To be honest, I think you're forcing the principles and making the code harder to read.

[@deborah_kurata]

These techniques are not for everyone and not for every project. They are definitely aimed at larger teams that are trying to build generic reusable code for use in multiple parts of an application, or even multiple applications. It's way overkill for straightforward, standard applications.

[@bibbychung]

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

[@deborah_kurata]

Is there anything I can clarify?