https://github.com/shadowhijackers/simple-angular-custom-element

show casing the custom element creation in angular
https://github.com/shadowhijackers/simple-angular-custom-element

Last synced: about 1 year ago
JSON representation

show casing the custom element creation in angular

• Host: GitHub
• URL: https://github.com/shadowhijackers/simple-angular-custom-element
• Owner: shadowhijackers
• License: mit
• Created: 2019-08-04T14:16:32.000Z (almost 7 years ago)
• Default Branch: master
• Last Pushed: 2023-01-07T08:24:26.000Z (over 3 years ago)
• Last Synced: 2025-04-15T02:52:05.937Z (about 1 year ago)
• Language: TypeScript
• Size: 2.6 MB
• Stars: 3
• Watchers: 1
• Forks: 1
• Open Issues: 22
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# Angular Custom Element

    

    1. Create an angular application without routing 

        Ex: ng new simple-angular-custome-element

    2. Go to the project 

        Ex: cd simple-angular-custome-element/

    3. Add the angular elements

        Ex: ng add @angular/elements

    4. Add the component 

        Ex: ng g component header

    5. Change the TS target version into ES2015

        EX: "target": "es2015",                

    6. Empty the Appcomponent of Bootstrap array in app module

        EX: bootstrap: []

    7. Create an Element by following

        ngDoBootstrap() {

            const headerElement = createCustomElement(HeaderComponent, {injector: this.injector});

            customElements.define('app-header', headerElement);

         }  

    8. Take the build

        EX: ng build --prod --output-hashing=none

    9. Merge the ./dist/simple-angular-custome-element/runtime.js 

                 ./dist/simple-angular-custome-element/polyfills.js 

                 ./dist/simple-angular-custome-element/scripts.js 

                 ./dist/simple-angular-custome-element/main.js   

                       to 

                       

                  destination file

                  

                  ./custome-elments/app-header.js       

                             

    10. now call the element

       Ex: 

>Note: Use ShodowDom View encapsulate if you the styles are conflicts 

## Examples 

   open the **custome-elements/index.html** file