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.

To create our project we need to install AngularCLI(npm install -g @angular/cli) and then we create our new project with:

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.

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:

To use your Angular custom element inside a VueJs component you need to import your built js files and the styles.css file inside the index.html file in the public folder.

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 :

To use the Angular Custom element inside a Polymer component you need to import the built Javascript files; main, runtime, polyfills and runtime and put the tag inside the html template of the component.

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

To use the Angular Custom element you need to import the built Javascript files then you can use as a normal component inside your 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

To use your built Angular Custom element, you need only to import it to an html file like any other javascript code, import the polyfills, runtime and scripts files.

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.