How to build your angular components and use it everywhere
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 :
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.
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.