Using Custom Elements with Angular

What is Angular?

Angular is a platform that makes it easy to build applications with the web. Angular combines declarative templates, dependency injection, end to end tooling, and integrated best practices to solve development challenges. Angular empowers developers to build applications that live on the web, mobile, or the desktop

How to use Custom Elements with Angular?

The only Angular-specific step we need to take to make Angular play well with Web Components is to add the CUSTOM_ELEMENTS_SCHEMA to our app module and import our Smart Elements

.

	import { NgModule, CUSTOM_ELEMENTS_SCHEMA  } from '@angular/core';
	import { BrowserModule } from '@angular/platform-browser'; 
	import { FormsModule } from '@angular/forms';

	import { AppComponent } from './app.component';
	import '@smarthtmlelements/smart-core/source/smart.core.js';

	@NgModule({
		declarations: [AppComponent],
		imports: [BrowserModule, FormsModule],
		schemas: [ CUSTOM_ELEMENTS_SCHEMA ],
		providers: [],
		bootstrap: [AppComponent]
	})

	export class AppModule { }
	

We can now use our custom element as if it was just a native html element. Data binding and event handlers will just work right out of the box.

Example

Here’s how we would use our Smart.ListBox element as part of a simple Angular app. First, our component template:

app.component.html

	 <smart-list-box [selectionMode]="selectionMode">   
		  <smart-list-item value="United Kingdom">United Kingdom</smart-list-item>  
		  <smart-list-item value="United States">United States</smart-list-item>  
		  <smart-list-item value="United States Minor Outlying Islands">United States Minor Outlying Islands</smart-list-item>  
	 </smart-list-box>  
	

We have bound the selectionMode property of our custom element to dynamic values in our Angular component

app.component.ts

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

	@Component({
		selector: 'app-root',
		templateUrl: './app.component.html'
	})

	export class AppComponent implements AfterViewInit {
		selectionMode: string = 'checkBox';
		
		ngAfterViewInit(): void {

		}
	}
	

Note: In the package.json, you should include a dependency to Smart's npm package. Ex: "@smarthtmlelements/smart-core": "2.0.0"
Download our example from here:
angular-sample.zip.