How to create a Web Component in Angular

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

КОМЕНТАРІ • 49

  • @damit0071
    @damit0071 6 днів тому

    Very nice..... 🎉

  • @AbhishekGupta-yb7yt
    @AbhishekGupta-yb7yt 5 місяців тому +1

    very well explained ..

  • @kartiksagar007
    @kartiksagar007 5 років тому +2

    Thanks for sharing this Video... :)

  • @mohamedbensalah7169
    @mohamedbensalah7169 4 роки тому +5

    This video should have million views,, so great

  • @kartiksagar007
    @kartiksagar007 5 років тому +4

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

  • @mralextacy
    @mralextacy 3 роки тому +1

    excellent

  • @joecok
    @joecok 4 роки тому +1

    Great great great tutorial, love you so much

    • @Ashotofcode
      @Ashotofcode  4 роки тому

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

  • @angularninja4698
    @angularninja4698 5 років тому

    Great video... Thanks :)

  • @AviAlgaly
    @AviAlgaly 4 роки тому +1

    works beautifully !
    Thanks!

  • @oleersoy6547
    @oleersoy6547 4 роки тому +1

    That totally rocked!!

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

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

  • @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  2 роки тому

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

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

  • @bharatpatil3734
    @bharatpatil3734 4 роки тому +2

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

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

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

  • @showsandsports
    @showsandsports 4 роки тому

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

  • @brenobcsilva
    @brenobcsilva 3 роки тому +1

    Muito bom, muito obrigado!!

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

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

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

  • @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 :)

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

  • @arunthakral0
    @arunthakral0 3 роки тому

    I dont have the view encapsulation native

    • @g-l8492
      @g-l8492 3 роки тому

      use -v ShadowDom instead