@Component({
        selector: "expenses-component",
        templateUrl: "expenses.html"
    })
    export default class ExpensesComponent {
        private expenses: [] = [{name: "Foo", amount: 100}, {name: "Bar", amount: 200}];
        private totalAmount: number = 0;
    }

<h2 class="sub-header">Total: {{total | currency:"USD":true}}</h2>
<div class="table-responsive">
    <table class="table table-hover table-condensed">
        <thead>
        <tr>
            <th>#</th>
            <th>Name</th>
            <th>Amount</th>
        </tr>
        </thead>
        <tbody>
        <tr *ngFor="let expense of expenses | orderByDate; let id = index">
            <td>{{id + 1}}</td>
            <td>{{expense.name}}</td>
            <td>{{expense.amount | currency:"USD":true}}</td>
        </tr>
        </tbody>
    </table>
</div>