@Component

Example

import {Component, TemplateConfig} from 'core/core.js';

@Component({
    selector: 'my-comp',
    bind: {myParam: 'myParam'},
    observe: {myParam: 'onParamChange'},
    controllerAs: 'ctrl',
    componentServices: [MyService],
    template: new TemplateConfig({
        url: 'path/to/myComp.html',
        directives: [MyChildComp]
    })
})
class MyComp {
    constructor(myService: MyService) {
        console.log('myParam: ' + this.myParam);
    }

    onParamChange(newValue) {
        console.log('myParam is now: ' + newValue);
    }
}

<my-comp my-param="123"></my-comp>

selector

(required)

A string representing the css selector for your directive. It can take any of the following forms.

Style	JavaScript	HTML
Element	selector: 'my-comp'	<my-comp></my-comp>
Attribute	selector: '[my-comp]'	<div my-comp></my-comp>
Class	selector: '.my-comp'	<div class="my-comp"></div>

template

(required)

The template is used to link up a view to your component. See TemplateConfig for details.

bind

(optional) You can use bind to map properties on your directive class to html attributes. This is the same as specifying a scope on a directive defination object in Angular 1.x.

Angular 1.x	Angular 2.0
scope: {myParam: '='}	bind: {myParam: 'myParam'}

observe

(optional)

An object where a key is a property on your directive class and a value is a function that will be called when the corresponding property changes.

controllerAs

(optional. defaults to ctrl)

todo

componentServices

(optional)

todo