Skip to main content
Ben Nadel
On User Experience (UX) Design, JavaScript, ColdFusion, Node.js, Life, and Love.

You Cannot Project Static Content Into The Root Component In Angular 2.0.0

By Ben Nadel on

Lately, I've been thinking about the idea of an application loading screen in Angular 2 and I wanted to test something I've never tried before: projecting static content into the root component in an Angular 2 application. Long-story, short - it doesn't work. It doesn't throw an error or anything - the projected content is simply omitted.

Run this demo in my JavaScript Demos project on GitHub.

To test this, I tried including child-content in my index file:

<!doctype html>
	<meta charset="utf-8" />

		You Cannot Project Static Content Into The Root Component In Angular 2.0.0

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

		You Cannot Project Static Content Into The Root Component In Angular 2.0.0


			Projected Content (from Index.htm)



As you can see, I have some test content in between the <my-app> tags. Ordinarily I would have something like , "Loading..." in this area, done with the expectation that this content would be replaced by the root component's template. But, in this case, I am attempting to use the core <ng-content> directive to project these static nodes into the root template:

// Import the core angular services.
import { Component } from "@angular/core";

	selector: "my-app",
			Before (App)


			After (App)
export class AppComponent {

	// I initialize the component.
	constructor() {

		// ...



As you can see, I'm trying to project the content from the index page into the rendered app component. But, when we run this, we get the following output:

Projecting static content into the root component in Angular 2.0.0.

As you can see, the root component's template rendered properly; but, the projected content (from the index page) was omitted. I would generally consider this the expected behavior; but, I wasn't sure how it would behave. And now I know. And, knowing is half the battle!

Reader Comments