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;
}