Component with <ng-content>
Turns out it's possible, if you intend to provide textual content. If you want Angular components, it's possible with the right HTML element (noscript). A little hacky, one might say. The trick is using a <noscript>
element.
HTML template:
<noscript id="appContent">
<h1>Hello, World!</h1>
<a [routerLink]="['Home']">Home</a>
</noscript>
<script>
var mainTemplate = document.getElementById('appContent');
window.mainTemplate = mainTemplate.innerText;
</script>
Root component:
import {Component, bootstrap} from 'angular2/angular2';
@Component({
selector: 'app',
template: 'Header: ' + window.mainTemplate ,
})
export class App {
}
bootstrap(App);
Make sure your Angular 2 code comes after the template definition.
Only applies if you use a <template>
tag: The catch is that since recently (http://angularjs.blogspot.com.br/2016/02/angular-2-templates-will-it-parse.html) Angular 2 brings its own parser, templates are case-sensitive. It is not the case for HTML in a browser environment. It means the browser may not keep the case in attributes and elements on this template hack.
UPDATE: I had a <template>
element in the original solution. A <noscript>
is much better as shouldn't be any case conversion.
When you run your example, did you notice how Hello World!
is displayed during loading?
Basically, the HTML between <app>
and </app>
is used to display something while Angular is booting up.
Also, from the source:
An application is bootstrapped inside an existing browser DOM, typically
index.html
. Unlike Angular 1, Angular 2 does not compile/process bindings inindex.html
. This is mainly for security reasons, as well as architectural changes in Angular 2. This means thatindex.html
can safely be processed using server-side technologies such as bindings. Bindings can thus use double-curly{{ syntax }}
without collision from Angular 2 component double-curly{{ syntax }}
.
The important part being Angular 2 does not compile/process bindings in index.html
. So, in order to do what you want, you will have to move ng-content
to a child component.