This random PR taught me how to strongly type my generic Angular component

In this video, we investigate how to use custom directives, TypeScript generics, and ngTemplateContextGuard to add strong typing to the ng-templates in the generic table component from the last video.

0:00 Introduction
1:26 What's wrong?
3:55 Removing magic strings
7:09 Using TypeScript Generics
13:34 Using Generics with Directives
16:37 Using ngTemplateContextGuard
21:18 Star syntax
23:03 Conclusion

#angular #typescript

[stefanitotokocopullo]

Great video. Thank you. Very helpfull.

[nikolitilden]

Hey just wanted to mention something that might be useful (hopefully) for future videos. It would be really nice if you mention the version of Angular/Typescript you are currently using for a video if there is something like "this might be fixed in the future". I only found out because I went to your repo and checked the package.json file. Heck, it might be better just to throw a quick visual at the beginning of all videos with all the relevant versioning used in a project, or maybe just throw it in the comments. Hope this is a good suggestion! Love your videos! ❤

[vOnez]

This is the kind of content I need. Thanks for sharing.

[ancientelevator]

Looking forward to the star syntax video!

[mikemarkovich]

This is a great video. I spent some time poking through the table from the angular CDK repo and this is close to the solution they used for that. Of course, it wasn't explained at all, let alone with this much clarity. Thanks for helping everyone understand these concepts.

[beratsulimani]

Thanks a lot Josh, for the great explanation and sharing advanced content with us.

[johnnycopes]

Thanks for a great video! You did a nice job breaking down the process piece by piece and explaining how to implement the static type guard. I've been using the ngTemplateContext pattern for years, but the technique of strongly typing the data in the template always eluded me. Looking forward to the next video on refacoring this work to use the structural directive syntax

[CraigShearer]

Amazing. I'll be changing some of my own ngTemplate/ngTemplateOutlet code tomorrow to make it more type safe!

[robocop]

This is absolute gold. Great video Josh -- much appreciated.

[SebastianPerezTeres]

Awesome video, thank you for this!
I love the fact that it is possible to get typed context like this, however complicated it may be.
I recommend looking into an alternative approach using CDK Component Portal, I like that it forces component users to create a component that implements certain interface.
For example my table component may define a row input as @Input() rowRenderer: ComponentType<TableRow>, usually TableRow interface would declare a method that get's called as soon as the component is attached (e.g. onTableRowInit) this gives the developer complete flexibility over what to display and a clear interface to implement, which avoids all this directives and generics complexity. IMO :)

[oleksandrsanzharevskyy]

YOU are the LEGEND! Thanks a lot! Short and clear, love your videos.

[xocomil]

I love this video. It is so tempting to want to know everything. Admitting you learned a lot and shared with us what you learned was a great choice. I learned a lot in this video. Thank you for making this. Also, Chau is terrific.

[williamxsp]

Incredible content. Thanks Josh and Chau

[chrisodillman]

I recently got a new job where i will work mostly with angular. Your channel has so many interesting topics.. wow.

[johnbarton]

dude this is awesome. gonna cmd+shift+F my project for template variables and see where I can use this. love the content

[hansschenker]

Yes Joshua you transfered your knowlege onto me! Using a directive for Typescript Typing - a little strange although working!

[Tomas-irxl]

Try out ng-polymorpheus from Tinkoff. The library should help get rid of some of the type checking boilerplate.

[hefesto]

Excellent video, please keep doing this, im learning a lot with you

[victory_lucky]

And now I understand how the star '*' directives work🤭

[deyssog]

Great video, thanks for that! Keep it up