Skip to content

Instantly share code, notes, and snippets.

@alvipeo

alvipeo/config.js

Last active April 3, 2016 22:28
Show Gist options
  • Save alvipeo/013108b407a520a4655621348c00d4f0 to your computer and use it in GitHub Desktop.
Save alvipeo/013108b407a520a4655621348c00d4f0 to your computer and use it in GitHub Desktop.
Download ZIP
ContentChild problem
Raw
config.js
System.config({
//use typescript for compilation
transpiler: 'typescript',
//typescript compiler options
typescriptOptions: {
emitDecoratorMetadata: true
},
//map tells the System loader where to look for things
map: {
app: './src'
},
//packages defines our app package
packages: {
app: {
main: './main.ts',
dialog: './dialog.ts',
defaultExtension: 'ts'
}
}
});
Raw
index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>playground</title>
<link rel="stylesheet" href="styles.css">
<script src="https://code.angularjs.org/2.0.0-beta.13/angular2-polyfills.js"></script>
<script src="https://code.angularjs.org/tools/system.js"></script>
<script src="https://code.angularjs.org/tools/typescript.js"></script>
<script src="config.js"></script>
<script src="https://code.angularjs.org/2.0.0-beta.13/Rx.js"></script>
<script src="https://code.angularjs.org/2.0.0-beta.13/angular2.dev.js"></script>
<script src="https://code.angularjs.org/2.0.0-beta.13/http.dev.js"></script>
<script src="https://code.angularjs.org/2.0.0-beta.13/router.dev.js"></script>
<script>
System.import('app')
.catch(console.error.bind(console));
</script>
</head>
<body>
<app></app>
</body>
</html>
Raw
src\dialog.ts
import {Component, ContentChild, AfterContentInit} from "angular2/core";
@Component({
selector: "ilg-dialog",
template: `<div class="modal">
<div class="header">
<h3>Dialog Component</h3>
<p>It has 2 content children: header and body. But none is projected and @ContentChild() props are null.</p>
<p>Open the console to see the output.</p>
<ng-content select="ilg-dialog-header"></ng-content>
</div>
<div class="body">
<ng-content select="ilg-dialog-body"></ng-content>
</div>
<p><strong>Header object: [{{dheader}}]</strong></p>
<p><strong>Body object: [{{dbody}}]</strong></p>
</div>`
})
export class IlgDialog implements AfterContentInit {
@ContentChild("ilg-dialog-header") dheader: any;
@ContentChild("ilg-dialog-body") dbody: any;
ngAfterContentInit(): any {
console.log("this.dheader =", this.dheader);
console.log("this.dbody =", this.dbody);
}
}
Raw
src\main.ts
import {Component} from 'angular2/core';
import {bootstrap} from 'angular2/platform/browser';
import {Observable} from 'rxjs/Rx';
import {IlgDialog} from "./dialog";
@Component({
selector: 'app',
template: `<div>
<h2>ContentChild problem</h2>
<ilg-dialog>
<ilg-dialog-header></ilg-dialog-header>
<ilg-dialog-body></ilg-dialog-body>
</ilg-dialog>
</div>`,
directives: [IlgDialog]
})
export class App {
constructor() {}
}
bootstrap(App, []);
Raw
styles.css
/* todo: add styles */
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment