How to create a Web Component in Angular

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

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

  • @damit0071
    @damit0071 12 дней назад +1

    Very nice..... 🎉

  • @AbhishekGupta-yb7yt
    @AbhishekGupta-yb7yt 5 месяцев назад +1

    very well explained ..

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

    This video should have million views,, so great

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

    Thanks for sharing this Video... :)

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

    waiting for your next video for the same web component next level.

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

    Great great great tutorial, love you so much

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

      Hi Joyi, Thanks! glad it was useful. Cheers Mark

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

    excellent

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

    works beautifully !
    Thanks!

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

    That totally rocked!!

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

    Great video... Thanks :)

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

    Awesome, thanks for sharing!
    I'm noticing that my elements.js.gz file is 48k. The unzipped version is 128k. That seems like a lot for a simple button. Is there a way to strip this down to its core essentials?

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

    When I run the 'npm run build' command, it doesn't generate the 'scripts.js' file for me. please help.

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

      Idem

    • @g-l8492
      @g-l8492 3 года назад

      same happens to me

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

    Hello, thanks for this video. You has showed how to send params to web component (widget), but now how to get output data and how to respond to events of the web component from the external dom? I have an mvc app, and I need to "consume" a web component (angular app). In the mvc app I have a modal, and the widget will be into this modal, when the user make some action (click button) in the angular app, the app should return a data (I imagine vía widget property or some that) and that would be used by the mvc app, but at the same time the angular app would communicate the click event to the mvc app, so the mvc app detect widget click event and it would do something (close the modal). Sorry for my english, I'am from México, I used google translate. Regards!

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

      Hoping to do more on events in a future video Antonio - hopefully will be useful - Cheers Mark

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

    hi. can we export more than 1 element ?
    maybe i have 2 component that i want use it as web custom element ? and can it be reactive between 2 of them ?
    thanks 😁

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

    When I run the server and go to localhost:8080, I see an error "The module Vi was bootstrapped, but it does not declare "@NgModule.bootstrap" components nor a "ngDoBootstrap" method". I double checked the spelling of the method in the AppModule class and it looks fine. The error does point to elements.js.gz, but the spelling, etc, looks fine there too. Do you know why I could be getting this error?

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

      Hi Joe, that's a tough one sorry, I'd not be able to tell without digging into it some afraid.

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

    Muito bom, muito obrigado!!

  • @-eXtro
    @-eXtro 4 года назад

    Hi, What is it *cat*? Should install something? Or create some ...js for it?

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

      Hi eXtro, I can't recall where I use this afraid, could be the unix type command to view the contents of a file I reckon, comes with Windows cmd these days I think, I didn't install it explicitly for sure. Cheers Mark

    • @-eXtro
      @-eXtro 4 года назад

      @@Ashotofcode I have already understood that was unix :). Thank you fir your answer very much. I've used *tyoe* it works for ne fine. I've never used web elemenrs. Right now I have to implement some number of "web parts" with different UI and calls to the Rest Services. I find web elemenrs for this tast very good. I have one more question: Is it possible to create collection of web elemenrs in the same project? (Sorry for typing, my German T9 makes me surprised without end)

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

    Can we use this web component in Angular JS application

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

      hmm this is a good question, and I'm not sure sorry..

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

    Thanks for sharing this info.
    I am facing an error while testing this via index.html file as mentioned , the error is "Uncaught Error: In this configuration Angular requires Zone.js" , I am using angular 8.

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

      Hi - sounds like your missing an import for sure. Maybe try a google on zone.js and see which package you'll need to add. Let me know if any joy

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

    Thanks for tutorial, very nice and informative.
    Anyway, I am facing an issue on windows 10. "cat" is not recognized. Could anyone please help me with this ? I tried using powershell, but no success

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

      hi Aterr, there is not cat command on windows afraid. This should help you out though:
      stackoverflow.com/questions/60244/is-there-replacement-for-cat-on-windows
      Cheres
      Mark

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

    How to read a custom event/dispatch Event in an angular web component

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

    when executing npm run package it is showing as 'cat is not recognized as internal or external command'. can you please help me?

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

    Gj informative as always but one question can i create multiple custom elements in one project in Angular and Vue or not ?

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

      I know Im asking the wrong place but does anybody know of a way to get back into an Instagram account?
      I was stupid forgot my login password. I would love any help you can offer me!

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

      @Hector Dillon Instablaster ;)

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

      @Larry Brady Thanks for your reply. I got to the site through google and Im waiting for the hacking stuff now.
      Takes a while so I will get back to you later with my results.

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

      @Larry Brady It did the trick and I actually got access to my account again. I am so happy!
      Thank you so much you saved my account !

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

      @Hector Dillon glad I could help :)

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

    if the webcomponent created is to be used in another angular application how would one go about it??

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

    I dont have the view encapsulation native

    • @g-l8492
      @g-l8492 3 года назад

      use -v ShadowDom instead

  • @g-l8492
    @g-l8492 3 года назад

    I don't get a scripts.js file after running npm run build...

    • @g-l8492
      @g-l8492 3 года назад +1

      the other files are there. And when I remove the scripts from the package command, I get this error after running npm run serve: The command "http-server" could not be found

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

      So long ago I can't recall afraid Georg, cheers mark

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

    Thank you for your video. Excellent explanation. May Allah (GOD) guide and bless you.