You Cannot Project Static Content Into The Root Component In Angular 2.0.0
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:
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!
Want to use code from this post? Check out the license.
Reader Comments