Angular Elements — Your ngComponents everywhere

If you’re reading this, you already know Angular. So whether you’ve worked on AngularJS (1.x) or Angular (Angular2+), this article is about…

Muhammad Ahsan Ayaz

Muhammad Ahsan Ayaz

— 3 min read
Angular Elements — Your ngComponents everywhere

If you’re reading this, you already know Angular. So whether you’ve worked on AngularJS (1.x) or Angular (Angular2+), this article is about one of the exciting things going on in the Angular world.

Angular has been one of the most popular frameworks for the past few years. It started as a library that enhanced the HTML. And now it has a huge ecosystem that contains CLI, Server side rendering, Animations e.t.c. and it is still growing with things like Angular service worker. While these are making Angular awesome, there are some experimental projects in the ecosystem which are exciting.

Team Angular announced a new idea called Angular Labs during their recent conference at Angular Mix. The idea of Angular Labs is to keep the community in sync about new experiments before releasing them to the public (that’s an Angular thing for sure). There are four initiatives that fall under the hood of Angular Labs to date:

  1. Schematics
  2. Angular Elements
  3. CDK ( Component Dev Kit )
  4. ABC ( Angular + Bazel + Closure )

While all of these are exciting, I’ll go with Angular Elements for this article.

What are Angular Elements?

Angular Elements are Custom Elements. You can embed them into any web application. This enables us to write re-usable Angular components & widgets which we can use inside React, Vue, Preact or even with vanilla JS apps. The Angular Elements will blend in every framework. Below are some features of Angular Elements:

  • They are Self Bootstrapping
  • They actually host the Angular Component inside a Custom Element
  • They’re a bridge between the DOM APIs and Angular Components
  • Anyone can use it without having the knowledge of how Angular works.

How to create an Angular Element

You can follow these steps to create your Angular Elements

  • Fork (or clone) angular-elements repo
  • Create your widget/app folder inside src/demos folder (e.g. test-app )
  • Create your app’s module (e.g. TestAppModule -> test-app.module.ts)
  • Create your component (e.g. TestComponent -> test.component.ts)
  • Once your app is completed, run the webpack build to generate ngfactory files for your app by running the below command:npm run build
  • Use the custom_element_adapter to generate your Angular Element in your demo folder (e.g. src/demos/test-app with your ng-element named test-app.ngelement.ts )import nge from '../../custom_element_adapter';import { TestAppNgFactory } from '../../ngfactory/src/demos/test-app/test-app.ngfactory';nge.define( TestAppNgFactory );
  • After that, add your demo as an entry inside webpack.config.js as follows:entry: {
     'todo-app': './lib/demos/todo-app/todo-app.ngelement.js',
     ..
     'test-app': './lib/demos/test-app/test-app.ngelement.js'
    }
  • You can then create an html file in the public folder (e.g. test-app.html ) having content as follows:<html>
       <head>
           <meta charset="UTF-8">
           <meta name="viewport" content="width=device-width, initial-scale=1.0">
           <meta http-equiv="X-UA-Compatible" content="ie=edge">
           <title>Ng Elements Playground - Test App</title>
           <script src="es5-shim.js"></script>
           <script src="angular.js"></script>
           <script src="test-app.js" async></script>
       </head>
       <body>
           <test-app></test-app>
       </body>
    </html>

I also added a demo app (Stop Watch App) and created a PR against the angular-elements repository.

Conclusion

I liked the flexibility and possibilities Angular Elements are bringing to the table, even though they are not ready to use right away. I hope we’ll see Angular Elements being stable in a few months.

Sharing is caring! Please hit that 👏 and share this article with anyone who might enjoy it. You may star the repos (Angular Elements, Angular Elements Demos) or contribute to them too. For more like this, follow Modus Create: Front End Development or find me on Twitter.

Read more