![]() Just think of the number of input properties responsible for configuration if the paginator was implemented as component □ □. ![]() You can either disable the elements, hide them or apply a given CSS class. For example, when the first 1️⃣ or last □ page is selected, you may wish to do something with ‘go to first’, ‘go to previous page’ or ‘go to last’, ‘go to next page’ buttons □. I decided to create a directive, since the number of UI elements that can be customized is not small (up to 5 items) and you may want a different behavior when the paginator is in certain state. If you’re not familiar with Template Refs, I highly encourage you to take a look at one of my previous posts ▶️ here. The idea is to provide an easy way to reuse the pagination logic which in Angular application means encapsulating the logic in a directive or creating a component which accepts Template Refs with custom UI widgets. Of course, the directive has to take security measure in order to be bullet-proof □ when the input data is invalid □. When it comes to the Angular directive, it has two input properties, namely pageNo and totalPages. It’s also desirable to expose methods for navigating straight to first, last, previous ◀️ and next ▶️ pages. Last but not least, if a user leaves the input field empty, the first page 1️⃣ needs to be selected. If a user types an out of range number, the last page □ should be selected once the change is committed (blur or enter key press events). The directive’s change event should be fired once the input’s native change event has fired (on blur or enter key press if a value has changed). In addition, it should only accept natural numbers and any attempt to provide invalid input must be ignored □. The custom paginator needs to have an input field which enables entering the desired page number 6️⃣ 9️⃣.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |