Skip to content

Instantly share code, notes, and snippets.

@bennadel
Created September 19, 2016 11:18
You Cannot Project Static Content Into The Root Component In Angular 2.0.0
// Import the core angular services.
import { Component } from "@angular/core";
@Component({
selector: "my-app",
template:
`
<p>
Before (App)
</p>
<!-- WARNING: THIS DOES NOT WORK IN ROOT COMPONENT. -->
<ng-content></ng-content>
<p>
After (App)
</p>
`
})
export class AppComponent {
// I initialize the component.
constructor() {
// ...
}
}
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>
You Cannot Project Static Content Into The Root Component In Angular 2.0.0
</title>
<link rel="stylesheet" type="text/css" href="./demo.css"></link>
<!-- Load libraries (including polyfill(s) for older browsers). -->
<script type="text/javascript" src="../../vendor/angular2/2.0.0/node_modules/core-js/client/shim.min.js"></script>
<script type="text/javascript" src="../../vendor/angular2/2.0.0/node_modules/zone.js/dist/zone.js"></script>
<script type="text/javascript" src="../../vendor/angular2/2.0.0/node_modules/reflect-metadata/Reflect.js"></script>
<script type="text/javascript" src="../../vendor/angular2/2.0.0/node_modules/systemjs/dist/system.src.js"></script>
<!-- Load the Web Animations API polyfill for most browsers (basically any browser other than Chrome and Firefox). -->
<!-- <script type="text/javascript" src="../../vendor/angular2/2.0.0/node_modules/web-animations-js/web-animations.min.js"></script> -->
<!-- Configure SystemJS loader. -->
<script type="text/javascript" src="./system.config.js"></script>
</head>
<body>
<h1>
You Cannot Project Static Content Into The Root Component In Angular 2.0.0
</h1>
<my-app>
<p>
Projected Content (from Index.htm)
</p>
</my-app>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment