How to use @angular/elements - 10 common examples

Object.keys(EXAMPLE_COMPONENTS).forEach(key => {
      const element = createCustomElement(EXAMPLE_COMPONENTS[key].component, {
        injector,
      });
      customElements.define(key, element);
    });
    // icon

ngDoBootstrap() {
        const elem = createCustomElement(DotKeyvalueComponent, {injector: this.injector});
        customElements.define('dot-keyvalue', elem);
        // const elem2 = createCustomElement(DotTestComponent, {injector: this.injector});
        // customElements.define('dot-test', elem2);
    }
}

constructor(private injector: Injector) {
        console.log('TodoModule cstr');
        const customElement = createCustomElement(MyTodo, { injector });
        customElements.define('my-todo', customElement);
    }
    ngDoBootstrap() {

import { enableProdMode, destroyPlatform, Type, NgModuleFactory, CompilerFactory } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { registerAsCustomElements } from '@angular/elements';

import { AppModule, webComponents } from './app/app.module';
import { environment } from './environments/environment';
import { platformBrowser } from '@angular/platform-browser';

if (environment.production) {
  enableProdMode();
}

destroyPlatform();

const bootstrapFn = () => platformBrowserDynamic().bootstrapModule(AppModule);
registerAsCustomElements(webComponents, bootstrapFn)
  .then(() => console.log('Web Components are ready!'))
  .catch(err => console.log(err));

                map((_: CustomElementData) => createCustomElement(_.component, { injector: _.injector })),
                tap((customElement: any) => customElements!.define(selector, customElement)),

constructor(private injector: Injector) {
    customElements.define('hello-world-el', createCustomElement(HelloWorldComponent, {injector}));
    customElements.define(
        'hello-world-shadow-el', createCustomElement(HelloWorldShadowComponent, {injector}));
    customElements.define('test-card', createCustomElement(TestCardComponent, {injector}));
  }
  ngDoBootstrap() {}

ngDoBootstrap() {
    let elm: any;

    elm = createCustomElement(FlipSwitchComponent, {injector: this.injector});
    customElements.define('vcl-flip-switch', elm);

    elm = createCustomElement(BusyIndicatorComponent, {injector: this.injector});
    customElements.define('vcl-busy-indicator', elm);

    elm = createCustomElement(ButtonComponent, {injector: this.injector});
    customElements.define('vcl-button', elm, {
      extends: 'button'
    });

  }
}

ngDoBootstrap() {
    const el = createCustomElement(UserPollComponent, { injector: this.injector });
    
    customElements.define('user-poll', el);
   }
}

ngDoBootstrap() {
    if (environment.production) {
      const el = createCustomElement(EditorWrapperComponent, { injector: this.injector });
      customElements.define('js-bubble', el);
    }
  }

constructor(private injector: Injector) {
    const strategyFactory = new ElementZoneStrategyFactory(WebComponentComponent, this.injector);
    const element = createCustomElement(WebComponentComponent, { injector: this.injector, strategyFactory });
    customElements.define('openvidu-webcomponent', element);
  }