[Angular 2] Passing data to components with 'properties'

Besides @Input(), we can also use properties on the @Component, to pass the data.

import {Component, View, NgFor, Input} from 'angular2/angular2';

@Component({
    selector: 'reddit-article'
})
@View({
    directives: [],
    template: `
        <article>
            <div class="votes">{{article.votes}}</div>
            <div class="main">
                <h2>
                    <a href="{{article.link}}">{{article.title}}</a>
                    <span>({{ article.domain() }})</span>
                </h2>
                <ul>
                    <li><a href (click)="article.voteUp()">Up</a></li>
                    <li><a href (click)="article.voteDown()">Down</a></li>
                </ul>
            </div>
        </article>
    `
})

export class RedditArticle {
    @Input() article: Article;

    voteUp() {
        this.article.voteUp();
        return false;
    }

    voteDown() {
        this.article.voteDown();
        return false;
    }
}

 

Works the same as:

import {Component, View, NgFor, Input} from 'angular2/angular2';

@Component({
    selector: 'reddit-article',
    properties: ['article']

})
@View({
    directives: [],
    template: `
        <article>
            <div class="votes">{{article.votes}}</div>
            <div class="main">
                <h2>
                    <a href="{{article.link}}">{{article.title}}</a>
                    <span>({{ article.domain() }})</span>
                </h2>
                <ul>
                    <li><a href (click)="article.voteUp()">Up</a></li>
                    <li><a href (click)="article.voteDown()">Down</a></li>
                </ul>
            </div>
        </article>
    `
})

export class RedditArticle {
    article: Article;

    voteUp() {
        this.article.voteUp();
        return false;
    }

    voteDown() {
        this.article.voteDown();
        return false;
    }