Building an Animated Search Input with Ionic

what's up simonix and welcome back to a new quick win this week we are talking about a very cool simple small animation that can really spice up your application so while working on my new book built with ionic which will hopefully be released in about exactly one week i came across the behavior of different search elements in applications like whatsapp netflix spotify all of them have a custom animation when you click into a search field something just happens a button fades in the animation bar goes up you got an overlay fading in and ionic has a search bar but the default behavior is pretty boring so today we're going to implement something pretty cool using a little css transition and animation between elements and on top combining different elements of the view with the ionic animations api to create a powerful cool very great ui that is definitely a lot better than the default and couldn't put really the focus on your search field and just feels more natural and more native if you want to check out the code link below the video for all ionic academy members and you know it as always 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 but for today let's create this cool component and spice up our ionic applications [Music] all right so for this application you just need a blank new ionic application without any other packages or pages we gonna focus completely on the home page and the only thing i did is i removed the basic styling and i added a dummy list right here so just a list of 30 items if you check it out it's really just an empty list um what we want to do now is uh basically a two-step process first of all we want to integrate the search bar and fade in the cancel button because that is step number one in step number two we then gonna add the ionic animations api to move it to the top and that's basically always how you break down those complex animations try to figure out different steps uh that are required and then just work backwards so we're gonna start with a collapsed header um that means for android you're gonna have to do this a bit differently we're gonna focus a bit more on the ios appearance right now so that should be collapse condense and we'll already give this the condensed header template reference as we're gonna need a few more references later we can also already add well no let's let's not do this let's really take it easy for now to create the condensed header we have to add the toolbar we add the ion title which has now the size large in here we're going to just say contacts that should already give us the first impression of the condensed header right here and that automatically works from ionic now we add a second toolbar and within i'm gonna add a custom div element so we can really surround it with all the styling that we need first thing we need is of course an ion input i kind of like the input more in some places you could also use a search bar but i don't know i feel like this works a bit better for some custom animations or custom functions in general um on top of that i want to put an ion icon into the search bar um actually yeah it's interesting that there is no slot inside the ion input because i think adding an icon like this to the beginning um or actually there is search icon or something like that right isn't there something like that for the uh input i really forgot about this i've used this like 100 times so can we go to the ion input check it out check out the slots no there are no slots so that would definitely mean my recommendation for the ionic team put another slot into the ion input i guess the search bar has that anyway uh with that in place we also need a button that's the cancel button that we're gonna fade in we're gonna make the fill clear color primary uh we're gonna use a small size for this button and we're gonna need well a bit more later but for now that's basically gonna look horrible because we haven't applied any kind of styling now there is a difference between active search and inactive search so we're gonna start by adding a variable searching and set this to false and we're going to add conditional styling to our ion input we're going to use class dot active search if we're searching and we're going to use class inactive search when we are not searching and we could do now the same for our ion button but let's do it a different way just so you see well so it's not getting boring in here let's use visible button and we're going to use this if we are searching right and we're going to use uh let's call this one hidden button when we are not searching so it's really mostly the same you could use class the class syntax you can use ng class it really doesn't matter too much now if we click the cancel button we want to toggle our search and as well we will toggle the search when the input gets focused so let's add the ion focus in here toggle search for now will be really simple this dot searching equals not this dot searching so we just want to change that now when i click into this we would have the right classes applied we can check this out by diving into it and then we see ion there that removes now it is inactive search now if i go back to it active search and also the ion button is now a hidden button somewhere the button i don't know now it's hidden button previously it was visible button so let's get into the styling for this uh first of all we're gonna style the general ui we're gonna generally add uh to the ion input a bit of padding and the background the border radius and the heat but that won't change a lot right now what's changing our ui is setting display to flex and then saying align items well let's use flex first of all uh that already works pretty good i think we actually don't even need to align the item center i don't think that will change anything cancel looks pretty pretty good so far so i guess we can just leave this out uh leave everything out if you can leave it out makes for easier code now interesting is uh what we need to use for the active search and the inactive search uh we're gonna have four cases here we have active search we have in active search we have the hidden button the hidden button and we have the i guess visible button so maybe we could wrap them uh in case of the inactive search the button is hidden so that is our base base state i would say uh in the case of an inactive search we will set for the search bar again the display flex and we're going to give it a flex weight of one so it's going to take up the whole row and we'll also add a little transition to make everything a bit more smooth maybe we could add a long transition for now but we're going to change this back in a second the hidden button will have an absolute position so it's basically out of the view yeah well of course that was happening we don't really have to use top but i want to position it correctly so then it doesn't come in uh like this but fades in like this uh therefore we're gonna move it out of the view and as well we're going to use the same transition now and that means by default as you can see search bar is taking up the whole place available and even without any classes it's already coming in that's pretty cool didn't thought that was possible so now let's add active search in the case of an active search uh we're gonna add the same display flex but this time it's not using the whole available width so it's using a bit less which means the search bar gets smaller uh and as well the visible button will now be in a different position uh we're gonna make it zero pixels to the right we're going to use it the same way top we might have to change an index but let's give it a try for now ah i think that looks pretty cool very nice very nice i like that i like that um i think maybe this one isn't working correctly um in some cases i i've seen this so i'm just gonna add the index here to make sure it's on top because i feel it's like it's also not getting the click event let's quickly check this out on my device to confirm it's working here as well so let's see um yeah there it comes and there it goes of course one second is way too long so we're going to change this to 0.4 seconds in all of the and then it should already look a lot more natural we can also stay here so that comes in pretty nice actually that would be in many cases that would be enough that already makes for a better ui you can type something and you can cancel that's pretty cool but we want to take this of course a step further and we do this with a bunch of view childs so as i tease it in the beginning we're gonna now put in some so we're going to use the header wrapper we try to access the condense header in here and at the same time i also want to add where am i within the content a search overlay so that search overlay should have a dark background we can quickly put in a bit of styling for that as well so let's do this yeah we don't need the line numbers so it should cover the whole screen um with a bit of transparency if i make this to one we should see it um yeah we would see it if i use a index like this but of course in the beginning i also don't want to see it but that's basically how it should look like later also as you can see we might have to apply a change to our ion content and disable scrolling while we're searching so therefore we're gonna add to our ion content uh scroll y is only enabled if we're not searching so now if i am searching i can't scroll this anymore and if i close this i could scroll again but of course we need to handle the uh this friend here but we're gonna make it invisible in the beginning so right now i think um just for a test we need to make the ion item a button because i'm not sure if the overlay is currently no it's not so i just want to make sure that the invisible overlay isn't taking away the click event but it's not so we got this and now we want to move this up and fade in our overlay and therefore we're going to access all the elements as a view child first of all so let's add view child from angular core and element ref now you might wonder why the three look a bit different so in those two cases for the header wrapper and the consense header we're accessing an ionic component so it is on the ion header it is on the ion header and therefore i really would just want to get the native element therefore i put in read element ref here for the overlay it is already a native uh element right here no shadow dom just a div element pretty basic so we can directly access it whenever we want to access really the element ref put in read element rev otherwise you're accessing the ion header yeah they're also cool functions on the ion header but nothing that we need right now then we add the animation controller animation controller and we're gonna set up our animation within the toggle search in fact there was a little um well a little problem uh with the input i don't know if this still exists in the future so the ion change event here was basically triggered twice and to prevent this there was a kind of ugly heck so if this dot input fired we're gonna return immediately sometimes this happened and somewhere in the end we then have to set uh basically after this we're gonna have to set this dot input fire true and when the animation is finished we can set it back to false but for now uh what we're gonna do is we first of all access the title toolbar do i still got this logging thingy here there we got it um so from the condense header we want to get the first child why do we want to get that because that is actually this little toolbar and we're going to uh fade that out as well so we're not using the whole condensed header which contain contains everything and then we would also fade out our toolbar with the search that's of course not what we want to do so we access that element we could actually yeah maybe we could have just put it no no we could put it in the contents header yeah that could have worked but no i think it's actually better like this just stick with me okay let's uh do the different blocks of the animation one by one if you haven't used the animation controller it's basically always the same you create an animation with a name doesn't really matter you add an element in this case we're using the header wrapper which is the the topmost element then you have some kind of transformation from to your changing styling opacity hate positions whatever it might be and this is kind of optional so this is really the basic form this is only what i wanted to do is after everything of the animation is finished i will also want to add the index -1 so it's not covering anything anymore um we can also create the toolbar fade so this is the tool by fade second one is the header frame maybe we should play them one by one that makes more sense so let's already try and call play on this one as a result what we should see is it moves a bit to the top on a real device i guess it's actually moving a bit more so do we still get my preview of course not whenever i need it it's gone that's great um and we also don't cover their reverse case so right now we only got the case playing at once let's see here it already also moves to the top of it that's good uh now we just need to get rid of this area so let's put in our header feed using the tile toolbar this is now the element within the condensed header and we again change the opacity to zero and also really reduce the height of that element to 0. now to play both of these or for now let's just play one to combine them we need a wrapper so definitely the element here is gone as well so we can create a simple wrapper to chain all of our animations like this it's really the same setup like before but this time we're adding animations an array of the two animations we created some easing and a duration and then we can add a bit of logic if we're already searching uh in that case we wanna let's do the default case so if we're not searching we're gonna call wrapper.play and if we are already searching we're gonna set the direction of this to reverse and then call play so that should make the animation basically toggable okay that moves it to the top and clicking on are we actually able to do any big um i don't know what this is okay because input fired yeah this dot input fired equals false but putting it here might lead to a little problem so we're gonna have to use a set timeout there but anyway at least it's already possible and you see our css stuff is still working in the background what we've set up before is still working nicely with that animation now we just need to fade in the overlay so let's put in another animation the overlay fade using the overlay element changing the opacity from zero to one and in the default case when the wrapper plays we will also call overlay fade play but there's a problem that you will notice hopefully let's give it a try so no overlay why is there an overlay because the index is still wrong it's covered behind everything in our view so to change this we can add um dot b4 styles and before styling we're going to set the index to something like i think 2 should be enough and then play it and that means it should appear and fade in great now we just need to make sure that it fades out again in the end so in the opposite case here we're going to add uh after styles so after styles we're going to remove it and play it i think we also need the direction reverse do we need that yeah i think okay was it already saved so we can do this and we can go back do this and go back i think that looks pretty cool also since we attached a click event to the overlay we can dismiss it with a click on the overlay and also you see no more scrolling while this is active scrolling again and clicking working um i guess that's actually everything let's also finally take a look at it on the device so it moves completely to the top and then we can cancel it and we're back in our default application uh this is really a pretty easy example um there are more complicated ones but even the first part with fading in this cancel button already gives this play element to this animation and you can see this in basically every application spotify youtube netflix whatever you check out there is nothing like here's the search bar and then search just starts there's really always some kind of transition it moves to the top it fades in an overlay it brings in a cancel button it moves the star to the beginning or the center anything like that and we can do the same now with ionic once again for android we might have to change a bit uh we would see this now if we would check it out on the pixel uh since we don't even have a condensed header here for android so for android i think we might be able to put that code in here um but of course in that case we would have to change a bit the heights used in here because right now for android it will break the layout um but it would definitely be possible for android as well so if you want to have a little challenge uh implement this now for android with fixed heat and perhaps just have a little uh check here for the platform so it works for both android and ios all right and that's it again for today i hope you enjoyed this quick win about just a very small component inside your application really quick when the term that's exactly how those videos should look like right if you got any questions about this component or would like to see a small kind of micro animations inside popular applications built with ionic just let me know below the video in the comments and of course uh make sure you don't miss the launch of built with ionic the book that covers this and a lot more examples hopefully released next tuesday so i hope you enjoyed this i will catch you next week have a great week and happy coding simon [Music]

Channel: Simon Grimm

Views: 1,968

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, ionic animations

Id: X352n16NLMo

Length: 22min 50sec (1370 seconds)

Published: Tue Dec 07 2021