Angular Custom Elements: Creating Reusable Components

Angular Custom Elements allow you to create reusable components that can be used in non-Angular applications. Custom Elements are a powerful feature that can help you share code across multiple projects and platforms. In this article, we’ll take a closer look at Angular Custom Elements and show you how to create them with code.

What are Angular Custom Elements?

Angular Custom Elements are a way of creating custom HTML elements using Angular components. Custom Elements are part of the Web Components specification, which is a set of APIs that allow you to create reusable components for the web. Custom Elements can be used in any web application or framework, and they work seamlessly with other web technologies like React and Vue.

Creating Angular Custom Elements with Code

Creating an Angular Custom Element is a straightforward process that involves a few simple steps. First, you need to create an Angular component that you want to turn into a Custom Element. In this example, we’ll create a simple component that displays a message on the screen.

import { Component, Input } from '@angular/core';

@Component({
  selector: 'hello-world',
  template: `
    <div>
      <h1>{{message}}</h1>
    </div>
  `,
})
export class HelloWorldComponent {
  @Input() message = 'Hello, World!';
}

Next, you need to create a new module that exports the component you just created. This module will be used to create the Custom Element.

import { NgModule, Injector } from '@angular/core';
import { createCustomElement } from '@angular/elements';
import { HelloWorldComponent } from './hello-world.component';

@NgModule({
  declarations: [HelloWorldComponent],
  entryComponents: [HelloWorldComponent],
  exports: [HelloWorldComponent],
})
export class HelloWorldModule {
  constructor(private injector: Injector) {
    const HelloWorldElement = createCustomElement(HelloWorldComponent, { injector });
    customElements.define('hello-world', HelloWorldElement);
  }
  ngDoBootstrap() {}
}

Finally, you need to bootstrap the module using the Angular ngDoBootstrap() method.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule, Injector } from '@angular/core';
import { HelloWorldModule } from './hello-world/hello-world.module';

@NgModule({
  imports: [BrowserModule, HelloWorldModule],
})
export class AppModule {
  constructor(private injector: Injector) {}
  ngDoBootstrap() {}
}

With these three steps, you’ve successfully created an Angular Custom Element. You can now use this element in any HTML page, just like any other HTML element.

<html>
  <head>
    <script src="./hello-world.bundle.js"></script>
  </head>
  <body>
    <hello-world message="Hello, World!"></hello-world>
  </body>
</html>

Conclusion

Angular Custom Elements are a powerful way to create reusable components that can be used across multiple platforms and projects. With just a few lines of code, you can create an Angular component and turn it into a Custom Element that can be used in any web application. Custom Elements are part of the Web Components specification and work seamlessly with other web technologies like React and Vue. If you’re looking for a way to share code across multiple projects and platforms, Angular Custom Elements are definitely worth considering.

Don’t miss reading other articles on Angular on Code4Developers

Yatendrasinh Joddha

I have healthy knowledge and experience in Azure, O365 and ASP.Net with c#, MVC, WebApi along with client-side frameworks and libraries like JavaScript, JQuery, KnockoutJs, AngularJs, Angular, ReactJs, NodeJs