Create New Angular Project:
ng new App
ng add @angular/elements
npm install document-register-element
ng generate component custom-button
import {Injector} from '@angular/core';
import { CustomButtonComponent } from './custom-button/custom-button.component';
import { createCustomElement } from '@angular/elements';
export class AppModule{
constructor(private injector: Injector) {
const element = createCustomElement(CustomButtonComponent, {
injector: this.injector
});
customElements.define('custom-button', element);
}
}
angular.json->custom-button->architect->build->scripts object we need to add:{
"input": "node_modules/document-register-element
/build/document-register-element.js"
}
Run this command in terminal:
ng build --prod --output-hashing=none &&
cat dist/App/runtime-es5.js
dist/App/polyfills-es5.js
dist/App/scripts.js
dist/App/main-es5.js >
dist/App/index.js
index.html
<head>
<script src="./dist/custom-button/index.js"></script>
</head>
<body>
<app-root></app-root>
<custom-button label="Reset"></custom-button>
<script src="./dist/custom-button/index.js"></script>
<body>
custom-button.component.html
<p>Custom Button works!</p><p-button label="{{buttonLabel}}"></p-button>
custom-button.component.ts
@Input('label') buttonLabel: any;Output:
