import {Component, Input} from 'angular2/core';
import HelloComponent from './hello.component';
import GoodbyeComponent from './goodbye.component';
@Component({
selector: 'app',
template: `<div>
<hello-component [myName]="name"></hello-component>
<hello-component myName="Other World"></hello-component>
<goodbye-component [myName]="name"></goodbye-component>
<goodbye-component myName="Your World"></goodbye-component>
</div>`,
directives: [HelloComponent, GoodbyeComponent]
})
export class App {
name: string;
constructor() {
this.name = "World";
}
}
import {bootstrap} from 'angular2/platform/browser'
import {App} from './app.component'
bootstrap(App);
<!DOCTYPE html>
<html>
<head>
<title>Angular 2 QuickStart</title>
<!-- 1. Load libraries -->
<script src="https://code.angularjs.org/2.0.0-beta.0/angular2-polyfills.js"></script>
<script src="https://code.angularjs.org/tools/system.js"></script>
<script src="https://code.angularjs.org/tools/typescript.js"></script>
<script src="https://code.angularjs.org/2.0.0-beta.0/Rx.js"></script>
<script src="https://code.angularjs.org/2.0.0-beta.0/angular2.dev.js"></script>
<!-- 2. Configure SystemJS -->
<script>
System.config({
transpiler: 'typescript',
typescriptOptions: { emitDecoratorMetadata: true },
packages: {'app': {defaultExtension: 'ts'}}
});
System.import('app/boot')
.then(null, console.error.bind(console));
</script>
</head>
<!-- 3. Display the application -->
<body>
<app>Loading...</app>
</body>
</html>
import {Component, Input} from 'angular2/core';
@Component({
selector: 'hello-component',
template: '<p>Hello, {{myName}}!</p>',
inputs: ['myName']
})
export default class HelloComponent {
myName: string;
constructor() {}
}
import {Component, Input} from 'angular2/core';
@Component({
selector: 'goodbye-component',
template: '<p>Good Bye, {{myName}}!</p>',
})
export default class GoodbyeComponent {
@Input()
myName: string;
constructor() {}
}