docs: fix elements example (#24840)

PR Close #24840

aio/content/examples/elements/src/app/app.component.ts

@@ -1,6 +1,5 @@
-// #docregion
 import { Component, Injector } from '@angular/core';
-import { createNgElementConstructor } from '../elements-dist';
+import { createCustomElement } from '@angular/elements';
 import { PopupService } from './popup.service';
 import { PopupComponent } from './popup.component';
 
@@ -15,7 +14,7 @@ import { PopupComponent } from './popup.component';
 export class AppComponent {
   constructor(injector: Injector, public popup: PopupService) {
     // Convert `PopupComponent` to a custom element.
-    const PopupElement = createNgElementConstructor(PopupComponent, {injector});
+    const PopupElement = createCustomElement(PopupComponent, {injector});
     // Register the custom element with the browser.
     customElements.define('popup-element', PopupElement);
   }

aio/content/examples/elements/src/app/app.module.ts

@@ -1,4 +1,3 @@
-// #docregion
 import { NgModule } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

aio/content/examples/elements/src/app/popup.component.ts

@@ -1,4 +1,3 @@
-// #docregion
 import { Component, EventEmitter, Input, Output } from '@angular/core';
 import { animate, state, style, transition, trigger } from '@angular/animations';
 

aio/content/examples/elements/src/app/popup.service.ts

@@ -1,9 +1,8 @@
 
-// #docregion
 import { ApplicationRef, ComponentFactoryResolver, Injectable, Injector } from '@angular/core';
-
+import { NgElement, WithProperties } from '@angular/elements';
 import { PopupComponent } from './popup.component';
-import { NgElementConstructor } from '../elements-dist';
+
 
 @Injectable()
 export class PopupService {
@@ -40,7 +39,7 @@ export class PopupService {
   // This uses the new custom-element method to add the popup to the DOM.
   showAsElement(message: string) {
     // Create element
-    const popupEl = document.createElement('popup-element');
+    const popupEl: NgElement & WithProperties<PopupComponent> = document.createElement('popup-element') as any;
 
     // Listen to the close event
     popupEl.addEventListener('closed', () => document.body.removeChild(popupEl));

aio/content/examples/elements/src/main.ts

@@ -0,0 +1,11 @@
+import { enableProdMode } from '@angular/core';
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+
+import { AppModule } from './app/app.module';
+import { environment } from './environments/environment';
+
+if (environment.production) {
+  enableProdMode();
+}
+
+platformBrowserDynamic().bootstrapModule(AppModule);

aio/tools/examples/shared/package.json

@@ -22,6 +22,7 @@
     "@angular/common": "^6.0.0",
     "@angular/compiler": "^6.0.0",
     "@angular/core": "^6.0.0",
+    "@angular/elements": "^6.0.0",
     "@angular/forms": "^6.0.0",
     "@angular/http": "^6.0.0",
     "@angular/platform-browser": "^6.0.0",

aio/tools/examples/shared/yarn.lock

@@ -140,6 +140,12 @@
   dependencies:
     tslib "^1.9.0"
 
+"@angular/elements@^6.0.0":
+  version "6.0.9"
+  resolved "https://registry.yarnpkg.com/@angular/elements/-/elements-6.0.9.tgz#6c238632631fa545f4893db8b48a4e89b2a277b2"
+  dependencies:
+    tslib "^1.9.0"
+
 "@angular/forms@^6.0.0":
   version "6.0.0"
   resolved "https://registry.yarnpkg.com/@angular/forms/-/forms-6.0.0.tgz#436e2df39dc57db124da5a5c02bc63909fdf7046"