Creating custom element with Angular 6


Angular elements

Angular elements are framework agnostic custom HTML elements that are made out of Angular components. This is the latest, and in may I add the coolest, Angular 6 feature that allows maximum re-usability of components as they can be used in a wide variety of frameworks and environments.

But what is a custom element anyways? A custom element allows you to define your very own HTML tag that its content and attributes are controlled by JavaScript. By mapping JavaScript classes into the custom HTML tag, the browser renders the custom element. Many browsers including Chrome and Safari are natively supporting custom HTML elements. To know more about the list of supporting browsers you can visit Angular’s browser support page.

The beauty of custom elements is they bootstrap themselves which means by adding them to DOM content, they will start working so there is no need to know Angular to work with them. For example your custom button HTML tag may looks like <custom-button></custom-button> so as long as JavaScript resource for this element is present, you would be able to use it in any HTML page without Angular resources added to it.

Now lets see how we can make a custom element in an Angular app.

Prerequisites:

NodeJs and Angular CLI are necessary to get your application started. You can download NodeJS from https://nodejs.org/en/ and Angular CLI via below command:

npm install -g @angular/cli

now it’s time to use CLI to kick start a new app. You can use below command to start a new app:

ng new angular-custom-button-example — style=scss

which starts a new Angular app by creating a folder called angular-custom-button-example (not too creative in naming!) and uses Sass styling. If you aren’t familiar with Sass you can remove that bit and your app would use Css by default. In my tutorial I’m using Sass but you can always use https://www.sassmeister.com/ to convert Sass to Css for your project. I’m going to use Bootstrap in this application to make design for my custom button and layout easier.

npm install -save bootstrap

Now you need to change directory to your app using:

Cd angular-custom-button-example

Use the following command to create your component. Later we’re going to add ability to the app to make the component abstract and ready to be turned into a custom web element.

ng generate component custom-button

now add the following HTML code in “src/app/custom-button/custom-button.component.html”

<button class=”col-md-2 btn btn-danger” (click)=”clicks()”>{{label}}</button>

In above code, I’ve created a button which emits click event and has a label. Obviously the label is just a place holder and we need to get the value from somewhere else. This way you won’t need to change label of the button by touching the component code.

To style the button I have used below Sass code in “src/app/custom-button/custom-button.component.scss”. click on the link below to find the styles.
https://github.com/ramin-ahmadi/Angular-element-custom-button/blob/master/src/app/custom-button/custom-button.component.scss

Now we need to add couple of things to “src/app/custom-button/custom-button.component.ts” to make sure that custom button runs. Replace below code with what you have there. click on the link below to find the file.
https://github.com/ramin-ahmadi/Angular-element-custom-button/blob/master/src/app/custom-button/custom-button.component.ts

Next step is to transform the custom button component into an element by adding below code to “src/app/app.module.ts”
https://github.com/ramin-ahmadi/Angular-element-custom-button/blob/master/src/app/app.module.ts

Congratulations, you have created your first custom element and now it’s time to build it and export it as an element.

In order to produce the custom element, we need to have below dependencies:

fs-extra : adds file system classes necessary.

concat : links multiple files together.

try below line to install them

npm install fs-extra concat

at your project root create a “element-build.js” file and add below to it.
https://github.com/ramin-ahmadi/Angular-element-custom-button/blob/master/element-build.js

This would create the custom element in a “elements” folder at root project level. And finally, use below command to build the element.

npm run build:elements

Congratulations, you have created your very first custom element.

Here is link to code repo for this sample. https://github.com/ramin-ahmadi/Angular-element-custom-button

You can reach me at https://twitter.com/ramin_ahmadi if you needed any help 😊

PS: Just a quick heads up, with browsers which support Angular custom elements natively, the specification requires developers use ES2015 classes so don’t forget to set the target: “es2015” in your project’s tsconfig.json file.

Ramin Ahmadi
I am a full-stack front end developer with over 5 years experience in web design and development. I have worked with a wide variety of environments and languages including Angular, TypeScript, NodeJS, Restful API, Microservices, Atomic design, JQuery, Material design, Progressive Web Apps, DevOps, and many Azure tools. I make it a goal to automate myself out of routine tasks in my daily work. My motto is, ‘write human readable code, lean and clean’.

Comments 0

Your email address will not be published. Required fields are marked *

Creating custom element with Angular 6

log in

Captcha!

reset password

Back to
log in
Choose A Format
Trivia quiz
Series of questions with right and wrong answers that intends to check knowledge
Poll
Voting to make decisions or determine opinions
List
The Classic Internet Listicles
Image
Photo or GIF
Gif
GIF format