Angular Elements as Plugins in a Non-Angular Dashboard

Demonstrate how Angular Elements can be used as pluggable widgets inside a dashboard framework that is not built with Angular, focusing on dynamic instantiation and configuration.
// Assuming an Angular component named 'my-widget', compiled as a custom element

// Include the necessary Angular Elements polyfills
import '@webcomponents/custom-elements/src/native-shim';
import '@webcomponents/custom-elements/custom-elements.min';

// Include the Angular Elements bundle
// This should be a path to the compiled Angular Element
import './my-widget.element.js';

// Define a function to create and return the custom Angular Element
function createMyWidget(config) {
  // Instantiate the Angular Element
  const widgetElement = document.createElement('my-widget');

  // Set properties and attributes as needed, based on the config parameter
  for (let prop in config) {
    if (config.hasOwnProperty(prop)) {
      widgetElement[prop] = config[prop];

  return widgetElement;

// Function to dynamically add the widget to the dashboard
function addWidgetToDashboard(dashboardId, config) {
  const dashboard = document.getElementById(dashboardId);
  if (dashboard) {
    const widget = createMyWidget(config);
This code dynamically loads required polyfills for custom elements, loads the compiled Angular Element named 'my-widget', provides a function to create and configure the widget, and another function to add the widget to a dashboard with a specified ID. The config object is used to pass properties to the Angular Element during instantiation.