在angular项目中使用web-component ----How to use Web Components with Angular
原文： https://medium.com/@jorgecasar/how-to-use-web-components-with-angular-41412f0bced8
-------------------------------------------------------------
Custom Elements Everywhere, Angular passes all the tests so it is a good candidate to implement the use of Web Components.
jorgecasar/tutorial-webcomponents-angular repository.
ng new tutorial-webcomponents-angular and open it in our favorite editor.
src/app/app.module.ts:
export class AppModule { }chore(app): add custom elements schema · jorgecasar/tutorial-webcomponents-angular@8c60bf2
How to use Web Components with Angular
github.com
Adding polyfills
webcomponents polyfills.
First, install the dependency using NPM:
npm install --save @webcomponents/webcomponentsjs
angular.json file:
}
index.html.
And finally we must wait for the dependencies to load to start our app and thus make sure that the Web Components are ready to be used:
if (window.WebComponents.ready) {
// Web Components are ready
bootstrapModule();
} else {
// Wait for polyfills to load
window.addEventListener('WebComponentsReady', bootstrapModule);
}chore(app): load polyfills · jorgecasar/tutorial-webcomponents-angular@6bc76a1
How to use Web Components with Angular
github.com
ES5 Support
<head>, just before the webcomponents script included before.
</div>
With this we have our app ready to include Web Components, so let’s create one and check its compatibility.
Creating a Web Component
Justin Fagnani.
npm i --save @polymer/lit-element
wc-mood:
customElements.define('wc-mood', WebComponentsMood);app.component.ts:
import './wc-mood/wc-mood';
And we use it in the html of our component:
<my-element mood=”awesome”></my-element>
feat(wc-mood): create web component · jorgecasar/tutorial-webcomponents-angular@bfd3b51
How to use Web Components with Angular
github.com
Testing the interaction with the Web Component
Now that we have the Web Component working, let’s try the interaction with it.
Set properties from Angular
randomMood method that changes that property:
this.moods[index];
}
}
And we make the corresponding change in the html to establish the property and we make that by clicking on the Angular logo we establish another value to the property:
feat(wc-mood): set property to Web Component · jorgecasar/tutorial-webcomponents-angular@ff75f50
How to use Web Components with Angular
github.com
Listen to events from Angular
To complete the interaction, we will launch an event from the component to listen to it from Angular.
In the Web Component we will notify the changes in the properties sending the event:
this.dispatchEvent(
new CustomEvent(prop + '-changed', {
detail: { value: _changedProps[prop] }
})
);
}
}
mood. We do this because it is the most logical from my point of view and also both Angular and Polymer use this pattern, so we can begin to standardize it ????
Once we have made this change we can already hear the event from Angular. To verify that angular receives the event we will animate the Angular logo for 1 second using the following method:
this.isChanged = false, 1000);
}
animated class to the image:
feat(wc-mood): dispatch event from Web Component to Angular ·…
How to use Web Components with Angular
github.com
Two-way data binding
To crown things off and simplify the way to establish and listen to the event we can use the double data binding:
moodChanged method when the value changes:
this.moodChanged();
}
}
feat(wc-mood): support two-way data binding · jorgecasar/tutorial-webcomponents-angular@4ae8b4a
How to use Web Components with Angular
github.com
Demo
For you to see the operation here I leave the demo:
https://tutorial-webcomponents-angular.firebaseapp.com/
