Angular 2: Difference between revisions

Jump to navigation Jump to search
1,153 bytes added ,  5 April 2016
add sort functionality
add multiple items
add sort functionality
Line 265: Line 265:


bootstrap(TrainerApp);
bootstrap(TrainerApp);
</syntaxhighlight>
----
Add sorting functionality.
<syntaxhighlight lang="javascript">
({
`
...
<div class="ui grid posts">
    <trainer-item *ngFor="#res_item of sortedResources()" [resource]="res_item"></trainer-item>
</div>
`
})
class TrainerApp {
    resources: Resource[];
    constructor() {
        this.resources = [
            new Resource('Chapter 1','Angular 2','http://angular.io','3',10),
            new Resource('Chapter 2','Angular 2','http://angular.io','3',10),
            new Resource('Chapter 3','Angular 2','http://angular.io','3',10),
        ];
    }
    addResource(title: HTMLInputElement, category: HTMLInputElement, link: HTMLInputElement, credit: HTMLInputElement): void {
        console.log(`Adding resource -- title: ${title.value}, category: ${category.value}, link: ${link.value}, credit: ${credit.value}`);
        this.resources.push(new Resource(title.value,category.value,link.value,credit.value));
        title.value = category.value = link.value = credit.value = '';
    }
    sortedResources(): Resource[] {
        return this.resources.sort((a: Resource, b: Resource) => b.credit - a.credit);
    }
}
</syntaxhighlight>
</syntaxhighlight>

Navigation menu