Step by Step for Creating Your First Angular Element

Read full article on the Infragistics blog

Angular Elements allow us to create reusable Angular components, which can be used outside of the Angular application. You can use an Angular Element in any other application such as normal HTML, React, etc. Essentially, Angular Elements are normal components, which are packaged as Custom Elements. You can learn more about Custom Elements here.

We will keep things simple in this post and, in a step by step manner, learn to create a basic Angular Element. So, let us get started.

Step 1: Installation

Create a new project using Angular CLI

ng new demo1

Once the project is created, change directory to demo1 and install Angular Elements. For that, run an npm command, as shown below:

npm install @angular/elements

To work with older browsers, we need polyfill. So, let us install that also as shown below:

npm install @webcomponents/custom-elements

After installing polyfill, open polyfills.ts file and add these two entries:

Continue reading full article on Infragistics blog

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

Create a website or blog at WordPress.com