docs: fix `elements` example (#24840)

PR Close #24840
This commit is contained in:
Jan De Wilde 2018-07-11 16:34:56 +02:00 committed by Victor Berchet
parent b137f09345
commit 9be222f448
7 changed files with 23 additions and 9 deletions

View File

@ -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);
}

View File

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

View File

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

View File

@ -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));

View File

@ -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);

View File

@ -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",

View File

@ -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"