Creating Reusable Web Component and using it with Angular
Hello ,
In this post I want to talk about the web components(Reusable) and why they are very useful to the organization, especially for large organization. Mostly many large organization often consolidate their front end code to pattern library to ensure the consistency.
Pattern library are extremely useful when company grows and spilt into multiple teams but it also comes with some challenges like different teams working with different front end frameworks (like angular,react,vue etc). then how do you build the pattern library that works for all.
1) One can’t choose any one framework because then you would be locked and doesn’t support all frameworks.
2) Writing all code to vanilla html/js/cs is quite difficult.
So the solution for both the problems would be custom element.
Web components are based 4 types
1) Custom Elements
2) Shadow Dom
3) Html imports
4) Html Template
So in this post we will first write our first and very basic web component which is just a increment , decrement the value. Then we will see how we can use that newly created web component to our angular project.( at the end it is just a js file so you can used it any of your favorite javascript framework like react,angular,vue.js etc) isn’t it sounds awesome guys!!!
Let’s dive with creating first custom component
Simple-Counter will look like this,
Can be used like this
<simple-counter [min]=”settings.min” [max]=”settings.max” [step]=”settings.step” (maxReached)=”handleMaxReached()” (minReached)=”handleMinReached()”>
</simple-counter>
We will be building one custom component which is having two button and one label to display the current value. we are creating four properties of that element.
1) Min
2) Max
3) Step
4) Value
And two custom event those were dispatched when some trying to extends the min and max limit. And two events or callback for increment and decrement when + or — button is pressed. It is as simple as normal counter which will increment the value by step size when + button is pressed and vice versa when — button is pressed.
Now let’s create one file inside the demo directory and named it as simple-counter.js
Configuration
1) Now your custom element to work on every browser you will need to add polyfills for it.
npm install @webcomponents/webcomponentsjs
then simply add one import statement to your angular’s polyfills.ts file as shown below
/***************************************************************************************************
* Zone JS is required by Angular itself.
*/
import ‘zone.js/dist/zone’; // Included with Angular CLI.
import ‘@webcomponents/webcomponentsjs/webcomponents-sd-ce.js’;
/***************************************************************************************************
2) Now in app.module.ts file imports CUSTOM_ELEMENTS_SCHEMA from @angular/core and also add schemas array in NgModule and also import the simple-counter.js file as shown below.
import { BrowserModule } from ‘@angular/platform-browser’;
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from ‘@angular/core’;
import { AppComponent } from ‘./app.component’;
import ‘./demo/simple-counter.js’;
@NgModule({
declarations: [AppComponent],
schemas: [CUSTOM_ELEMENTS_SCHEMA],
imports: [BrowserModule],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule {}
How to Use simple-Counter
app.component.html
app.component.ts
