NgTemplateOutlet in Angular - Everything You Have to Know (2022)

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

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

  • @DecodedFrontend
    @DecodedFrontend  Год назад +20

    💥 Learn Angular Forms in-depth and start building complex form controls with ease💥
    🔗 10% discount for the first 10 students - bit.ly/advanced-ng-forms-discounted
    💡 Short Frontend Snacks (Tips) every week here:
    Twitter - twitter.com/DecodedFrontend
    Instagram - instagram.com/decodedfrontend
    LinkedIn - www.linkedin.com/in/dmezhenskyi

  • @ibrahimbhabay37
    @ibrahimbhabay37 Год назад +58

    please create a video on content projection.

  • @HackHeyner
    @HackHeyner Год назад +6

    Does not exist in the world, enough recognition for this guy! Absolute unit of a teacher!

  • @ЮліяКоцегуб
    @ЮліяКоцегуб Месяц назад +1

    Дякую, зрозуміле пояснення теми 👍

    • @DecodedFrontend
      @DecodedFrontend  Месяц назад +1

      Дуже дякую за фідбек 😊

  • @djedaaa2232
    @djedaaa2232 Год назад +17

    I just want to say, i’m crazy about your courses and tutorials. You really have a gift for teaching, you dive deep into subject and talk about complex things which others often avoid do to the complexity. This channel (and also your paid courses) are such a refresher for Angular community.. Keep up the great work!

  • @advaithsurya4039
    @advaithsurya4039 Год назад +7

    I absolutely love angular and [ngTemplateOutlet] is one of my favourite topics because they allow my template to be extremely reusable. It is indeed very powerful in terms of functionality.

  • @davidwang5445
    @davidwang5445 Год назад +14

    Another excellent video. Well structured, clearly expained. Three parts with small changes enhanced the concepts. Recap helps the viewers remember what has learned. Thank you so much and happy holidays!

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

      Thank you, I am glad that you liked the video. Have a great holidays as well :)

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

    I don't speak English (I'm Brazilian), but your explanation is so clear and concise that even if I don't know much English I can understand 98% of what you say. By the way, I love your content.

  • @sukdipkar8876
    @sukdipkar8876 3 месяца назад

    Nobody in youtube teaches angular like this depth as you! Thank you very much and keep teaching us such valuable concepts.

  • @АнастасияШагаева-й8ч
    @АнастасияШагаева-й8ч 10 месяцев назад

    Дмитрий, спасибо большое! Очень понятно и подробно объясняете, одно удовольствие смотреть Ваши ролики.

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

    One more useful video, thanks a lot. Small remark: content projection can also be used in combination with ng-template approach when we use content projection to provide the template to be instantiated inside the recipient component (instead of using @Input for this).

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

      That is exactly what I was thinking about at the end of the video. I think that Dmytro wanted to show us new Angular feature instead - ngTemplateOutlerInjector which is also very cool by the way :)

    • @DecodedFrontend
      @DecodedFrontend  5 месяцев назад

      Hey guys :) Yes, you are right (you both :) ). Actually, many things could be accomplished in many different ways, and "the best" solution is usually very dependent on the particular details and your goals. The solution in the video was chosen just for the demonstration of the ngTemplateOutlerInjector feature staying in the same and familiar context of the WeatherComponent component.

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

    Great job Dmytro! NgTemplateOutlet is a powerful directive that everyone should use often

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

    My most sincere congratulations.
    You have achieved something very difficult, explaining a complex Angular concept with a simple example and even showing useful tricks like $implicit, context and injector.
    Thank you very much!
    On the other hand, for me it is very strange to place the tags after the content in which they are going to be rendered. But I guess it's the only option to do it both inside and outside a component and without projection of .

  • @KvN-UA
    @KvN-UA Год назад +1

    Thanks a lot for the explanation. It's amazing!
    I would like to know more about content projection.

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

    There's never enough videos about ngTemplateOutlet 🤯

  • @santicanabalramos667
    @santicanabalramos667 Год назад +7

    Really interesting video! I would like to have a video related to content projection as well :)

  • @sercan272727
    @sercan272727 5 месяцев назад

    this was exactly what i needed. thanks for the video

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

    Insightful lesson, I have a use case for it.
    Got a reusable table I need to wire next year and this may be the solution I am gonna run with

    • @DecodedFrontend
      @DecodedFrontend  Год назад +2

      Yep, reusable table is a perfect use case and I think ngTemplateOutlet will perfectly work for you.

  • @mostafavii
    @mostafavii 6 месяцев назад

    Thanks for your greate video about template outelet. I've recently used it to create a dynamic mat-search-select. thanksssssss

  • @mario_2211
    @mario_2211 Год назад +2

    Great work
    I'd love to see a video on content projection

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

    I used to use NgTemplateOutlet and NgTemplateOutletContext directive to render repetitive code in the same component. It's really useful.

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

    U make my learning curve easy now :). This is the missing spot for more advanced concepts. Cheers

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

    I'l new in the game and your videos are very useful -. Thanks

  • @uidhtml
    @uidhtml 3 месяца назад

    U r awesome Dmytro.. ❤ from India Please keep making videos on important stuff of angular. Very helpful..

  • @OfficialVideos482
    @OfficialVideos482 Год назад +2

    Very Informative Pure Class 🙂

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

      Thank you for your feedback! I am glad that you liked it.

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

    I've learned so much from your videos. Your content covers topics I haven't found anywhere and it has helped me a lot in my work. Thank you so much!

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

    Great explanation... Thanks. I will share this video with ours juniors, for better understanding...

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

    Thaks for sharing. This content is gold

  • @hamilton.venttura
    @hamilton.venttura 4 месяца назад

    Muito bom Parabéns, a qualidade está muito boa de seus vídeos continue assim amigo!

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

    Again, High Quality Content,
    I came across this templateOutlet many times but couldn't get it left alone it's benefits, Even the official docs didn't do the justice (maybe it's me that it didn't reflect with me).
    This time I think, you can't cherish the benefits or fruits of declarative approach if haven't gone through the imperative approach like you did with the examples. I know the effort and time it takes to come up with such example's kudos to that.
    Although I have more experience with Angular than Vue, but in Vue (I think) they are called scoped slot and I have used it well but coming to Angular I didn't get the templateContext it until this Good, Lengthy video. After knowing this concept now, I think Projected Content don't have luxury of Context. What else?

  • @MrVinodkumar92
    @MrVinodkumar92 Год назад +2

    Can you pls explain content projection
    1. With slots
    2. With styling - do we need to add the styles in the projected component or in the component where the content is passed ?
    When viewencapsularion is emulated the ngcontent and nghost classes in Dom seems different
    Pls explain them as well.
    Thanks

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

      Thank you for suggestion :) I will definitely cover those things

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

    Great content and example, as always. One disadvantage of the ng-template context is that is not typified in when used (let-state) this could be a big problem on refactoring. I hope angular does something about this.

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

      Yeah...I also hope that it will be supported out of the box.

  • @TravisSomaroo
    @TravisSomaroo 10 месяцев назад

    Great stuff, would it be possible to have another video in the future for more advance use cases on ngTemplateOutlet as well as typing the templateOutlet with the Angular 16 features.

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

    Amazingly taught. Very informative. Thanks for this❤

  • @claudiuciprianbetiuc3985
    @claudiuciprianbetiuc3985 Год назад +2

    Great video! I would also be interested in a video about content projection and when to use content projection / ngTemplateOutlet

  • @xingfucoder2627
    @xingfucoder2627 Год назад +4

    Great video Dmytro. Would be great to have a course like the forms one, but for those Angular core middle or advanced topics.

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

      This is very interesting. I plan 2 new courses in the next year. Let's see what i come up with ;)

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

      @@DecodedFrontend Great Dmytro. Many thanks for your quick reply.

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

    Content projection 🙏🏻

  • @kendalljones99
    @kendalljones99 10 месяцев назад

    Fantastic video, extremely helpful! Thank you!

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

    Thank you! The best content about Angular.

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

    Awesome as usual. Quick correction: @ 9: 50 you mean IMPERATIVE paradigm. You then correctly reference implementing via a DECLARATIVE paradigm.

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

    very useful vid! thank you for being generous to us. you are really a smart guy!

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

    Not going to lie, you're a damn legend. But I'm only left a bit with my head scratching around 29:43 - does injecting the Injector provide the reference of the WeatherWidgetComponent? That feels almost a bit "magical" to me! How was the problem with the lack of the component reference solved before? Did people simply pass the function into the ngTemplateOutletContext? I can't remember if you did any blog content for these injectors, but if you didn't I would really, really love those. Thank you for making things easier for us! Without you, I would have been lost in Angular long ago. Nobody touches upon more advanced topics like you do.

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

    Please do content projection as well mate!
    After we trip[led our dev team size, we are juti n the process of standardising our components (so not every squad reinvents the dialog, the context-hint bar, etc).
    We have a bunch of good and keen Angular devs, but also many "fullstack :D" ppl not very comfortable with the framework.
    explaining to them how to create reusable components is so difficult, but this one is a great overview of embedded templates! Would be awesome to ahve content projection as well.

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

    Another great video!
    Thanks a lot for everything you do for us! I really learned a lot from your videos.
    Yes, we really want the next video with the ng-content tips and tricks.

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

    Thank you! Very useful video!!!

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

    So good video..... Thank you so so much

  • @williammendoza680
    @williammendoza680 8 месяцев назад

    muchas gracias, excelente video, nuevo subs

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

    Greate video, please make the ng-content video!!!

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

    Somehow I got distracted by your cat : )
    Excellent video Dmytro

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

    another awesome lesson!

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

    Another great video. Thanks ❤ and Happy new year 🎉🎉

  • @AntonioSantana-ll8il
    @AntonioSantana-ll8il Год назад

    Hi!! greetings from Colombia!! you videos are excellent and help me a lot to improve my code a 100% Would be nice if you start teaching IONIC with angular!!! Thanks for exists bro!

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

    Watching this video made me realize I know nothing about templates after working 4 years with Angular. I mean I used all of this before but not like this 😅

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

      You can't imagine how often it happens to me as well :D

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

    Great video, thanks, i think that's an amazing feature

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

      Yep, I am agree!

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

      @@DecodedFrontend i wish your country has a better year in that 2023, wich is very close and thanks for share your knowledge with us, good bless you, your family and your country

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

      @@haroldpepete Thank you so much, I appreciate it so much.

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

    Thanks

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

    You could set a type of TemplateRef using ngTemplateContextGuard

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

      Yep, this is exactly the solution to fix typings issue but it also requires additional “dummy” directive for the type inversion. Just a ContextGuard in WeatherWidget won’t work unfortunately.

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

    Using the structural directive syntax *ngTemplateOutlet="templateName; context: { $implicit: variable, color: 'blue' }" we can specify all the information together. I suppose in Angular 14 they extend this to support the injector value

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

    very useful and helpful with of course high quality, not sure if my suggestion is right, because I find this speaking pace seems to me slow, maybe increase a bit speed of speaking would get more attractions. :)

  • @MK-we4dl
    @MK-we4dl Год назад

    Спасибо, Дмитрий, вы мой Сенсей! В очередной раз благодаря вашим наставлениям я решил две проблемы которые не давали мне спокойно спать)) Спасибо!!! Ждем проекцию контента.

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

    Could you create a video on angular universal?

  • @weradsaoud2018
    @weradsaoud2018 2 месяца назад

    thank you

  • @geekybruce4819
    @geekybruce4819 5 месяцев назад +1

    why not just give provide state & action at root or app.component level & inject both at other places where we want to use state & action since that will be one single instance available at all place? also is inject one component in other component good pratice ? cuz generally it is service that we inject

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

    Please create video on ng-content

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

    Informative video. I do have a question, why didn't we use ng-content for dynamic content in a widget container. Additionally, I think the widget component should be dummy (no data)

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

    ¡Gracias!

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

      Thank you so much for your support! I appreciate it :)

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

    лайк не глядя!
    хотелось бы ещё субтитры или русскоязычную версию

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

      Зачем. У Димона инглишь очень хороший и понятный. Это ты ещё гайды индусов не слушал :).

    • @DecodedFrontend
      @DecodedFrontend  Год назад +2

      я очень хочу пустить субтитры на Украинском, но писать их это примерно так же долго как создавать видео. Поэтому я пока отложил это дело :(

    • @MK-we4dl
      @MK-we4dl Год назад

      инглиш для разработчика маст хев так сказать!

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

      @@DecodedFrontend На жаль, моя англійська не дозволяє зрозуміти всі 100% інформації. Якби були субтитри чи ще кращий курс українською, це було б шикарно)

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

    luka doncic teaching angular in the offseason

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

    thanks lot

  • @abdurrahmanahmed7057
    @abdurrahmanahmed7057 7 месяцев назад

    Luka Doncic at it again!

  • @ugochukwuumerie6378
    @ugochukwuumerie6378 5 месяцев назад

    How do you create a typed template context and template ref

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

    Happy New Year, Dmytro) Wish you all the best:)

  • @jorgecanas3668
    @jorgecanas3668 6 месяцев назад

    I'm using your example and it works fine until I want to trigger an Output event on the parent component it doesn't work, but if I put a console.log inside the function I'm triggering the console log prints the data so it's communicating but for some reason it doesn't trigger the event, would you have any ideas as to why this is happening?

  • @ranaivosonherimanitra5110
    @ranaivosonherimanitra5110 Год назад +2

    What's the purpose of exclamation point (!) Here?

    • @DecodedFrontend
      @DecodedFrontend  Год назад +8

      Thanks for your question :) It tells TypeScript that the property won't have an initial value and and will be setup later in runtime.

    • @VinitNeogi
      @VinitNeogi Год назад +4

      It is the non-null assertion operator to tell the compiler this variable is not null or undefined.

  • @dev-gj3dh
    @dev-gj3dh 3 месяца назад

    wow!!!

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

    How can the solution that the ngTemplateOutletInjector brings be done in Angular versions lower than 14?

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

      You can provide injector (or particular service you need) of WeatherComponent via template context and then from the context provide to the target component as an input and fetch dependencies from there. Maybe there are another workarounds but I heard only about this one.

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

    💥

  • @user-rp9iis1en6h
    @user-rp9iis1en6h Год назад +1

    Suppose I have created a reusable form group control, that utilizes a custom form control itself. I want to reuse this form group control across different forms, the only difference is the validation logic which should be passed from the parent forms. How to achieve it? So the validation path will be something like parent->formGroup control->custom control.
    N.B. Form group control is also another form control .

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

      Do you have a small Stackblitz with this use case? Because from what I understood you just have to provide a validator via e.g @Input or DI and in the reusable FormGroup and it just has to add this validator calling addValidators method of the FormGroup. But I am quite sure that I am missing something, so the Stackblitz example would help a lot here.

    • @user-rp9iis1en6h
      @user-rp9iis1en6h Год назад

      @@DecodedFrontend Unfortunately stackblitz example is not available at the moment. Let me add a bit more. My concept is something like, I have many forms where I have to deal with a group of dropdown. Those dropdowns together generates a data set.(i.e. address section). Now, If I create a custom control with group of dropdowns,so that can write the data section to parent form model, than surely I can reuse this custom control accross different different forms. But may be in some case I have to change the validations. Sometime i may only need a few dropdowns , sometime all dropdown may be mandatory.
      Now, If I create a custom dropdown input control, and use this inside my custom group of dropdown control, than the scenario would be, Parent form will use the group control, group control will internally use custom dropdown control. Parent will define the validation logic. Hopefully now I was able to clearly explain my concept. Appreciate your time.

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

      i have done something similar to this , Hope it helps
      have a reusable single input component and by passing a object as input i can switch between different types of inputs(i.e number , text , textarea)
      yes validations also passed as well (i.e pattern , minlength , required)
      reusable component should implement ControlValueAccessor,
      it should also have formgroup with single formcontrol
      i also had a formgroup in the parent component as well
      u can also pass custom validation function to this reusable input component as well if the validation doesnt depend on other form fields
      if it depends on other form fields
      u have to create validation function in parent component
      so in parent component template , u will paste this template of the reusable component passing the object for telling which type of input and validations
      the formcontrol in parent component also needs the same validations for it to work properly

    • @user-rp9iis1en6h
      @user-rp9iis1en6h Год назад

      @@brucearmstrong5536 Could you please share the snippet/sample/ a tutorial video?

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

      @@user-rp9iis1en6h There are plenty of sources in internet

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

    Hi Dymtro, you content is really great and I am from India and I liked it so much, can I know how you check library source code in vs code itself in same project?

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

      Hi :) It is actually not the "source code in the same project". I just had another VS code window with angular source code opened and on post-production I just cut the transition, so it looks like I jumped immediately to source code which is not really true.

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

      @@DecodedFrontend oh okay thank you.

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

    Im trying to pass method inside context. I want trigger this method with click. Now i'm able to pass function, but is triggered no only from click. Have u ever tried same thing?

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

    Please upload your course on Udemy

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

    Great!! Just question. How di you access ngtemplate direttive file from vs code? If i ctrl +click the ngtemplateoutelet i see only the d.ts file and not the typescript.

  • @MahmoudTarek-pz1rl
    @MahmoudTarek-pz1rl 10 месяцев назад

    Im trying to build custom table using angular material table, providing custom table row using ngTemplateOutlet is not working or im missing something, any advice
    thanks

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

    Why can't we just pass actions using let-action the same way we pass let-state? That seems easier.

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

    Dog Breed
    here mat-card has children like mat-card-header/content and mat-card-header have child like mat-card-subtitle
    this snippet is from angular material and i want to know the effective way for us to achieve this in our projects
    its basically how to create custom component that acts like a tag in angular

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

    thumb up for cat behind

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

    Can the template outlet use components that have their own template outlets, who in turn have their own template outlets (recursive template outlets-ish) ?

  • @CeezGeez
    @CeezGeez 4 месяца назад

    has anyone told you you look like Luka doncic? thanks for the videos btw

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

    Great tming, hello I have lots of nesting in html template(I'm working with forms) and I was thinking aoubt using template to make it more readable. Is it good idea or should I solve in another way?

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

    You set your cover picture exactly like a country man from east...

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

      You can move out of an eastern village but the village will never move out of you.

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

    Hi,
    Thanks for your video !
    Is this approach better than using @ContentChild ?
    The use of @ContentChild seems more "appropriate" as the custom template is defined inside my component selector rather than outside.
    Or does it depend on the use case ?
    If there are multiple components that need to override the template, the @Input will be more convenient as the template will be
    defined only once.
    Whereas it will be defined inside each component with the use of @ContentChild ?

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

    Nice Cat:)

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

    🙏🙏🙏

  • @TruyenDuy-xp7nr
    @TruyenDuy-xp7nr 9 месяцев назад

    I had been very focused until I saw that cat behind.

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

    The cat stole the show.

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

      that’s true 😁

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

      @@DecodedFrontend The truth is I watched the entire video, as usually. I think your concerns regarding previous one, about custom builders, are not relevant to the stuff you are doing. These are the best, the deepest and well explained tutorials on the net. They are simply not for everyone. Thank you.

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

    👍👍👍👍✅

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

    injector = inject(Injector)

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

    injector = inject(Injector) lul. Great video tho

  • @תומרקיסר
    @תומרקיסר 9 месяцев назад

    Tallent

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

    Kinda complex subject.

  • @syimykamatov8955
    @syimykamatov8955 11 месяцев назад

    Good topic