Ionic Alphabetic Scroll with Animations

what's up simonix and welcome back to a new quick win today we're implementing a very cool small component that is an alphabetic scroll i recently wanted to use this in one of my applications and all the packages i found were well kind of outdated so i came up with a new solution that works pretty amazing we're gonna build first of all a contact list with a sticky header which is by itself a pretty nice implementation already but then we're gonna add this cool component to the site where you got all the letters abc you can click on them to jump to a certain group in your list and as well because that is quite boring we're gonna implement a gesture on top of it so you can just drag your finger through that list of letters and it will automatically uh jump to the new section where you let uh your finger is currently on you have seen this in most of the contact applications whatsapp standard contact applications a lot of apps really useless feature it's something that looks pretty native i guess for native there's an easy implementation for us it's not so easy but we're gonna do this code for this quick win available for ionic academy members with a link below and if you're not yet a member of the ionic academy go check it out right now ionicacademy.com my place to help you with everything ionic so let's dive into our alphabetic scroll companion for today [Music] all right so let's get started we're gonna start with a blank new ionic application so just start a new one you don't need anything else what we need is loading some dummy data json so i've created this dummy file with entries containing first name and last name you can just do this and put in random values and to load that file we're gonna have to change our ts config and add those two properties so resolve json module true and allow synthetic default imports to otherwise your ide will most likely complain uh and we can now heat over to the home page and import our data just like this directly from a json file otherwise we will have to use the http client with angular and load that file but we don't really need to um because my dummy data is not sorted i'm going to put in a little code to sort them by last name just a simple javascript sorting now we want to iterate that data and display those different groups so a all contacts with a b all contact with b and to achieve this uh we could come up with a logic where we check inside the ng4 if the letter is different than the last one and then show a divider but that's actually kind of complicated i feel like it's better to um create the right kind of data structure up front so let's do this instead uh we're gonna go with this one and iterate the data just like the old school way of iterating then we're gonna grab the current contact from this sorted uh array and then we're gonna check if uh and we should probably keep track of the last one so let last equals null um if we don't have an entry uh yet or if we haven't stored anything so basically the last letter um then we're gonna set last to the current contact last equals contact and using last name and then the first character so this is basically the last character we encountered and then we're gonna push a new object uh yeah this dot push of course this data push um like this we're gonna use last at the key so we're gonna have a b c as the key and then we're gonna have an array of users that fit into that category so all these are the last names starting with a or b just a little bit of javascript exercise in the beginning right and then uh we can push to our data array at the position uh this the data length length minus one uh at our currently new created users array so this one is simply accessing this object that we just created and then we push the new contact into that array as a result we're going to lock this out this data afterwards so we're going to see how this works as well after the first iteration the last is of course set to for example a and then we're going to compare at this point uh if last is unequal to contact.last name so in that case we're going to run the same logic again basically creating a new section okay promise users is not a function that's great uh this date would put which position exactly uh why is this so strange this is really looking strange minus one this.data length minus one um please this data push if not last or last is null uh last what's wrong with you actually yeah it's great we're writing the first five lines and we already got an issue so that's how it should look key a uses an empty array uh users of course we should push the contact to that one now it makes sense okay as a result we got this nice little one we don't have all the characters of the alphabet but that's not a problem now we got all the users in each category and that makes first of all are creating a list with dividers pretty easy so that's going to be our first task right now therefore we heat over to our home page and we gonna add a little condensed header that's actually not required but i think it looks pretty nice as well if you do it like this i just recently noticed that you can have multiple ion toolbars and it actually looks quite okay it's not looking very good right now simply because the styling for this isn't added so i'm going to add this styling which makes the search use a flex layout so everything is aligned nicely we add a bit of margin padding background border radius to the ion input itself to make it look like in a real search application and the ion icon submerging to the left which gives this nice little effect now in terms of the actual list that's going to be interesting now because we're using an ion item group and since we have our logic in uh created up front where we've split everything into those groups we can just go through them select item of data and then we can create an ion item divider and this one simply has an ion label and that label has item dot key which means we should now have a bunch of dividers with the keys from the alphabet of our users on top of that of course every item group now needs the actual items that fall into that group and at this point we can just iterate let user of item.users uh which we've created upfront once again ion label and then user.firstname and usually you see something like this uh the user.lastname is bold so we can easily do this and with that we have already created our list based on some data we got this nice condensed header effect that is ionic automatically applying on ios now the first improvement to this list is we want to make the a or the b sticky to the top and you might think we could do this with sticky properties css something like that well that's so easy let's just add sticky to our ion item divider and let's see what's happening oh we got a sticky header i just figured this out recently sometimes i'm really surprised there are a lot of cool things in ionic that you you don't know until you need them so really just add sticky in there and it just works it's exactly how it should look and behave now this is only the first part it's actually pretty cool already so if you want to use a contact lens with some search well you're done basically what's the time five minutes okay seven minutes well that's okay but now we want to add this alphabetic scroll and for this we're gonna turn to our cli and install a few things so first of all i'm generating a new module for components i'm doing this so we can now create a new component that i've called alphabet scroll um just printing out the commands once again for you those are the commands and i also installed the ionic the capacitor haptics plug-in you will see why in the end so go ahead and install this um if you're already doing a reload on your live device you might have to restart this after installing a plug-in like that but that's just a side note okay so we've created that module let's heat over to that module shared components module first of all we're gonna declare our alphabet scroll component and add it to the array of exports with that in place we can already do this same in our home module and import the shared components module so we can use it in a second um maybe we're going to put it already in there and might make sense so we can actually see the result of our coding the name of the component is usually app and then the name so app alphabet scroll and i'm just gonna put this well let's just put it into the home page at some place i'm gonna anyway position this uh in an absolute uh position i guess uh so let's heat over to the alphabet yeah can we see it already no we can't really because well we haven't added any logic or anything so let me bring in the code what we want to do is basically create a super simple list of elements and then close our unordered list and we want to do this in g4 uh let letter of letters so when i have all the letters from a to z in there and we can do this with a little trick so we're going to go to our component and add letters as an empty array and within the constructor we're going to add a bit of logic i found this somewhere online really it's just iterating all the characters and adding them to our letters area it's really not fancy but well it it just works as a result i guess we will have all the list items here but they don't have any content we definitely want to make them tapable i think and on click of each letter we also want to go to a specific letter we're going to have to take care of that in a second let's for now just add the function in here and then we will handle it later now um i'm gonna use an a-link uh simply because i found a little logic that also contained this setup and i found that actually worked quite good so on top of that so we're gonna have all the letters here we definitely need some css for that but that's not gonna be a problem uh but on top of that we for sure need a bit of styling so let's call this one letter sidebar and let's also use a template reference as we want to apply a gesture later on perhaps we should uh now move to the css because having the list at the bottom isn't really what we want so maybe we can do it right in here let's grab this or let's save this first and then we can see the letter sidebar there we go this is our component this is the letter sidebar we want to give it the position uh fixed so it disappears that's great then let's give it a value of top 25 percent as you can see it's not visible right now so putting this to a value of 2 should be enough we want to move it to the right hand side so we give it a value of 0 and then it's positioned already quite nice i think so let's do this this was the letter sidebar i kind of tend to write my css like this so doing it in the browser and then copying it to the actual file i feel like that usually goes a lot faster than trying something in here refreshing and doing all of the uh this all the time so now we're gonna have to put a bit of styling to our elements uh first of all we wanna use for the uh the l i item um let's use uh what's it called list style none that removes this ugly whatever i'm going to give it a bit more width and we want to align the text to the center and perhaps a bit bigger front weight let's say 500 that should already look good so we're going to put all of this to our li item and finally to the a uh we're gonna put a bit bigger font size as well so something like this or a bit smaller i think that looks okay but what's not our case uh we see the index is still behind our items so i guess yeah we really need to use 100 okay no problem so the ion item divider seems to have an index of 99 is that right is that really true ion item divider index uh it has 100 as well interesting but still with 100 we are fine here okay we have positioned uh this first of all in the right place now it becomes a bit more challenging as we want to add the click event uh to go to a certain letter and also this uh with a finger scrolling on it so i can quickly show you already the preview on a device as well here's my device and it looks quite nice i think i definitely want to touch them and go through all of the letters so that's what we're going to do maybe we're going to start with go to letter um we will also keep track of the last open value so the last letter we selected and if this dot last open is equal to the letter we can simply return because in that case we don't need to jump or reload anything otherwise we can set our last open to the letter that we just selected and then we're gonna use an event emitter because from this list we don't really have access to the item list here so we need a bit of communication between the child component which is the alphabet scroll and the paren which is our home page therefore let's add a new output here and we're going to call this letter selected letter selected new event emitter and we're going to use actually of the type string i guess since we're making a new letter therefore we can now say this dot letter selected emit a new value the letter we just selected now the parent just needs to implement or listen to that function and do something once we've selected a letter on top of that we will also add a second output because [Music] well we wait for a second we wait let's just do the the letter implementation first maybe so letter selected can now be implemented in our home page on the component letter selected in that case we should scroll to a specific letter we haven't used the function yet so let's implement it here in our view letter letter there we go now this is a bit more um challenging maybe because we need to iterate the data and find the right element that we want to scroll into the view so we can start again with our super simple iteration of our data then we have to figure out which group is selected and then we have to move it into the view why am i not iterating the groups i guess because i need the index yeah that could be the case okay this is first of all the group the group has a key and the users and if the group dot key is equal to our letter in that case we want to access that group and scroll it uh into our view um what am i doing in my code here i really don't understand what i did up front uh [Music] is it too early for me or is this just plain a bad idea item groups ah yeah yeah that makes sense now i really just had to think about this the problem at this point is we we have found the right group technically in our data but we haven't found the right view element so we don't know which item group we actually need so what we need is to access all item groups first of all and we can do this by using add view children we're going to just select all ion item group elements and we want to read their element reference we don't want to have the shadow dom element that uh implemented by ionic because that's not going to be helpful we really want to have the plain html dom element so this will give us a list of all the items of all the ion item groups so one section like this is an item group and this is an item group and this is an item group and therefore that's also the reason why we use the index here so now we can get the right item group by using this dot item groups uh filter can we do filter yeah we don't need to convert it to an array that's cool um element index and then we're filtering out if the index is equal to the value of our iteration so if the letter is in the first group well then it's also the first group of the view children group if we found a group in that case we can grab the element which is the group at position 0 because filter always returns an array maybe we should check if group and group the length bigger than zero that might be a nice catch here so then we got finally got the native element and then we can uh use element native element scroll into view that's a basic javascript function to scroll something into our view at this point i think we can just uh finish can we just yeah let's just put a return in here could be maybe optimized a bit more but that should be fine let's give it a try let's jump to age let's jump to n and it just works mostly if i hit the right letter okay we of course can't scroll t or w to the top because it's already at the end of the list but for everything else we can already click it but of course we now want to have this effect where we put our finger on the screen and move it across this alphabet and then jumps to the other categories so what we need to do for this is go back to our component and implement a gesture and this gesture is going to be a bit more complicated we need to implement the after view in it so we can actually get rid of ng on in it and change it to ng after viewing it instead and set up a gesture uh we also need the gesture controller from ionic so let's import it uh gesture controller i feel like i have a typo gesture controller from ionic angular there we go now let's define our move gesture on the items uh we can come on really i need more coffee today this the gesture controller create and before we pass in the configuration let's do one thing and that is move gesture enable because i really tend to forget about this and yeah that's always horrible you're debugging for like 10 minutes so why is my gesture not working and it's simply because you haven't enabled it now um yeah we need the view child i think we defined this already exactly so let's put in a view child for our sidebar element this one this one and then we can apply uh the gesture to our sidebar we only want to catch events in the y direction so up and down we don't really want left and right uh we want to use a threshold of zero so it starts immediately and the gesture name doesn't really matter too much on start that's more interesting um because well we will handle this in a second on move we definitely want to do something on move and on end we will most likely do something as well now this is the gesture basic setup for adding a new gesture now i found a pretty cool code that tries to figure out um the closest element so on move we're gonna try and get the closest element by using the current x and y values of our touch events by using element from point and now um if our element our closest element uh has an l i and an a tag within so if the index of that search is bigger than minus one we have found something and once again uh i'm having come up with that logic i found it inside and deprecated component called alpha scroll so really want to give credit to that one that existed in the past but didn't really work anymore i think at some point they had this logic i don't know where but uh yeah right here closest element they use the hammer gesture recognizer which we're not using anymore but that's where it came from so i'm just going to bring the whole part now in so if you have the closest element we're going to grab the text which is the letter itself abc whatever and now my additional check if the ladder is not equal to the last item we're going to use the capacitor haptic plug-in to trigger a little haptic feedback i've seen this in other applications as well when you go through that list it's always nice to give the user a little bit of uh feedback that the user can actually feel and i think that work pretty well so that's uh the whole reason why we installed the haptics plug-in in the beginning now of course we can now also easily call our go to letter function and basically let's give this a try now as a result you see it's it kinda works i kinda get feedback but the view is also scrolling and i really don't wanna scroll my ion content while i use this alphabetic search can i actually try this in the browser as well let's see and not as good as on the device um so what we do to fix this is simply adding another output and we're going to call this one scrolling letter that's going to be a new event emitter of the type boolean and we're just going to emit if we're currently scrolling or if we're not scrolling so on start of the gesture we're gonna add scrolling emit layer true on end we're gonna emit false and now we just need to catch this event the scrolling letter event on our component as well so let's put it in here scrolling ladder and then we can come up with a new function um whatever letter scroll active passing the event that we get from our component so let's add this and then we should also keep track of this so let's add another property scroll false and within letter scroll active we will simply set act f come on that's not a hard word time oh that was interesting import this dot scroll equals active that means if we're starting our gesture scroll will become true in our home page if we end the gesture it will become false and we can now use this to our advantage by setting scroll y on our ion content to not scroll so uh if we're using the alphabetic search we want to disable ion content scroll and as a result i can still easily scroll this just like before but at the same time once i start to use this at the side the ion content won't scroll anymore i get this nice little haptic feedback it feels basically exactly like a native contact application like whatsapp or just the contacts app once i stop i can again use this we got the sticky headers we got the alphabetic scroll component in place we got the haptic feedback for this you of course have to run it on a device if we're using it here um yeah navigator vibrate of course my imac can't vibrate that would be kind of strange um but you see it's working nicely it's working even better on a device and we have finished our cool list with haptic feedback and alphabetics grow all right and that's it for today i hope you enjoyed this quick one was actually longer than i expected because setting up the custom component with all the gesture stuff in the logic involved uh was kind of complicated once again i got a bit of code for this from a previous package called what's its name ionic 2 alpha scroll maybe it's going to be updated in the future based on this code feel free to use it because i feel like having a component like this is really important for the ionic community and otherwise i just hope it will help in your applications with a contact list or any kind of list where you quickly want to jump to a group if you enjoyed it please hit the like button and subscribe to the channel and of course once again check out the ionic academy which hosts this quick win i will hopefully catch you next week again so happy coding simon [Music]

Channel: Simon Grimm

Views: 2,589

Keywords: ionic framework, learn ionic, angular, ionic angular, ionic guide, cross platform, hybrid app, ionic for beginners, ionic course, ionic, cordova, javascript, ionic 5, learn ionic 5, ionic 5 for beginners, angular 9, ionic 5 tutorial, ionic 5 angular, ionic 5 course, ionic academy, ionic tutorial, alphabetic scroll ionic

Id: mlLTxEd7jb8

Length: 29min 20sec (1760 seconds)

Published: Tue Nov 09 2021