No video

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

  Рет қаралды 27,331

Joshua Morony

Joshua Morony

Күн бұрын

Пікірлер: 67
@JoshuaMorony
@JoshuaMorony Жыл бұрын
Join my mailing list for more exclusive content and access to the archive of my private tips of the week: mobirony.ck.page/4a331b9076
@nikolitilden8224
@nikolitilden8224 2 жыл бұрын
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! ❤
@vOnez212
@vOnez212 2 жыл бұрын
This is the kind of content I need. Thanks for sharing.
@beratsulimani9823
@beratsulimani9823 2 жыл бұрын
Thanks a lot Josh, for the great explanation and sharing advanced content with us.
@johnnycopes
@johnnycopes 2 жыл бұрын
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
@SebastianPerezTeres
@SebastianPerezTeres 4 ай бұрын
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, 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 :)
@CraigShearer
@CraigShearer 2 жыл бұрын
Amazing. I'll be changing some of my own ngTemplate/ngTemplateOutlet code tomorrow to make it more type safe!
@ancientelevator9
@ancientelevator9 Жыл бұрын
Looking forward to the star syntax video!
@mikemarkovich69
@mikemarkovich69 6 ай бұрын
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.
@robocop30301
@robocop30301 2 жыл бұрын
This is absolute gold. Great video Josh -- much appreciated.
@xocomil
@xocomil 2 жыл бұрын
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.
@xocomil
@xocomil 2 жыл бұрын
I like to think about generics as boxes. So a Box is an empty box that could hold anything. A Box is a box that contains only books. I like to use the analogy of moving. If you don't write what is in a box on the outside, it could hold anything, and you have to open it to know what room it is for. However, much like generics, if you write what the box contains on the outside, you can move it to the appropriate room and be confident in what it contains. Generics are the same idea. You tell the code what this generic contains, and it doesn't need to unpack everything to use it. In fact, unpacking a collection that isn't generic is called "unboxing."
@CraigShearer
@CraigShearer 2 жыл бұрын
@@xocomil A very good analogy, Jason!
@williamxsp
@williamxsp 2 жыл бұрын
Incredible content. Thanks Josh and Chau
@ChauTran
@ChauTran 2 жыл бұрын
Thank you
@oleksandrsanzharevskyy8709
@oleksandrsanzharevskyy8709 Жыл бұрын
YOU are the LEGEND! Thanks a lot! Short and clear, love your videos.
@stefanitotokocopullo2739
@stefanitotokocopullo2739 Жыл бұрын
Great video. Thank you. Very helpfull.
@chrisodillman3355
@chrisodillman3355 Жыл бұрын
I recently got a new job where i will work mostly with angular. Your channel has so many interesting topics.. wow.
@johnbarton4001
@johnbarton4001 2 жыл бұрын
dude this is awesome. gonna cmd+shift+F my project for template variables and see where I can use this. love the content
@ChauTran
@ChauTran 2 жыл бұрын
Nice! Just wanted to point out that if your component (and template) aren't generics, then it is significantly simpler to add type-safety 😋
@johnbarton4001
@johnbarton4001 2 жыл бұрын
@@ChauTran yea definitely. should be stated that this approach is great for dumb components that can expect any Input data shape. so if the Input is type "any", this is a great way to type it. is this what you mean?
@deyssog4263
@deyssog4263 Жыл бұрын
Great video, thanks for that! Keep it up
@hefesto706
@hefesto706 Жыл бұрын
Excellent video, please keep doing this, im learning a lot with you
@hansschenker
@hansschenker 2 жыл бұрын
Yes Joshua you transfered your knowlege onto me! Using a directive for Typescript Typing - a little strange although working!
@giorgimerabishvili8194
@giorgimerabishvili8194 2 жыл бұрын
The best Angular channel!
@Tomas-ir8xl
@Tomas-ir8xl 2 жыл бұрын
Try out ng-polymorpheus from Tinkoff. The library should help get rid of some of the type checking boilerplate.
@haroldpepete
@haroldpepete 2 жыл бұрын
that was really awesome, i knew about structural directive, yet this information using type in template i didn't know it, thanks
@Valky1954
@Valky1954 2 жыл бұрын
thanks for showing and explaining.
@sourishdutta9600
@sourishdutta9600 2 жыл бұрын
This one is really awesome. Can you create more reusable components that are type safe like this one. Thank you so much. 👌
@JoshuaMorony
@JoshuaMorony 2 жыл бұрын
Anything specific you'd like to see?
@sourishdutta9600
@sourishdutta9600 2 жыл бұрын
@@JoshuaMorony Any widgets or cdk that you can think of, that we are regularly using in our projects. Like side bar, navbar (nested), linked with the router. If we changed the route from the window search url that activated route of the sidebar will be automatically showing activated. One more thing is using generics how we can get more advantages in angular. I know in react there are multiple use cases with typescript like polymorphic component and custom hooks. I want to know how angular uses generics in material component or other libraries ant design component. One scenario like if how we can strongly typed the component that are passing through ng-content. Content projection is one of the key feature for reusability right. Thank you so much for sharing. 🙏👌🤘
@JustPassingByHere
@JustPassingByHere 2 жыл бұрын
Good stuff as always Josh! Thanks so much!
@michaelvexler
@michaelvexler Жыл бұрын
mint! you are doing brilliant work!
@nickolaizein7465
@nickolaizein7465 2 жыл бұрын
Interisting and usefull information, thank you.
@victory_lucky
@victory_lucky Жыл бұрын
And now I understand how the star '*' directives work🤭
@collinsk8754
@collinsk8754 Жыл бұрын
🙌Respect! Excellent work! 💯
@praveensripati3407
@praveensripati3407 2 жыл бұрын
Great content!🔥 Thanks for sharing.
@p.s29
@p.s29 2 жыл бұрын
Thank you for making this
@fredhair
@fredhair Жыл бұрын
I'm doing a similar thing for work but I'm passing the columns for my table as an array of keyof | TemplateRef and not using ContentChildren. I really don't want to have to add extra templates for when I just want the table to simply output the value of the row[column]. All's working well but I can't get decent type checking on the TemplateRef that I'm passing in. I like Angular but god this sort of thing is just awful in Angular compared to other frameworks. I much prefer working with Solid (so I'm glad to see Angular 16+ introducing signals) but I just loathe not being able to use TSX.. :(
@dawidniegrebecki2205
@dawidniegrebecki2205 Жыл бұрын
Fantastic video!
@juanaarean
@juanaarean 2 жыл бұрын
Great content!! as always, thanks a lot!!
@tinmancode
@tinmancode Жыл бұрын
This is awesome
@pedrofernandes2005
@pedrofernandes2005 2 жыл бұрын
Good video
@USONOFAV
@USONOFAV 7 ай бұрын
Dang! making template reference type safe is hairy thing todo. I hope Angular team can come up with a better way to do content projection in a type safe way.
@101stvar
@101stvar Жыл бұрын
Thanks for the great video, currently I am implementing this directive type checking. I am wondering is it possible to use input (data) from app-table component and use it to calculate and display possible values in the next templates. Just to avoid using multiple directive inputs (appTableHeader, appTableRow) It would be the perfect solution if we had a situation to work with n templates in complex components
@KillerBlade
@KillerBlade 11 ай бұрын
Exact content i was looking for, but i noticed that you said object type excludes primitive type, but that's not the case, it does includes them too.
@KillerBlade
@KillerBlade 11 ай бұрын
I rechecked and I was wrong about this, apologies for just anyone stumble upon this. 😅
@ToJak91
@ToJak91 Жыл бұрын
So, at my work we have this awefull grid, and I wanted to implement something based on this instead. What we have not, have a JSON layer on top of it. And my rules is, it has to be easier and perform better than what we got currently. With that in mind, does anyone have a good solution to sort the table, by clicking on the header, without having to do all sort of mapping (which would begin to make things less logical, for all my backend minded colleagues, compared to the inefficient thing we got now)?
@porcinetdu6944
@porcinetdu6944 Жыл бұрын
Is there a way not to pass the object again in the directive ([appTableHeader]=inventory) ? I use observable and it means another subscription
@omergronich778
@omergronich778 2 жыл бұрын
Nice!
@miguelcunha1934
@miguelcunha1934 Жыл бұрын
Why doesn’t this approach work in IntelliJ? 😢
@markwheeldon164
@markwheeldon164 2 жыл бұрын
Legen-dary!
@deveshwarjaiswal9095
@deveshwarjaiswal9095 2 жыл бұрын
please make a video on global error handler service for nx workspace (angular), like i have 1 host and 4 remotes and i want a single error handler service to show error messages and a single loader service
@hubertboguski
@hubertboguski 2 жыл бұрын
Hi Josh, would you ever do livestreams? Would love to see angular 14 live builds
@JoshuaMorony
@JoshuaMorony 2 жыл бұрын
I don't know if I'm cut out for live streams, I can't even deal with my wife looking over my shoulder when I code!
@hubertboguski
@hubertboguski 2 жыл бұрын
@@JoshuaMorony haha, if u ever do do it tho i have a feelin ppl would like it. and that way youd be able to teach your wife to code too haha! but either way i appreciate the vids brother
@aleksandarveselinovic5985
@aleksandarveselinovic5985 Жыл бұрын
How would you pass different custom components depending on the employee's data? For example, if there is a date in the employees you would create a date picker from NgBoostrap, or if there is a boolean in data then you would use your custom toggle component?
@tinmancode
@tinmancode Жыл бұрын
Are you building a form builder. I guess you would need a factory component that can create other components based on input resource type it should process. Then you'll need a good or okay enough generic interface to express your source input(data type, name, validations, optionals and miscellaneous data) that be based to your factory component. Take a look at react mui or ng zoro
@YordiDavid
@YordiDavid Жыл бұрын
Thx, great video! Is there a way to call a method in the TableComponent from our ng-template ?
@ChauTran
@ChauTran Жыл бұрын
Yes. If you expose that method on the TemplateRefContext
@ambarvita8513
@ambarvita8513 2 жыл бұрын
next videos is pagging :D
@rkrao8582
@rkrao8582 Жыл бұрын
How do you make testing works with this approach?
@noraneco6762
@noraneco6762 Жыл бұрын
Can this be achieved using ng-content and what's the difference?
@ChauTran
@ChauTran Жыл бұрын
ng-content won't work because you cannot pass context back to ng-content. In the example, Table component is what iterates through the Array of items then we allow customization via TemplateRef; we can then pass each item in ngFor back to the TemplateRef if it's provided. ng-content won't have this
@eqprog
@eqprog Жыл бұрын
Holy shit
@KubkaYT
@KubkaYT 11 күн бұрын
Overcomplicating code :)
@alinmateut8792
@alinmateut8792 Жыл бұрын
Indeed, it works, but only if I set angularCompilerOptions: {"strictTemplates": true}
ngTemplateOutlet is WAY more useful than I realised
16:36
Joshua Morony
Рет қаралды 74 М.
Should we really NEVER subscribe in Angular apps?
13:22
Joshua Morony
Рет қаралды 18 М.
Little brothers couldn't stay calm when they noticed a bin lorry #shorts
00:32
Fabiosa Best Lifehacks
Рет қаралды 20 МЛН
Мы сделали гигантские сухарики!  #большаяеда
00:44
SPILLED CHOCKY MILK PRANK ON BROTHER 😂 #shorts
00:12
Savage Vlogs
Рет қаралды 49 МЛН
TypeScript Generics are EASY once you know this
22:21
ByteGrad
Рет қаралды 133 М.
Why I use a view model stream for my Angular templates
15:11
Joshua Morony
Рет қаралды 33 М.
are we seriously STILL talking about this?
10:00
Low Level Learning
Рет қаралды 18 М.
What I learned from this crazy RxJS stream in my Angular app
25:31
Joshua Morony
Рет қаралды 21 М.
WTF is "modern" Angular development?
10:46
Joshua Morony
Рет қаралды 70 М.
Learn TypeScript Generics In 13 Minutes
12:52
Web Dev Simplified
Рет қаралды 256 М.
The KEY to unions and intersections in TypeScript
4:32
Andrew Burgess
Рет қаралды 10 М.
Little brothers couldn't stay calm when they noticed a bin lorry #shorts
00:32
Fabiosa Best Lifehacks
Рет қаралды 20 МЛН