ngTemplateOutlet: The secret to customisation | Stephen Cooper |

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

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

  • @stephencooper9000
    @stephencooper9000 4 года назад +5

    Corresponding article indepth.dev/posts/1405/ngtemplateoutlet
    Stackblitz: stackblitz.com/edit/ngtemplateoutletcontext?file=src/app/my-selector/my-selector.component.html
    GitHub: github.com/StephenCooper/ngTemplateOutlets
    How to add Typing to ngTemplateOutlet: ruclips.net/video/dau7kQMdH4A/видео.html

  • @GleKit
    @GleKit 5 лет назад +13

    Excellent explanation of how to use dynamic templates in Angular

  • @06kawax
    @06kawax 4 года назад +2

    I used the same concept to create a reusable angular material table component where actions like( delete, edit, view, etc.. ) are passed using ng-template because they differ depending on the data

  • @rtpHarry
    @rtpHarry 5 лет назад +4

    Links at the end of the talk:
    angular.io/api/common/NgTemplateOutlet
    github.com/StephenCooper/ngTemplateOutlets
    stackblitz.com/edit/ngtemplateoutletcontext

  • @walterluszczyk
    @walterluszczyk 5 лет назад +5

    It is also quite convenient to use ngTemplateOutlet for different layouts on desktop and mobile.

    • @justinnobles3659
      @justinnobles3659 3 года назад

      This talk helps alot but I am trying to incorporate in my own project which is what you have achieved which is different dynamic layouts using ngTemplateOutlet but can’t seem to wrap my head around it yet. Do you have a stackblitz of using ngTemplateOutlet for different layouts, if not no worries 👌🏼

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

    Great presentation - brilliantly succinct and clear! 🙌🙌

  • @girumhagos4244
    @girumhagos4244 3 года назад

    Amazing talk, this is a revelation even as an Angular developer. The code you put on Stack blitz makes understanding this even better. Thanks Stephen Cooper and AngularConnect

  • @elyoaprogrammer
    @elyoaprogrammer 3 года назад

    Excellent content..thank you for sharing all this content about ngTemplateOutlet very helpful.!

  • @DebmallyaBhattacharya
    @DebmallyaBhattacharya 5 лет назад +8

    This was such a great topic! I'm gonna change dropdowns in our office project this Monday itself.

    • @colemangael9720
      @colemangael9720 3 года назад

      I know Im randomly asking but does someone know of a method to get back into an Instagram account?
      I somehow lost my login password. I would appreciate any tricks you can offer me.

    • @sethalden6471
      @sethalden6471 3 года назад

      @Coleman Gael Instablaster :)

    • @colemangael9720
      @colemangael9720 3 года назад

      @Seth Alden I really appreciate your reply. I got to the site thru google and I'm trying it out atm.
      Seems to take a while so I will reply here later when my account password hopefully is recovered.

    • @colemangael9720
      @colemangael9720 3 года назад

      @Seth Alden It did the trick and I now got access to my account again. I'm so happy:D
      Thanks so much you saved my account !

    • @sethalden6471
      @sethalden6471 3 года назад

      @Coleman Gael you are welcome :D

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

    Amazing concept and presentation. thank you Stephen for sharing it with us

  • @TheRuiMonte
    @TheRuiMonte 3 года назад +1

    Amazing content! I now truly understand this topic which was really confusing to me initially. Thank you so much!

  • @Klaster_1
    @Klaster_1 5 лет назад +2

    Great talk, I wish I saw something like this before learning about this stuff myself. For me, ngTemplate was the killer feature of Angular after upgrading from AngularJS, but the same pattern should be possible in 1.7.x too with some custom transclusion directives.

  • @giorgimerabishvili8194
    @giorgimerabishvili8194 5 лет назад +4

    Great talk, absolutely loved it!

  • @sekiro6969
    @sekiro6969 5 лет назад +12

    I didn't even know that there is such thing in angular

  • @VankataKisyov
    @VankataKisyov 4 года назад +2

    Thanks for the explanation! Not the easiest syntax to understand and wrap your head around though...

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

    Great concept!

  • @andsviat
    @andsviat 3 года назад +1

    Judging by the reaction of the audience during his talk, I'm pretty sure that he was talking to a wall. PS: Great explanation. Thanks a lot.

  • @SantoshSingh-nw8yy
    @SantoshSingh-nw8yy 4 года назад

    Great...good explanation 👍

  • @owlytv
    @owlytv 4 года назад

    Great talk Stephen! Just wondering if unlike ng-content if that then means you can have parent child events emitted and handled from the control in the template to the parent control without using a service?

  • @VankataKisyov
    @VankataKisyov 4 года назад +2

    I am having troubles understanding what @ContentChild is doing in this particular case?

    • @nickshulzhenko8156
      @nickshulzhenko8156 4 года назад +1

      Content child is used to get reference for a template from content projection of app-selector.

  • @aram5642
    @aram5642 3 года назад

    If I were to use the shark selector in many modules throughout an app, what would be the best way to provide a unified shark template app-wide? Some kind of ContentChild + directive?

  • @greg6618
    @greg6618 4 года назад +2

    Bad example at 6:15. Instead of polluting ngOnInit with
    if (!displayFunc) {
    this.displayFunc = x => x
    }
    We could've use default params right after @Input()
    @Input displayFunc?: string => string = x => x
    Wonder why google engineer doesn't use it in his examples.
    Still great talk, but I hate when speakers
    exaggerate disadvantages of one approach to highlight benefits of the other.

  • @rembautimes8808
    @rembautimes8808 3 года назад

    Great talk

  • @sunmoorthy
    @sunmoorthy 4 года назад

    nice. I tried on my own. How can I initialize the optionTemplate variable with correct template(my template in different component.ts file)?

  • @minic00ps
    @minic00ps 5 лет назад

    Stackblitz demo code: stackblitz.com/edit/ngtemplateoutletcontext
    Slides: www.slideshare.net/StephenCooper83/ng-templateoutlets-ac2019
    Twitter twitter.com/SCooperDev

  • @junaid1464
    @junaid1464 5 лет назад

    why checking in ngOnInit? instead just assign default function right there.

  • @MatiasAlibertti
    @MatiasAlibertti 3 года назад

    Amazing =)

  • @bonnes04
    @bonnes04 4 года назад

    Thanks...

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

    I don't like how the code is extremely sectioned as he is attempting to explain this convoluted concept. If the example were more linear, I believe this would be easier to understand. Is there a static piece of code to this exact problem that I can analyze so that I can follow this concept better? Could you have named the files, clearly depicting which file is the parent and which one is the child in this example? The instructor begins to lose me around 10:20

  • @almo679
    @almo679 3 года назад

    is this a show? you should inform your watchers: "this is a crappy show..."

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

    I want to create dynamic ng-tempalte refs, is that possible?
    @ContenChild ('my-dynamic-data')