/** * @license * Copyright Google Inc. All Rights Reserved. * * Use of this source code is governed by an MIT-style license that can be * found in the LICENSE file at https://angular.io/license */ import {CommonModule} from '@angular/common'; import {COMPILER_OPTIONS, Compiler, CompilerFactory, Component, Injectable, Injector, NgModule, NgModuleFactory} from '@angular/core'; import {BrowserModule} from '@angular/platform-browser'; import {JitCompilerFactory} from '@angular/platform-browser-dynamic'; // #docregion SimpleExample @Component({selector: 'hello-world', template: 'Hello World!'}) export class HelloWorld { } @Component({ selector: 'ng-component-outlet-simple-example', template: `` }) export class NgTemplateOutletSimpleExample { // This field is necessary to expose HelloWorld to the template. HelloWorld = HelloWorld; } // #enddocregion // #docregion CompleteExample @Injectable() export class Greeter { suffix = '!'; } @Component({ selector: 'complete-component', template: `Complete: {{ greeter.suffix }}` }) export class CompleteComponent { constructor(public greeter: Greeter) {} } @Component({ selector: 'ng-component-outlet-complete-example', template: ` ` }) export class NgTemplateOutletCompleteExample { // This field is necessary to expose CompleteComponent to the template. CompleteComponent = CompleteComponent; myInjector: Injector; myContent = [[document.createTextNode('Ahoj')], [document.createTextNode('Svet')]]; constructor(injector: Injector) { this.myInjector = Injector.create({providers: [{provide: Greeter, deps: []}], parent: injector}); } } // #enddocregion // #docregion NgModuleFactoryExample @Component({selector: 'other-module-component', template: `Other Module Component!`}) export class OtherModuleComponent { } @Component({ selector: 'ng-component-outlet-other-module-example', template: ` ` }) export class NgTemplateOutletOtherModuleExample { // This field is necessary to expose OtherModuleComponent to the template. OtherModuleComponent = OtherModuleComponent; myModule: NgModuleFactory; constructor(compiler: Compiler) { this.myModule = compiler.compileModuleSync(OtherModule); } } // #enddocregion @Component({ selector: 'example-app', template: `

` }) export class AppComponent { } @NgModule({ imports: [CommonModule], declarations: [OtherModuleComponent], entryComponents: [OtherModuleComponent] }) export class OtherModule { } export function createCompiler(compilerFactory: CompilerFactory) { return compilerFactory.createCompiler(); } @NgModule({ imports: [BrowserModule], declarations: [ AppComponent, NgTemplateOutletSimpleExample, NgTemplateOutletCompleteExample, NgTemplateOutletOtherModuleExample, HelloWorld, CompleteComponent ], entryComponents: [HelloWorld, CompleteComponent], providers: [ // Setup the JIT compiler that is not set up by default because the examples // are bootstrapped using their NgModule factory. Since this example uses the // JIT compiler, we manually set it up for this module. {provide: COMPILER_OPTIONS, useValue: {}, multi: true}, {provide: CompilerFactory, useClass: JitCompilerFactory, deps: [COMPILER_OPTIONS]}, {provide: Compiler, useFactory: createCompiler, deps: [CompilerFactory]} ] }) export class AppModule { }