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

Channel:

Joshua Morony

Subscribers:

81,900

Published on August 17, 2022 12:00:36 PM ● Video Link: https://www.youtube.com/watch?v=dau7kQMdH4A

Category:

Tutorial

Duration: 23:50

20,990 views

757

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.

Get weekly content and tips exclusive to my newsletter: https://mobirony.ck.page/4a331b9076

Learn Angular with Ionic: https://ionicstart.com

Previous video (ngTemplateOutlet): https://www.youtube.com/watch?v=TZZApWysF9g
Source code (untyped): https://github.com/joshuamorony/ng-template-outlet-example
Source code (typed): https://github.com/joshuamorony/ng-template-outlet-example/tree/strongly-typed
Chau's PR: https://github.com/joshuamorony/ng-template-outlet-example/pull/1
Chau's YouTube: https://www.youtube.com/c/ChauTran
Chau's Twitter: https://twitter.com/Nartc1410

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

- More tutorials: https://eliteionic.com
- Follow me on Twitter: https://twitter.com/joshuamorony