scrimba
Build Your First Angular app
Adding Filtering - Data Binding in Angular
Go Pro!Bootcamp

Bootcamp

Study group

Collaborate with peers in your dedicated #study-group channel.

Code reviews

Submit projects for review using the /review command in your #code-reviews channel

Adding Filtering - Data Binding in Angular
AboutCommentsNotes
Adding Filtering - Data Binding in Angular
Expand for more info
src
app
customers
customers-list
customers-list.component.ts
run
preview
console
import { Component, OnInit, Input } from '@angular/core';

import { ICustomer } from '../../shared/interfaces';

@Component({
selector: 'app-customers-list',
templateUrl: './customers-list.component.html'
})
export class CustomersListComponent implements OnInit {
private _customers: ICustomer[] = [];
@Input() get customers(): ICustomer[] {
return this._customers;
}

set customers(value: ICustomer[]) {
if (value) {
this.filteredCustomers = this._customers = value;
this.calculateOrders();
}
}

filteredCustomers: any[] = [];
customersOrderTotal: number;
currencyCode: string = 'USD';

constructor() {}

ngOnInit() {

}

calculateOrders() {
this.customersOrderTotal = 0;
this.filteredCustomers.forEach((cust: ICustomer) => {
this.customersOrderTotal += cust.orderTotal;
});
}

filter(data: string) {
if (data) {
this.filteredCustomers = this.customers.filter((cust: ICustomer) => {
return cust.name.toLowerCase().indexOf(data.toLowerCase()) > -1 ||
cust.city.toLowerCase().indexOf(data.toLowerCase()) > -1 ||
cust.orderTotal.toString().indexOf(data) > -1;
});
this.calculateOrders();
} else {
this.filteredCustomers = this.customers;
}
}

sort(prop: string) {
// A sorter service will handle the sorting
}
}
Console
"Angular is running in the development mode. Call enableProdMode() to enable the production mode."
,
customers
-10:44