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

Поделиться
HTML-код
  • Опубликовано: 19 дек 2024

Комментарии • 71

  • @MrJameelopix
    @MrJameelopix 2 года назад +10

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

  • @DChristop
    @DChristop Год назад +1

    Congratulation Fanis! EAP for ever!!!

  • @ytamb01
    @ytamb01 2 года назад +8

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

  • @JBuchmann
    @JBuchmann Год назад +3

    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.

  • @andresmauriciofajardoolaya2721
    @andresmauriciofajardoolaya2721 2 года назад +6

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

  • @BenceGutai
    @BenceGutai Год назад +1

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

  • @mikoajholcman4693
    @mikoajholcman4693 Год назад +1

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

  • @sudiptomukherjee644
    @sudiptomukherjee644 2 года назад +1

    Thank you for this excellent and informative video.

  • @Nabulio85
    @Nabulio85 Год назад +1

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

  • @titokris5162
    @titokris5162 2 года назад +1

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

  • @oktomatiko59
    @oktomatiko59 2 года назад +2

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

    • @CodeShotsWithProfanis
      @CodeShotsWithProfanis  2 года назад +1

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

    • @aram5642
      @aram5642 Год назад

      And if I may piggyback here: SSR too!

  • @mumps59
    @mumps59 Год назад +1

    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.

  • @ranjanadeore2957
    @ranjanadeore2957 2 года назад +2

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

  • @claudiuciprianbetiuc3985
    @claudiuciprianbetiuc3985 2 года назад +1

    One more nice and clean explanation. Thanks!

  • @priyankaravichandran851
    @priyankaravichandran851 Год назад

    Amazing , very clear explanation ,great job

  • @luigidicarmino4669
    @luigidicarmino4669 2 года назад +2

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

  • @fmaransatto
    @fmaransatto Год назад +1

    Awesome explanation, thank you so much!

  • @richnimbu
    @richnimbu Год назад

    Beautiful explanation!

  • @김찬기-c7g
    @김찬기-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??

  • @christianaustria741
    @christianaustria741 2 года назад +1

    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
      @CodeShotsWithProfanis  2 года назад

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

  • @carloszm7494
    @carloszm7494 2 года назад +1

    Gold content. Thanks

  • @Hariharan0606
    @Hariharan0606 2 года назад +1

    Clearly explained!

  • @OlehBiblyi
    @OlehBiblyi 2 года назад +1

    Thanks, nice examples.

  • @costagmc1
    @costagmc1 2 года назад +1

    great prof.

  • @giorgoskontis7185
    @giorgoskontis7185 2 года назад +1

    Thank you for the video :D

  • @DjSilent
    @DjSilent 2 года назад +2

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

  • @yuriinadilnyi3029
    @yuriinadilnyi3029 Год назад

    cool and clear explanation

  • @arthurfedotiew3609
    @arthurfedotiew3609 2 года назад

    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?

  • @JoshDeveloper
    @JoshDeveloper 2 года назад +1

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

  • @andreifara9558
    @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

  • @brtk7
    @brtk7 2 года назад

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

  • @bally8428
    @bally8428 2 года назад +1

    Great video

  • @aram5642
    @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
      @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

  • @SamiullahKhan
    @SamiullahKhan 2 года назад +1

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

  • @richerite
    @richerite Год назад

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

  • @pskabdulnawaz2622
    @pskabdulnawaz2622 2 года назад +1

    Hi Profanis, Just a query at ruclips.net/video/2S6FVt-tQ7M/видео.html 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
      @CodeShotsWithProfanis  2 года назад +1

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

  • @TheCMajor9th
    @TheCMajor9th 2 года назад +1

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