Animations in angular || Satyam sinha

hello guys so today we are going to learn about animations in angular so first you need to create an angular project okay and then go into your code into the app.module.ts okay so first you need to import something here and initialize that into this imports array okay so what you need to import you need to in your animation module okay without that you cannot able to uh use animations in your uh angular project and graph whatever okay so first you need to import that so let's import it import something from at angular slash platform browser slash animation so here you need to import browser animation module and that thing you need to put over here okay so this is it you have imported successfully and then go into your html file here in your at ng module decorator there you need one more thing which is animation okay sorry not here need it over here okay so here we need one more thing which is animations and here we can use this id okay so first you need to import something over here like import something from at angular slash animations okay so in there you need to import couple of things over here so first thing you need to import here is state then transition then animate then well all these things are coming from documentation so if you're going there and just typing angular animation and hit enter you can go there and you can find out all of those things here okay so those are the things so all the things are going from here it's not like magic or something else okay so same thing we need here is trigger alls okay so if you can go there and see what trigger does if you just go put a little bit down you can see wherever yeah this trigger this trigger fires on some particular state like of some particular animation like open close this thing you need to put on the on a particular day on a particular element in your angular html file where this animation will take place okay so this is important okay so first thing first so here you put the triggers trigger and then first thing will be like animate me something like that and then something like this and then we need to first define state state will be something like before and then we can put here style and then that style oh i just forwarded to uh import style also you need to install also from this angular slash animation okay and then in this style you can just set up that ground color off let's suppose red and then opacity of let's suppose 0.8 okay now from this state i need to go to another state which is after where background code would be let's suppose b pink okay with opacity 0.5 keep it 0.1 for now one for now okay and then for the animation part okay animation sorry for the transition part we need something like this from from before to after and then animation metadata so we need to uh call our animate function which we imported right there okay which will be just taking something like one second is in and one more things we need to put here is transmission after two and that to also animate one second without so these things so we have finally done with the animation part so let's make our element ready so let's let's put your animation called animation element just for example nothing else so here instead the trigger at the rate animate me so this thing is coming from right here okay and this should be equal to for now let's keep it equal to um before part okay so before the style will be of lap light right now so now if i am just going to see this you can see before style is applied here let's put a padding over here so we can see something right padding column 20 pixels now if i see it you can see here and let's suppose here do some playing it around with some padding also pixels so before and after you can see here if you were just going to put here after now if you're going to see this you can see there's any no we need to do that in animation type so first we need to uh make a variable over here which is toggle animation okay so or maybe is before boolean that keeps as true okay and then we need we need to make a toggle function over here so that we can toggle it this will do this dot is before is equal to not to start this before and then sb4 will be this before will be responsible for changing our animation state okay so is before if it is there then it will be before else after so before so if it's before it's true then we can have this before uh state to be triggered otherwise it will be after okay so button and then animate me then just over here put a pic and then there toggle just a function so if i'm going there just refresh that you have to click any between and see let's see here this animation is happening okay so so this is it for this video hope you liked it and if you like this video do it like and subscribe to the channel and and for more such informative video whatever you need you can just mention in the comment section i will definitely try to make a video on that okay so thanks for watching this video

Channel: Geeky Satyam

Views: 31

Keywords: animations in angular, how to implement animations in angular, angular tutorials, angular development, satyam sinha

Id: odKTemyhU4Y

Length: 10min 36sec (636 seconds)

Published: Wed Sep 08 2021