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

[@MrJameelopix]

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

[@CodeShotsWithProfanis]

Many thanks for your warm feedback Mohamed!

[@DChristop]

Congratulation Fanis! EAP for ever!!!

[@CodeShotsWithProfanis]

🥳🥳

[@andresmauriciofajardoolaya2721]

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

[@CodeShotsWithProfanis]

Glad you liked it and thanks for your feedback 🙂

[@ytamb01]

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

[@CodeShotsWithProfanis]

Thanks for your feedback Andy! Glad you liked it 🙂

[@andreifara9558]

Same here, it gives us now lots of options.

[@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.

[@BenceGutai]

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

[@CodeShotsWithProfanis]

Glad to hear that!

[@mikoajholcman4693]

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

[@CodeShotsWithProfanis]

Glad you liked it!

[@titokris5162]

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

[@CodeShotsWithProfanis]

Thanks for your feedback Tito! Glad you liked it 🙂

[@claudiuciprianbetiuc3985]

One more nice and clean explanation. Thanks!

[@CodeShotsWithProfanis]

Thanks for your feedback! Glad you liked it!

[@ranjanadeore2957]

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

[@CodeShotsWithProfanis]

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

[@sudiptomukherjee644]

Thank you for this excellent and informative video.

[@CodeShotsWithProfanis]

Glad you liked it Sudipto :)

[@oktomatiko59]

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

[@CodeShotsWithProfanis]

Thanks for your feedback. What you have asked for is great! Noted ;)

[@aram5642]

And if I may piggyback here: SSR too!

[@fmaransatto]

Awesome explanation, thank you so much!

[@CodeShotsWithProfanis]

Glad it was helpful!

[@luigidicarmino4669]

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

[@CodeShotsWithProfanis]

Thanks for your feedback. Good to know you liked it :)

[@Nabulio85]

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

[@CodeShotsWithProfanis]

Awesome, thank you!

[@Hariharan0606]

Clearly explained!

[@CodeShotsWithProfanis]

Glad you liked it

[@mumps59]

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.

[@CodeShotsWithProfanis]

Glad it was helpful!

[@priyankaravichandran851]

Amazing , very clear explanation ,great job

[@CodeShotsWithProfanis]

Glad it was helpful!

[@carloszm7494]

Gold content. Thanks

[@CodeShotsWithProfanis]

Glad you liked it :)

[@richnimbu]

Beautiful explanation!

[@CodeShotsWithProfanis]

Thank you!

[@김찬기-c7g]

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??

[@OlehBiblyi]

Thanks, nice examples.

[@CodeShotsWithProfanis]

Thank you!

[@christianaustria741]

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

[@CodeShotsWithProfanis]

I just saw that I did that. Thanks for pointing this out. We do not need to import the hostDirectives in the appModule

[@andreifara9558]

Just out of curiosity, for the last example with the EventDirective, would it be possible to set the "data: any" as @Input in EventDirective and pass through AppComponent's template? Like you did with the "color" input of the UnderlineDirective

[@giorgoskontis7185]

Thank you for the video :D

[@CodeShotsWithProfanis]

You are welcome :)

[@yuriinadilnyi3029]

cool and clear explanation

[@CodeShotsWithProfanis]

Glad to hear that!

[@costagmc1]

great prof.

[@JoshDeveloper]

what's the app u r using to record the videos ? )

[@CodeShotsWithProfanis]

I use OBS for the recording and kdenlive for editing

[@JoshDeveloper]

@@CodeShotsWithProfanis Awesome, thanks)

[@bally8428]

Great video

[@CodeShotsWithProfanis]

Thank you!

[@brtk7]

I really like that compositional style of building components, very powerful. What if two directives or component share outputs names/ has conflicting names? Thanks

[@aram5642]

I'm curious if those two mouseenter (or any other) listeners can be run in any deterministic order... It doesn't matter in this particular example, but could matter in a different one.

[@CodeShotsWithProfanis]

If by "run in a deterministic order" you mean the "execution order", then yes, they have a specific order where they are executed. You can find more here angular.io/guide/directive-composition-api#directive-execution-order If this is not what you meant :) please reply

[@DjSilent]

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

[@CodeShotsWithProfanis]

Thanks for your warm feedback. Glad you liked it 🙂

[@arthurfedotiew3609]

Thank you Master Profanis!) Is it possible to scope host directive DI to host view itself, or is it inevitable thta child views will have access to host directive?

[@richerite]

Cool example, but I can’t think of practical use cases? Does anyone have any suggestions

[@SamiullahKhan]

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

[@CodeShotsWithProfanis]

Glad you found it useful!

[@pskabdulnawaz2622]

Hi Profanis, Just a query at kzbin.info/www/bejne/aISZd4mqYtmEba8 why do we need to add MouseEnterDirective to imports array in NgModule when it is already declared as standalone. Can you please clarify? Edited: Got it, as AppComponent is not declared as a standalone we are defining it as a dependency in the imports array. BTW I learned a lot from your videos and am a regular subscriber of yours. Thank you for all your hard work and content.

[@CodeShotsWithProfanis]

Thanks for your comment. We actually do not have to import the HostDirectives in the NgModule. Thanks for pointing this out

[@TheCMajor9th]

exceptional ! i tried it out also with onmouseover event :) thank you for sharing !

[@CodeShotsWithProfanis]

Glad you liked it 🙂