angular 6 custome elements or web component example

For Consultation : +91 9887575540

Stay Connected :

Creating web component in angular 6: Angular element

An angular element is a new feature of angular 6 framework angular elements translate your angular components into web component means using Angular 6 elements feature you can use your component as a Dom element. these angular elements are used to upload dynamic contents in the angular app.  angular element helps to insert dynamic HTML code after angular app compilation.  To use angular elements in angular project required rxjs and rxjs-compat for now.

@angular/elements are used to add the new custom element of web component in the angular app.  createcustomelement() is an API provided by @angular/elements which is used to convert a component into the angular element.

Add elements & polyfill

To add the angular element repository we have to write following command   in terminal

ng add @angular/elements

Above command will add new node module that is called angular element  register. That support those browsers which do not support custom html element. A new polyfill document-register-element.js will be added.

Run Following code

Ng add rxjs-compat@6

Example of angular 6 element

Now let’s begin with new component

Step1 : Ng g c temp

Add following code into temp.component.ts

Step 2: Add Following code into temp.component.html

Step3: Replace the app.component.ts code with following code

Step 4: Add Following code into app.component.html

Step 5: Update app.module.ts

Step 6: Pass reference of following CDN into index.html for all browser compatibility

Step 7: Run Program and see output

ng serve –open

Output : 

Select your currency