In the above ( click here to review>> ), we introduced how to use Kendo UI for Angular to complete the creation of an Angular application's data interaction function, which involves built-in data methods, scenarios, etc. This article will continue to introduce the rest.
PS: I recommend a practical component to everyone~ Kendo UI for Angular is a professional Angular UI component library. It not only encapsulates existing components provided by other suppliers, telerik is committed to providing pure high-performance Angular UI components without Any jQuery dependencies. Whether you develop Angular applications using TypeScript or JavaScript, Kendo UI for Angular provides professional, enterprise-grade UI components for Angular projects.
Kendo UI new version download (Q technology exchange: 726377843)
to sort
We want the user to have two buttons to order the products by price in ascending and descending order, as mentioned above, the sort() method helps to sort the elements in the array properly and returns the sorted array. By default it sorts elements as strings alphabetically and ascending, we want to sort by price.
We can provide a custom sort function to sort the elements in a different order.
First open app.component.ts and create sortProductsAsc method, use sort() method to sort prices in ascending order, pass function (a, b) => a.price - b.price) to sort in ascending order.
To sort in descending order, add another method, sortProductsDesc, and change the comparison value in the sort function to b.price - a.price. In App.component.ts:
public sortProductsDesc(): void {
this.products = this.products.sort((a, b) => a.price - b.price);
}
public sortProductsAsc() {
this.products = this.products.sort((a, b) => b.price - a.price);
}Next, add two buttons to allow the user to sort ascending and descending, and link the click event to the method.
<button (click)="sortProductsAsc()">Sort Asc</button>
<button (click)="sortProductsDesc()">Desc Desc</button>Save, and the browser will reload, and when you click on a sort method, it will sort the products in descending and ascending order by price.
filter data
We allow the user to filter products by name, the filter() method helps to filter the elements of the array based on a certain condition and returns a new array containing only the elements tested by the provided function.
First, we create the function filterBy, which takes the value of the UI. If the filter has a value, then the nameInput has a value, and the filter method updates the product list.
filterBy(nameInput: HTMLInputElement) {
if (nameInput.value) {
this.products = this.products.filter(p => p.name === nameInput.value)
}
}In app.component.html, add an input using the template reference variable #filterValue and add a button to call the filterBy method passing the template reference to gain access to the input value.
...
<label for="filter">Filter By Name: </label>
<input id="filter" type="text" #filterValue>
<button (click)="filterBy(filterValue)">Filter</button>Save and the browser will reload, enter a product name and click the filter button to view the results.
packet data
We want to list a new section with groups of products by category, the reduce() method helps to group the elements of the array based on a specific attribute and returns an object with a key for each unique value in the array, corresponding to Value is an array of matched elements.
Since we want the product group to have a clear structure, first create a new interface in app.component.ts:
interface groupeByCategory {
category: string;
products: any;
}Next, declare a new array of type groupByCategory:
categories: groupByCategory[] = [];Create a new method showGroup; internally, use the reduce() method to loop through the products array and create an object with a key for each unique category. If a key does not exist in the accumulator object, the key is created and assigned an empty array, and the current product is pushed into the array associated with the corresponding key.
Finally assign each category and product to the categories array using Object.keys.
Final code:
showGroup() {
//First, group the products by category
const group = this.products.reduce((acc: any, curr) => {
let key = curr.category;
if (!acc[key]) {
acc[key] = [];
}
acc[key].push(curr);
return acc;
}, {});
//Get the categories and product related.
this.categories = Object.keys(group ).map(key => ({
category: key,
products: group[key]
}));
}Add buttons to display a list of product groups by category.
<button (click)="showGroup()">Show Group</button>Next, use ngFor to access each category and pass the list of products to the list-product component.
<div class="category" *ngFor="let item of categories">
<h2>{
{item.category}}</h2>
<app-list-products [products]="item.products"></app-list-products>
</div>Save, browser reload and click show group, it shows a new list of products by category.
aggregated data
If we want to know the total price of all products, the reduce() function helps aggregate the elements in the array into a single value, so we can use it to sum the price attribute.
Add a new attribute total starting with 0.00 in app.component.ts to store the sum of all products. Next, add a new method showTotal that accumulates the price values of all attributes using the reduce function.
total = 0.00;
showTotal() {
this.total = this.products.reduce((acc, curr) => acc + curr.price, 0);
}In the app.component.html render, add a new button to display the total property. Bind the button click to the showTotal method and render the total property with interpolation.
<button (click)="showTotal()"> Total of all products</button> {
{total}}Save, and the browser reloads. When you click the new button, it will show the total of all products!
When to use array methods?
We emphasize a few points on why and when to use Array methods.
- The Filter method works well for a proof of concept and a minimal implementation.
- Sorting works really well for strings and data without too many attributes.
- Aggregation and grouping using reduce helps with objects with small attributes and uncomplex combinations.