Learn What the Directive Composition API Is and How To Use It in Angular 15

In this video, we'll be explaining what the Directive Composition API is and how to use it in Angular 15. This new API allows us to create complex directives using composition instead of inheritance. We'll also be playing around with the API and seeing how it can be used to create more concise and elegant directives.

If you're new to directives and Angular 15, then this video is a great place to start. By the end of this video, you'll have a good understanding of the Directive Composition API and be able to use it in your upcoming projects!

✨ Chapters:
00:00 Intro
02:52 Create the Directives to use
08:30 Compose two Directives into one
10:25 Expose the Inputs
12:07 Expose the Outputs
14:10 Use the Directives in the host component
16:23: Use case - The host component provides data to the directive
22:26 Thank you

******************************************************
Let's Connect
******************************************************

#angular #learnAngular #angularTutorial #webdevelpment #webdeveloper #webdevelopers

[MrJameelopix]

most underrated youtube channel.
we need more videos like these.

[ytamb]

I didn't understand the significance of the directive composition API when it was announced, but you have explained the concepts really well. Thanks.

[andresmauriciofajardoolaya]

this is a better explain than angular team does. Thanks for the video

[JBuchmann]

Very helpful, thank you! This is also a nice refresher for creating simple Directives. And also a reminder to use Directives more because I tend to forget about them.

[mumps]

Wow, LOVE this explanation. Thank you! I hadn’t seen the must-be-stand-alone req before this…so that means I might not be able to combine third party directives I guess…I’ll have to experiment.

[BenceGutai]

I always come here if something needs to be explained related to Angular. Great tutorial again, thanks for your work! :)

[ranjanadeore]

Thank you sir for uploading a great lecture explanation. Your teaching method is very deep from scratch to end.

[oktomatiko]

Please produce more video content! It's really helpful! For example Angular Elements, Angular Microfrontends with Webpack Federation, etc...

[sudiptomukherjee]

Thank you for this excellent and informative video.

[Nabulio]

I just discovered your channel. Great explanations. You have a new subscriber!

[luigidicarmino]

Thank you for your great tutorials over all. Please keep going with this perfectly created content for Angular education.

[fmaransatto]

Awesome explanation, thank you so much!

[titokris]

Thanks Fanis. A fantastic explanation and example to go along. You gave a lot of understanding to the Directive Composition API !!!

[DjSilent]

You are more amazing than David Blaine, thank you for this

[priyankaravichandran]

Amazing, very clear explanation, great job

[claudiuciprianbetiuc]

One more nice and clean explanation. Thanks!

[mikoajholcman]

Great job Mr! I like the way you explain the concept.

[SamiullahKhan]

The official example wasn't helping but these are helpful, I will need more use case for host directive

[김찬기-cg]

Thank you for susch educatinal information about Directives. I have a question! The change detection will run when you use HostListener, so what is the point of declaring runOutSideAngular method inside the onClick function??

[christianaustria]

Awesome content. Thanks.
One question though, is importing the standalone directives in NgModule in this case required? It seems they work with just the hostDirectives in the component