Build Angular Tooltip Without Libs - Angular Dynamic Component

Поділитися
Вставка
  • Опубліковано 22 гру 2024

КОМЕНТАРІ • 29

  • @MonsterlessonsAcademy
    @MonsterlessonsAcademy  3 місяці тому

    WATCH NEXT: Angular Unit Testing Course - All That You Need to Know About Testing - ua-cam.com/video/bv9z_UfSqgM/v-deo.htmlsi=WVzOWtdQUZWEbqsz

  • @Trunks3tks
    @Trunks3tks Рік тому

    This video is pure gold! Thank you!

  • @boycovclub
    @boycovclub Рік тому +1

    the best teacher!!!

  • @adbc2
    @adbc2 Рік тому +1

    As always, a very informative tutorial. 👍 FYI ComponentFactoryResolver for dynamic component creation has been deprecated since v13.

    • @regedam7559
      @regedam7559 Рік тому

      Hi
      As far as I know, it is relevant to use ViewContainerRef now.
      But it can be inconvenient because only Component and Directive can inject it. For example, we won't be able to use it normally in a service unlike ComponentFactoryResolver.
      Perhaps you know other alteratives?

  • @davebudah
    @davebudah Рік тому +1

    All these tips are making me better everyday. Can you make a tutorial on how we can use Angular/typescript to (1) detect device theme(light or dark) and adapt to that, (2) an option to switch themes manually. I usually just use vanilla javascript and css to achieve this even in my angular projects.

  • @andersonoterohernandez8963
    @andersonoterohernandez8963 Рік тому

    this is very helpful, thanks ☺

  • @MrShevrin
    @MrShevrin Рік тому +1

    good video, but I couldn't use ComponentFactoryResolver in my project (Abgular 14)
    - this class is already depricated

    • @adbc2
      @adbc2 Рік тому

      component class can be used directly with ViewContainerRef.createComponent()

    • @MonsterlessonsAcademy
      @MonsterlessonsAcademy  Рік тому

      exactly

    • @rikgeelen
      @rikgeelen Рік тому +2

      The deprecated ComponentFactoryResolver can be replaced by ViewContainerRef.
      In the constructor
      private viewContainerRef: ViewContainerRef,
      In the onMouseEnter
      this.tooltipComponent = this.viewContainerRef.createComponent(TooltipComponent);

  • @niteshagarwal5169
    @niteshagarwal5169 Рік тому

    I have written the same code, but on mouse enter it appends the tooltip component to the body but it is not getting displayed. Please help me out with this.

  • @ilnurryazhapov
    @ilnurryazhapov Рік тому

    ComponentFactoryResolver is deprecated...

  • @jaroslavbilek7361
    @jaroslavbilek7361 Рік тому

    stellar

  • @pythonlibrarian224
    @pythonlibrarian224 Рік тому

    Good stuff

  • @gamawfouskotouskaiopoionti5514

    Would be a great idea, if in the tooltip we could add HTML...
    For example an icon and a message🙂

    • @adbc2
      @adbc2 Рік тому +1

      You could extend the idea and pass a TemplateRef with any html you wish.

    • @MonsterlessonsAcademy
      @MonsterlessonsAcademy  Рік тому +1

      You can look on this video. We render modal in body with custom template
      ua-cam.com/video/MuHpsz7Q3P0/v-deo.html

  • @sashachechoitko7215
    @sashachechoitko7215 Рік тому

    since v16 ComponentFactoryResolver has been removed

    • @MonsterlessonsAcademy
      @MonsterlessonsAcademy  Рік тому

      Even earlier. Check how to do it now
      stackoverflow.com/questions/70946038/replace-deprecated-angular-componentfactoryresolver-componentfactory

  • @olehtalanov6697
    @olehtalanov6697 Рік тому +3

    You can use [style.left.px]=“left” to avoid ugly string concat ))