Demo:GitHub (with just basic source code for this UI Pagination Component)Background
I decided to implement my own pagination UI component. Design/Implementation Principle: Easy to Understand & Use, Flexible to Customize, and open source. UI Example: How does it look?The styling is using Bootstrap default css - nothing special. By default, it uses bootstrap from the Angular 2 application level. Of course, you could customize it easily by defining your own style in the css file. ![]() ![]() ![]() ![]() Key Features:
Of course, you can easily customize the logic above. Now Let's dive into the Angular 2 Code:We create a component folder name "ui" for our pagination component implementation: [ui/]
Let's focus on the two core implementation files: pagination.component.ts
pagination.component.html
The following is not the core implementation of this UI component. This is to illustrate how to use it. Now, let's use it:My example is to load a list of Twitter messages (via HTTP API call) and populate the page (with pagination component). Note: The logic for loading tweets is not significant -- some components may be missing in this blog. I don't intend to show you how to implement a data API service with a business object component (in this case, Twitter messages). Please focus on the use of Pagination component. If you need help with building Angular 2 data components with HTTP API services, please write to me separately. tweets.service.ts
tweets.component.ts
tweets.component.html
Enjoy!!! About The AuthorJulian Zhu is a principal consultant and managing partner at Boston Software Group Inc in Boston. He previously worked at CVS Health managing Enterprise Architecture team, and consultant at Greenwich Technology Partners. Contact him at julian.zhu@bostonsoftwaregroup.com if you have any question. Thank you. |
Blog Post >