Angular Content Projection: Everything You Need to Know

It's very important to know how to effectively create #angular reusable #components. In this video, you will learn how to achieve this using Content Projection.
Chapters:
0:00 Intro
2:40 Provide an Input in the component
3:29 Intro to Content Projection using a single slot
4:53 Use multiple slots
8:50 Use multiple slots by leveraging the angular directives
12:03 Learn how to use conditional slots
19:50 Thank you
✨ Code: github.com/profanis/codeShots...
******************************************************
Let's connect
******************************************************
Twitter: / prodromouf
LinkedIn: / prodromouf
#angular #learnAngular #angularTutorial #webdeveloper #webdevelopment #frontenddeveloper #components

[@ChauTran]

Love it. One comment:
at 17:35, we can use `ContentChild(CarMainContent, {read: TemplateRef}) carMainContent: TemplateRef` to read the TemplateRef token from the directive instead of having to declare/inject the TemplateRef in the Directive itself.

[@CodeShotsWithProfanis]

Ohh yes! Thanks for pointing this out Chau 🙂

[@tamilcodebytes1915]

You are awesome, Profanis! 🥳! Please keep posting the videos. I'm checking your channel daily.

[@CodeShotsWithProfanis]

Thank you! Glad you like my content :)

[@andreymelendez1107]

Have been looking for this solution for a complete week, very helpful!!!!

[@CodeShotsWithProfanis]

Glad it helped!

[@sakarsr]

Excellent, you are really a great teacher. Thank you and good health.

[@CodeShotsWithProfanis]

Thanks for your warm feedback. Glad you liked it :)

[@AdyNgom]

Awesome video - nice pace and a lot packed into such a great example and use case.

[@CodeShotsWithProfanis]

Glad you liked it Ady! :)

[@kushoyarou]

Thank you for the always helpful content! Have a great year!

[@CodeShotsWithProfanis]

Thanks a lot. Have a wonderful year 🎉

[@avecesar]

Thank you!! I´ve been learning a lot from your videos; very clear, explanatory and useful.

[@CodeShotsWithProfanis]

Glad you like them! :)

[@developerfriendly]

thanks for the video. Angular content projection is a very complicated stuff. I wish Angular could simplify it like react does. In React just put everything inside tags and receive everything with children property in component.

[@ladimirobaquero6149]

thanks for your contribution

[@user-ws9in6yp3b]

Thank you for this! It helped me a lot!

[@madpwnz]

Woohooo!!! New video!
Thank you man!

[@CodeShotsWithProfanis]

Hope you enjoyed it!

[@felsherrr]

Brilliant video, I'm glad I clicked on this one first while searching for a vid. But what the hell, even such a small thing in the become sort of a mosnter. And at my work I have a HUGE component built with container ng content and containers. And it is a freaking mess to look at and maintain. I feel like McConaughey who fell into the black hole

[@user-is5bs8qb4y]

Super clear explanation. Thanks!

[@CodeShotsWithProfanis]

Glad you liked it 😊

[@unity3dconcepts434]

Wow.... so many concepts in one video. I loved it. Amazing... Subscribed and liked. 😀

[@CodeShotsWithProfanis]

Awesome! Thank you!

[@sarahibrahim8943]

thank you

[@Hariharan0606]

Clearly explained!

[@CodeShotsWithProfanis]

Thanks! Glad you liked it!

[@andresfelipecano4160]

magnific content the this video.

[@CodeShotsWithProfanis]

Thanks for your feedback. Glad you liked it!

[@s_gryt]

Cool explanation, liked it.
That "obj" hint on 3min 06sec, left screen line 4: @Component(obj: { .... - what plugin do you use for that?
(there are more examples, but I hope my questions makes sense)
Thank you.

[@CodeShotsWithProfanis]

It's this setting in the settings.json file
"typescript.inlayHints.parameterNames.enabled": "all"

[@028-manikandan3]

Thanks bro

[@CodeShotsWithProfanis]

You are welcome :)

[@kr30000]

...Angular really seems to have the worst templating syntax for composition.

[@ilhammaghfiro4819]

Thank you!! this is very awesome

[@CodeShotsWithProfanis]

Glad you liked it! :)