Angular Elements

Hi Friends,

Hope you are all well. In this post let’s play around with Angular elements.

Angular Elements is a new way to write web components that run on any web based application using Angular (and other associated libs) without having to worry about dependencies.

In this post let’s see how to build a newsletter signup form.

Let’s begin.

A screencast of this post.

 

The code for this post can be found – here.

Scaffold out a new application and simply install the below libraries.

Once this is done, add Angular elements to your project using

(This command will work only with Angular cli 6.0 and above. If you are not using it consider upgrading.. :) )

Alright. Now go ahead and generate a new component as shown below.

Open up app.module.ts and change it as shown below.

Let’s break this down.

Our app is not going to loading app-root anymore., i.e it wont take AppComponent and use it as the entry point.

We are telling our app to bootstrap our component (NewsSignupComponent) in the ngDoBootstrap() method as you can see above.

Open news-signup.component.ts file and add the below code.

Open up news-signup.component.css and add the below code.

Open up news-signup.component.html and add the below code.

Alright, now simply run a ng serve.

You will see a subscription form.

Nice. Now how to use this in a separate app or in any app.

Run the below command.

You will see a dist directory that looks like below

projdir

Now simply create a new directory and create an index.html file in it.

Add the below code.

Paste all the necessary js files and css files into this directory and that’s it..

Open the index.html file in a browser and you would see your form and it would function perfectly as well.

Cool.. Angular Elements opens up a whole new world of possibilities. Now we can write stuff using angular that would run on any web technology stack without worrying about any dependency or anything.

Thanks for reading.. Peace.. :)

 

Liked it? Take a second to support admin on Patreon!