Image for post
Image for post

How to build your angular components and use it everywhere

Angular is the second most used Front-end Javascript based framework(The first if we count AngularJs and Angular 2+), Angular is a Google backed framework, it was published in 2016 after all most a full rewriting of its previous version AngularJs published on 2010. One of the main features of Angular was the ability to develop for multiple platforms: web, mobile, and native desktop. So what makes Angular appealing.

Angular is more than only tools, it provides also design patterns to build you application in well structured way. Angular organise code into modules, modules make an application segregated into features and reusable chunks, it allows also lazy loading and dividing the tasks within the team members according to the appropriate roles.

Angular Components are extensible and decoupled which allow the users to compose multiple simple and easily replaceable components to create more complex ones, with a clear separation between the presentation manipulation and the application logic.

Let’s create our first Angular component.

ng new <app name>

The project created will contain:

  • The default Angular project.
  • All the dependencies are installed in the node module folder
  • Testing files for each component.

Let’s create component, its going to have 2 inputs to initialise it variables from the hosting component(from other frameworks/libraries) and send an event to update one of this values inside its host, to simulate a complete interaction scenario.

Now that we have our Angular component working, we can build it as a web component using Angular element; it’s a feature that allow to package Angular components as custom elements introduced with the release of Angular 6.

To be able to do it you need to install some dependencies first.

npm install — save @angular/elements

npm install — save @webcomponents/webcomponentsjs

npm install — save document-register-element

Inside the angular.json file, you need to import document-register-element.js file.

Image for post
Image for post

Next step is to modify the way our AppModule bootstraps. for this we need to rename bootstrap array to entryComponents to prevent the AppComponent from bootstrapping with the module.

Next to create the custom element import Injector from @angular/core and createCustomElement from @angular/elements; this function returns an NgElementConstructor class that we link to a specific HTML tag.

Finally we need to add ngDoBootstrap to override the bootstrap function.

The Injector is a reference to the context of the module. This allows all the elements created in the same app to share the same context and to form a single Angular application. They can communicate with each other, share the router, using the same NgRx store…

You can find the full example on my github repository

Use your Angular Custom element inside a VueJs component:

Then you can use like any other component or html tag by simply add it to the HTML template of your component. In this example we are going to demo how this component interact with its host, by receiving data as input and emitting events when its value change, or by changing the value of its host variable using the two way binding.

Use your Angular Custom element inside Polymer :

As you can see in this example we are using the 2 way binding to interact with the Angular component. You should note that, as explained in the Polymer documentation; to two-way bind to native elements or non-Polymer elements that don’t follow this event naming convention, you can specify a custom change event name in the annotation using the following syntax:


Use your built Angular Custom element inside React component

As you can see we communicate using custom events to communicate between the host and the child component.

Use the Angular Custom element with plain Javascript

We can change the value of the attributes with Javascript like any Html element and we can listen to the events and change other parts of the DOM.

Thank you for reading this article. You can find the full examples in this repository. This includes the code for the examples and a way to run the examples locally if you want to experiment.

If you have any feedback or want to add something to this article please feel free to add a comment here.

You can also follow me on twitter.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch

Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore

Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store