Ben Nadel
On User Experience (UX) Design, JavaScript, ColdFusion, Node.js, Life, and Love.
Ben Nadel at BFusion / BFLEX 2010 (Bloomington, Indiana) with: Ed Bartram and Vaughn Bartram
Ben Nadel at BFusion / BFLEX 2010 (Bloomington, Indiana) with: Ed Bartram@edbartram ) and Vaughn Bartram

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

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";
  •  
  • @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() {
  •  
  • // ...
  •  
  • }
  •  
  • }

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

Post A Comment

You — Get Out Of My Dreams, Get Into My Comments
Live in the Now
Oops!
Comment Etiquette: Please do not post spam. Please keep the comments on-topic. Please do not post unrelated questions or large chunks of code. And, above all, please be nice to each other - we're trying to have a good conversation here.