1 00:00:03,680 --> 00:00:09,920 Continuing with our animation exercise from the previous part one. 2 00:00:09,920 --> 00:00:15,470 We'll add in some more animations to our angular application. 3 00:00:15,470 --> 00:00:19,515 In particular, we will add in an animation that will be triggered 4 00:00:19,515 --> 00:00:24,440 when the route changes occur within our single-page application. 5 00:00:24,440 --> 00:00:28,125 We will also add in an animation which enables 6 00:00:28,125 --> 00:00:32,595 a view to be displayed when the data is fetched from the server side, 7 00:00:32,595 --> 00:00:39,535 so when you're dismissing the spinner in your view and then rendering the view, 8 00:00:39,535 --> 00:00:42,395 we want the view to be projected onto the screen 9 00:00:42,395 --> 00:00:45,710 rather than simply just appearing all of a sudden. 10 00:00:45,710 --> 00:00:49,774 So, a couple of new animations that we will add in this exercise. 11 00:00:49,774 --> 00:00:54,440 Along the way when you have multiple animations in your application, 12 00:00:54,440 --> 00:00:57,800 it may be better to refactor the code in a way that is more 13 00:00:57,800 --> 00:01:01,190 manageable rather than including piecemeal 14 00:01:01,190 --> 00:01:05,210 every little bit of a trigger into each of the files 15 00:01:05,210 --> 00:01:09,460 within our components of our angular application. 16 00:01:09,460 --> 00:01:15,880 So, let's do all these steps as part two of the animation exercise. 17 00:01:15,880 --> 00:01:20,750 The first thing that I'm going to do is that we will refactor 18 00:01:20,750 --> 00:01:26,705 the code that we have already done as part one of this animations exercise. 19 00:01:26,705 --> 00:01:32,790 This approach that I'm illustrating to you here is just my suggested approach. 20 00:01:32,790 --> 00:01:36,080 You don't necessarily have to follow exactly this way, 21 00:01:36,080 --> 00:01:40,460 but I feel that this helps organize the code much better. 22 00:01:40,460 --> 00:01:45,050 So, what I'm going to do is just like we had a separate folder for services, 23 00:01:45,050 --> 00:01:49,040 we had a separate folder for the shared resources and so on, 24 00:01:49,040 --> 00:01:51,975 I'm going to create a new folder named animations. 25 00:01:51,975 --> 00:01:57,200 We will store all animation related code there and then make use of it by importing it 26 00:01:57,200 --> 00:02:03,065 wherever required within our components in our angular application. 27 00:02:03,065 --> 00:02:05,865 So, going to our code, 28 00:02:05,865 --> 00:02:12,615 within the app folder I'm going to create a new folder and name it Animations. 29 00:02:12,615 --> 00:02:15,115 Inside this Animations folder, 30 00:02:15,115 --> 00:02:20,540 I'm going to create a new file and for lack of a better word I 31 00:02:20,540 --> 00:02:26,940 will call it app.animation.ts file. 32 00:02:27,060 --> 00:02:31,915 Then inside this, I'm going to import 33 00:02:31,915 --> 00:02:38,865 the various classes from angular animations that I did in the DishDetail component. 34 00:02:38,865 --> 00:02:41,135 So, going to the DishDetail component, 35 00:02:41,135 --> 00:02:43,700 you will recall that the first thing that I did 36 00:02:43,700 --> 00:02:46,640 was I added this line into the DishDetail component. 37 00:02:46,640 --> 00:02:49,685 I'm going to cut it out from the DishDetail component and 38 00:02:49,685 --> 00:02:53,035 instead paste it into the app animations, 39 00:02:53,035 --> 00:02:57,765 so that wherever this app animations is 40 00:02:57,765 --> 00:03:03,090 included by importing it into our other components, 41 00:03:03,090 --> 00:03:05,640 this will automatically come for the right there. 42 00:03:05,640 --> 00:03:07,750 Now, within this app animations, 43 00:03:07,750 --> 00:03:12,000 I'm going to create some factory functions that will export the various triggers. 44 00:03:12,000 --> 00:03:14,495 The first factory function that I will create 45 00:03:14,495 --> 00:03:22,660 this export function and call it visibility. 46 00:03:23,000 --> 00:03:27,290 This visibility function will return the code 47 00:03:27,290 --> 00:03:32,070 corresponding to the trigger that we have done in the DishDetail component. 48 00:03:32,070 --> 00:03:34,455 So, going back to the DishDetail component, 49 00:03:34,455 --> 00:03:44,520 I'm just going to cut out this entire code for the trigger from here and then go back to 50 00:03:44,520 --> 00:03:48,800 app animation.ts file and then paste it into 51 00:03:48,800 --> 00:03:55,825 place right there in the function here. 52 00:03:55,825 --> 00:04:02,530 This now becomes a function that is available for import from my DishDetail component. 53 00:04:02,530 --> 00:04:06,840 So, going back to DishDetail component. 54 00:04:06,840 --> 00:04:12,640 Now, in place where I imported the trigger and other classes, 55 00:04:12,640 --> 00:04:19,030 I'm going to now import the visibility 56 00:04:19,030 --> 00:04:30,475 from animation's app, animation, 57 00:04:30,475 --> 00:04:35,300 and so that function will now become available to me within my code here. 58 00:04:35,300 --> 00:04:38,164 So, once I do that inside my animations, 59 00:04:38,164 --> 00:04:42,560 I can just simply call that function so I can say 60 00:04:42,560 --> 00:04:49,515 visibility and then the trigger code now becomes part of my component here. 61 00:04:49,515 --> 00:04:55,360 Now, this I find is a better way of organizing the code for my animations. 62 00:04:55,360 --> 00:04:59,400 Now, if I need to use the same trigger in another component, 63 00:04:59,400 --> 00:05:07,545 I can simply follow this approach to include that into my other components as well. 64 00:05:07,545 --> 00:05:09,800 Let's save the changes and then go and take 65 00:05:09,800 --> 00:05:13,020 a quick look at our application in the browser. 66 00:05:13,020 --> 00:05:18,460 Go into the browser, you see that when I go to the disk component, 67 00:05:18,460 --> 00:05:21,215 the disk component is right there and then 68 00:05:21,215 --> 00:05:24,810 it'll have the same animation behavior as before. 69 00:05:24,810 --> 00:05:26,640 So, by refactoring the code, 70 00:05:26,640 --> 00:05:31,085 I have managed to get the code better organized and 71 00:05:31,085 --> 00:05:36,385 still work exactly the same as part one of this exercise. 72 00:05:36,385 --> 00:05:41,875 If you had just one single animation used in one single place, 73 00:05:41,875 --> 00:05:44,870 then the previous approach works just well but if you have 74 00:05:44,870 --> 00:05:48,800 multiple and especially if you're reusing the code in many components, 75 00:05:48,800 --> 00:05:55,160 then this refactored approach is a much better way of implementing the solution. 76 00:05:55,160 --> 00:06:00,250 The next update that I'm going to do is to add animations on route changes. 77 00:06:00,250 --> 00:06:04,670 So, when I go from one view to another view, so, for example, 78 00:06:04,670 --> 00:06:11,145 from the home to the about or about to menu or menu to contact or vice versa, 79 00:06:11,145 --> 00:06:15,350 then I want to be able to animate these changes within my application. 80 00:06:15,350 --> 00:06:16,430 So, to do that, 81 00:06:16,430 --> 00:06:22,480 I will introduce yet another function into the app animation.ts file. 82 00:06:22,480 --> 00:06:24,980 So, going into the app animation.ts file, 83 00:06:24,980 --> 00:06:33,210 I will export another function which I call as FlyInOut, 84 00:06:34,570 --> 00:06:39,325 you will see why I use this name here. 85 00:06:39,325 --> 00:06:49,150 Then this would return a function which is a trigger with the name FlyInOut. 86 00:06:49,820 --> 00:06:52,380 So, inside was trigger, 87 00:06:52,380 --> 00:06:58,710 I'm going to define the code for what this trigger is going to do. 88 00:06:59,620 --> 00:07:10,015 So, in here, I will define a state here with the name star, 89 00:07:10,015 --> 00:07:12,445 so it doesn't matter what state it is, 90 00:07:12,445 --> 00:07:16,820 this is applicable to any state and then I will define 91 00:07:16,820 --> 00:07:22,610 some styles here and the two styles that I 92 00:07:22,610 --> 00:07:26,600 will define is opacity is one 93 00:07:26,600 --> 00:07:36,915 and transform is translateX(0), 94 00:07:36,915 --> 00:07:41,355 so which means that it is in its normal position in this case. 95 00:07:41,355 --> 00:07:45,270 Now, when I define transitions, 96 00:07:45,270 --> 00:07:50,880 I can also define transitions in this way. 97 00:07:50,990 --> 00:07:55,090 So, if I say enter transition, 98 00:07:55,090 --> 00:07:59,240 the enter transition is a shorthand for saying going from 99 00:07:59,240 --> 00:08:03,190 void state to one of the existing state. 100 00:08:03,190 --> 00:08:06,890 So, which means that the view is coming in into my application. 101 00:08:06,890 --> 00:08:10,655 So enter, meaning that now when I route into 102 00:08:10,655 --> 00:08:15,450 a particular view in my single page application, 103 00:08:15,450 --> 00:08:18,500 that view will be entering into the view. 104 00:08:18,500 --> 00:08:24,325 So, that's why I can apply the colon enter transition in that case. 105 00:08:24,325 --> 00:08:27,725 Now similarly, there is another transition called colon 106 00:08:27,725 --> 00:08:31,790 leave which I can apply when you transition out of 107 00:08:31,790 --> 00:08:40,580 this view and then you're taking the view out from the router outlet of your application. 108 00:08:40,580 --> 00:08:46,950 So, we're going to do both enter and the other one which is leave. 109 00:08:52,760 --> 00:08:56,555 So, two functions that I'm going to define here, 110 00:08:56,555 --> 00:09:00,155 transition enter and transition leave here. 111 00:09:00,155 --> 00:09:01,730 So, for the enter, 112 00:09:01,730 --> 00:09:04,150 what do I want to define? 113 00:09:04,150 --> 00:09:09,330 For enter, let me define the function in here, 114 00:09:09,330 --> 00:09:11,800 and similarly, for leave also, 115 00:09:11,800 --> 00:09:15,815 I'm going to define the functions in here. 116 00:09:15,815 --> 00:09:18,955 So, creating this scaffolding here. 117 00:09:18,955 --> 00:09:25,810 Now, I can enter the information that I want within these transitions. 118 00:09:25,810 --> 00:09:28,025 So, when this transition occurs, 119 00:09:28,025 --> 00:09:35,590 I will start with a style of transform, 120 00:09:36,920 --> 00:09:42,495 translateX minus 100 percent, 121 00:09:42,495 --> 00:09:47,680 which means that the view is completely out of the view here. 122 00:09:47,680 --> 00:09:52,205 So, you start there from minus 100 percent at this moment. 123 00:09:52,205 --> 00:09:53,930 So, when you are entering, 124 00:09:53,930 --> 00:09:55,590 you will start with that, 125 00:09:55,590 --> 00:09:58,710 and then also at this point, 126 00:09:58,710 --> 00:10:03,530 I will animate, and animate in 500. 127 00:10:03,530 --> 00:10:05,710 So, when I specify 500 like this, 128 00:10:05,710 --> 00:10:07,960 you can even do it this way. 129 00:10:07,960 --> 00:10:10,995 Alternately, you can say, within quotes, 130 00:10:10,995 --> 00:10:16,900 "500ms", and then you can even use ease-in or ease-out. 131 00:10:16,900 --> 00:10:19,400 So, let me modify this into 132 00:10:19,400 --> 00:10:28,980 500ms ease-in because this view is coming in. 133 00:10:28,980 --> 00:10:30,790 So, we will ease-in the view. 134 00:10:30,790 --> 00:10:37,610 So, for leave, I will apply the transition as animate, 135 00:10:37,610 --> 00:10:45,640 and then I would say 500 milliseconds, again, ease-out. 136 00:10:45,640 --> 00:10:47,740 So, this view is leaving. 137 00:10:47,740 --> 00:10:50,350 So, we want to ease-out that view. 138 00:10:50,350 --> 00:10:52,365 Then, in this case, 139 00:10:52,365 --> 00:10:55,115 the style that I apply 140 00:10:55,115 --> 00:11:03,880 is transform, 141 00:11:04,670 --> 00:11:09,590 translateX 100 percent. 142 00:11:09,590 --> 00:11:15,370 So, this view will completely disappear from the screen there. 143 00:11:15,370 --> 00:11:18,055 TranslateX 100 percent. 144 00:11:18,055 --> 00:11:23,000 Also, I will set the opacity to zero. 145 00:11:23,000 --> 00:11:25,615 So, completely disappears from the screen. 146 00:11:25,615 --> 00:11:31,140 So, this animation will add in a good new feature in here. 147 00:11:31,140 --> 00:11:33,570 Now, for this one also, 148 00:11:33,570 --> 00:11:40,825 I can add in, starting with an opacity of zero, if you prefer. 149 00:11:40,825 --> 00:11:43,730 Let's add that in and see how it looks like. 150 00:11:43,730 --> 00:11:48,895 So, this is the flyInOut trigger that I've defined here. 151 00:11:48,895 --> 00:11:50,910 Now, you are obviously wondering, 152 00:11:50,910 --> 00:11:53,690 how do I make use of this flyInOut and then apply 153 00:11:53,690 --> 00:11:56,650 this to route transitions in my application? 154 00:11:56,650 --> 00:11:59,815 So, to do that, we will go to, first, 155 00:11:59,815 --> 00:12:03,055 starting with menu component.ts file. 156 00:12:03,055 --> 00:12:04,810 I'm going to import 157 00:12:04,810 --> 00:12:13,220 the flyInOut 158 00:12:14,730 --> 00:12:25,820 from app animation. 159 00:12:27,090 --> 00:12:31,230 Then, going to the component, 160 00:12:31,230 --> 00:12:35,425 I am now going to introduce a new property called as host. 161 00:12:35,425 --> 00:12:39,445 I'll tell you what goes into host in a short while. 162 00:12:39,445 --> 00:12:42,939 Then, we'll also include the animations property, 163 00:12:42,939 --> 00:12:45,470 which is an array here. 164 00:12:45,470 --> 00:12:50,980 Then, inside here, I will use the flyInOut that we have just imported. 165 00:12:50,980 --> 00:12:59,325 So, this animation trigger will be applied for this media component. 166 00:12:59,325 --> 00:13:00,660 Now, within the host, 167 00:13:00,660 --> 00:13:07,975 so this is how I ensure that this particular animation happens when route changes occur. 168 00:13:07,975 --> 00:13:11,215 So, within this host here, 169 00:13:11,215 --> 00:13:15,560 I supply this as saying, 170 00:13:17,070 --> 00:13:22,705 @flyInOut and say true, 171 00:13:22,705 --> 00:13:28,730 and this should be enclosed in quotes also, 172 00:13:29,370 --> 00:13:41,660 @flyInOut, true, and then style, 173 00:13:42,000 --> 00:13:45,595 display block. 174 00:13:45,595 --> 00:13:52,330 So, this two should be applied inside the host property here. 175 00:13:52,330 --> 00:13:56,410 Now, when we do this, my menu component will now start animating 176 00:13:56,410 --> 00:14:00,440 when I route into the menu component, 177 00:14:00,440 --> 00:14:02,965 and then also when I leave the menu component. 178 00:14:02,965 --> 00:14:10,705 Now, I will apply the same thing to the remaining components of my Angular application. 179 00:14:10,705 --> 00:14:12,720 So, what I will do is, 180 00:14:12,720 --> 00:14:15,260 I'll just copy this, 181 00:14:15,850 --> 00:14:20,910 and then we'll apply this to the about component. 182 00:14:20,910 --> 00:14:23,545 So, I'll go to the about component. 183 00:14:23,545 --> 00:14:25,555 Within the component decorator, 184 00:14:25,555 --> 00:14:28,650 I have included the information here, 185 00:14:28,650 --> 00:14:34,070 and you see the red squiggly line which reminds me that I need to import 186 00:14:34,080 --> 00:14:42,255 flyInOut from animations, app animation. 187 00:14:42,255 --> 00:14:46,410 So, the same approach, about component, 188 00:14:46,410 --> 00:14:52,080 then within the contact component also, the same thing, 189 00:15:08,840 --> 00:15:17,980 and then apply the host and animation properties to the component decorator, 190 00:15:17,980 --> 00:15:21,660 and then what else do we have? 191 00:15:21,660 --> 00:15:28,040 The home component. Let's go to the home component and repeat the same thing here. 192 00:15:28,040 --> 00:15:33,385 I will add in the host and the animations property, 193 00:15:33,385 --> 00:15:36,210 and then go ahead and import 194 00:15:36,210 --> 00:15:50,210 flyInOut, from app animation. 195 00:15:50,350 --> 00:15:56,235 Did we miss out any? Oh, we need to also update the dish detail component. 196 00:15:56,235 --> 00:15:58,360 So, let me go to the dish detail component. 197 00:15:58,360 --> 00:16:00,840 Since we already have the visibility there, 198 00:16:00,840 --> 00:16:04,435 I'm just going to import the flyInOut. 199 00:16:04,435 --> 00:16:08,920 Then, since we have already set up the remaining parts here, 200 00:16:08,920 --> 00:16:12,665 I'm going to go in and paste that code, 201 00:16:12,665 --> 00:16:17,125 and obviously, I have two animations here. 202 00:16:17,125 --> 00:16:20,860 Let me cut the visibility out from here and then add 203 00:16:20,860 --> 00:16:29,420 it into the other animation, 204 00:16:29,420 --> 00:16:35,040 and then cut this out so that I have single animation property with 205 00:16:35,040 --> 00:16:40,780 both flyInOut and visibility functions both being included and called there, 206 00:16:40,780 --> 00:16:42,630 and then the host property. 207 00:16:42,630 --> 00:16:45,625 Now, let's save the changes and then take a look at 208 00:16:45,625 --> 00:16:51,370 the new animation that we just applied to our components. 209 00:16:51,370 --> 00:16:56,475 Starting out with the home view. 210 00:16:56,475 --> 00:16:59,000 So, we have the home view being rendered here. 211 00:16:59,000 --> 00:17:02,500 Let me now quickly go to the About view, 212 00:17:02,500 --> 00:17:05,800 and then you see that the About view just slides in while 213 00:17:05,800 --> 00:17:09,780 the Home view slides out into the screen here. 214 00:17:09,780 --> 00:17:11,810 Similarly, when I go to the menu, 215 00:17:11,810 --> 00:17:16,190 you will see that the Menu view slides in while the About view slides out. 216 00:17:16,190 --> 00:17:20,240 It's so fast that you don't notice it as such. 217 00:17:20,240 --> 00:17:22,740 Similarly, for the Contact view, 218 00:17:22,740 --> 00:17:24,710 you see the contact view sliding in. 219 00:17:24,710 --> 00:17:28,940 So, this kind of animation can be added by using 220 00:17:28,940 --> 00:17:34,170 this approach that we just illustrated for your Angular application. 221 00:17:34,170 --> 00:17:40,375 We're not done yet. We'll do one more animation within our application. 222 00:17:40,375 --> 00:17:44,955 To illustrate what I would like to do in the next animation, 223 00:17:44,955 --> 00:17:48,495 let's take a quick watch on the menu component. 224 00:17:48,495 --> 00:17:50,780 So, you see that when the menu component, 225 00:17:50,780 --> 00:17:54,830 when the spinner is spinning and then gets replaced by the view, 226 00:17:54,830 --> 00:17:57,180 the view suddenly appears on the screen, 227 00:17:57,180 --> 00:17:59,740 and it is a little bit jarring to the eye. 228 00:17:59,740 --> 00:18:01,230 You may not notice it. 229 00:18:01,230 --> 00:18:03,725 You may be quite happy with that. 230 00:18:03,725 --> 00:18:07,340 But we can add in a way of easing in 231 00:18:07,340 --> 00:18:12,235 that view when the data is fetched from the server and the view is being rendered in. 232 00:18:12,235 --> 00:18:20,625 So, when the dish's variable in my menu component.ts file becomes not nulled, 233 00:18:20,625 --> 00:18:27,290 then the spinner will be hidden and then the the dish's view, 234 00:18:27,290 --> 00:18:30,320 the menu is constructed and then laid out. 235 00:18:30,320 --> 00:18:33,060 So, we want that to ease into the screen. 236 00:18:33,060 --> 00:18:38,820 So, let's add in one more animation to effect that both in the menu component. 237 00:18:38,820 --> 00:18:42,055 We'll also apply the same thing in the dish detail component. 238 00:18:42,055 --> 00:18:46,540 We'll also use the same in the Home component also and the About component, 239 00:18:46,540 --> 00:18:51,550 where we're fetching the data in order to show the list of leaders. 240 00:18:51,550 --> 00:18:56,145 So, wherever you are fetching data from the server and then laying out the view, 241 00:18:56,145 --> 00:18:57,740 when the view appears, 242 00:18:57,740 --> 00:19:03,275 we want to ease the view in by using this new animation that I'm going to create next. 243 00:19:03,275 --> 00:19:06,230 Going to the app animation.ts file, 244 00:19:06,230 --> 00:19:08,615 I'm going to add in another function here, 245 00:19:08,615 --> 00:19:14,750 and let me call it expand. 246 00:19:14,750 --> 00:19:18,200 This function will expand the view that is being laid 247 00:19:18,200 --> 00:19:22,370 out after the data is fetched from the server side. 248 00:19:22,370 --> 00:19:24,885 So, this view, again, 249 00:19:24,885 --> 00:19:28,370 I will return a trigger here. 250 00:19:28,370 --> 00:19:32,280 I will name the trigger as expand, 251 00:19:32,280 --> 00:19:37,690 and this trigger will create. 252 00:19:37,890 --> 00:19:40,590 How do we define this trigger. 253 00:19:40,590 --> 00:19:49,870 So, inside this trigger we're going to include a state with star in there. 254 00:19:49,870 --> 00:19:51,920 So, it doesn't matter what state it is. 255 00:19:51,920 --> 00:20:00,580 All the states will be rendered with the style as 256 00:20:00,580 --> 00:20:10,420 opacity one transform translate x 0. 257 00:20:10,420 --> 00:20:16,430 So, it is displayed right and center in my application. 258 00:20:17,520 --> 00:20:20,990 That should be a brace there. 259 00:20:20,990 --> 00:20:23,250 I was looking at it and said, 260 00:20:23,250 --> 00:20:25,735 Why is it showing a red squiggly line. 261 00:20:25,735 --> 00:20:29,560 So, when you're typing very fast you often make mistakes there. 262 00:20:29,560 --> 00:20:31,070 So, instead of a square bracket, 263 00:20:31,070 --> 00:20:34,205 that should be a brace there. 264 00:20:34,205 --> 00:20:35,915 So, that is the state. 265 00:20:35,915 --> 00:20:44,925 So, any state that it'll be completely visible and centered where it should be centered. 266 00:20:44,925 --> 00:20:49,180 Now, let me trigger a transition. 267 00:20:49,180 --> 00:20:51,730 Now, this transition will be triggered only 268 00:20:51,730 --> 00:20:55,465 upon the enter when the view is laid out on the screen. 269 00:20:55,465 --> 00:21:00,740 The exit part we're already doing it in the route animation, so we don't need that. 270 00:21:00,740 --> 00:21:03,060 We only need the inter part for this view because 271 00:21:03,060 --> 00:21:06,575 the view is rendered onto this screen there. 272 00:21:06,575 --> 00:21:08,435 So, in the enter, 273 00:21:08,435 --> 00:21:14,625 I'm going to define the transition appropriately. 274 00:21:14,625 --> 00:21:18,860 So, in the transition what do I want to do? 275 00:21:18,860 --> 00:21:27,260 I want to apply the same approach that I have used with the enter transition here. 276 00:21:27,260 --> 00:21:32,600 So, I'm just going to copy this and then make some minor adjustments to the code there. 277 00:21:32,600 --> 00:21:36,335 So, for the enter transition here also, 278 00:21:36,335 --> 00:21:38,490 I want to apply the same thing. 279 00:21:38,490 --> 00:21:42,040 I will say translate Insta from 100 percent. 280 00:21:42,040 --> 00:21:46,630 I'm going to just use 50 percent and then I will do the translate Y. 281 00:21:46,630 --> 00:21:52,460 So, which means that this view will drop down from the top 50 precent starting with 282 00:21:52,460 --> 00:21:58,655 opacity zero and then I will ease it in a bit faster time, 283 00:21:58,655 --> 00:22:04,200 200 milliseconds and will ease it into our application. 284 00:22:04,200 --> 00:22:09,640 Now, so, you see the minor adjustment to the code here. 285 00:22:09,640 --> 00:22:14,845 So, translate minus 50 percent and opacity zero and 286 00:22:14,845 --> 00:22:21,025 it is eased in 200 milliseconds and then at that point, 287 00:22:21,025 --> 00:22:27,105 I can apply this style as this same style. 288 00:22:27,105 --> 00:22:32,240 I'll apply there. So, I will just copy that style and then apply that style there. 289 00:22:32,240 --> 00:22:34,440 So, when it is eased in, 290 00:22:34,440 --> 00:22:40,115 it will come in and be completely visible where it should be. 291 00:22:40,115 --> 00:22:43,735 So, this is the expand function that I have defined here. 292 00:22:43,735 --> 00:22:45,950 So, where do I want to make use of this function? 293 00:22:45,950 --> 00:22:52,060 We will go first to menu component and within the menu component, 294 00:22:52,060 --> 00:22:55,530 I will now also import that, 295 00:22:55,530 --> 00:23:04,595 expand and then add it in into my animations and then how do I apply this expand? 296 00:23:04,595 --> 00:23:08,160 So, going to that menu components template file. 297 00:23:08,160 --> 00:23:09,925 In the template file, 298 00:23:09,925 --> 00:23:12,840 I'm going to apply the expand to 299 00:23:12,840 --> 00:23:20,435 the grid list where I am applying this. 300 00:23:20,435 --> 00:23:24,960 So, let me copy that and then also we will go 301 00:23:24,960 --> 00:23:32,230 to the home component and within the home component also, 302 00:23:32,230 --> 00:23:42,590 I'm going to include the expand and then add the expand to the animation, 303 00:23:43,430 --> 00:23:49,475 and then go to the home components template file and then I will apply 304 00:23:49,475 --> 00:23:57,060 that expand to the dish components MD card, 305 00:23:57,060 --> 00:24:02,695 to the promotion components MD card and also to the leader 306 00:24:02,695 --> 00:24:05,580 components MD card here because all these 307 00:24:05,580 --> 00:24:09,880 three will be fetched in the future from the server and then rendered. 308 00:24:09,880 --> 00:24:15,075 So, the dish components data is already being fetched from the server. 309 00:24:15,075 --> 00:24:20,080 Now, the same thing going to the DishDetail component. 310 00:24:20,080 --> 00:24:27,000 I'm going to add in the expand to the imports and then add 311 00:24:27,000 --> 00:24:35,530 an expand into the animation's going to the DishDetail component's view. 312 00:24:35,530 --> 00:24:37,415 Along with a visibility, 313 00:24:37,415 --> 00:24:40,095 I will also apply the expand to 314 00:24:40,095 --> 00:24:47,705 the card div there and then to the comments div also here. 315 00:24:47,705 --> 00:24:50,720 This is in the DishDetail component. 316 00:24:50,720 --> 00:24:54,530 The contact component doesn't have anything that is being fetched from the server. 317 00:24:54,530 --> 00:25:00,265 So, I'll just go over to the about component and in the about component also, 318 00:25:00,265 --> 00:25:08,680 I will include the expand and also in the animations. 319 00:25:08,680 --> 00:25:12,870 Going to the about components template file here this test 320 00:25:12,870 --> 00:25:17,190 here which shows the leaders is being fetched from the server side. 321 00:25:17,190 --> 00:25:20,310 So, I'm going to apply the expand over this. 322 00:25:20,310 --> 00:25:23,250 Let's save the changes and then go and take 323 00:25:23,250 --> 00:25:26,960 a look at our angular application in the browser. 324 00:25:26,960 --> 00:25:29,235 Going to our angular application. 325 00:25:29,235 --> 00:25:31,665 Now, when you go into the home template, 326 00:25:31,665 --> 00:25:34,700 you can see that the cards when they were fetched, 327 00:25:34,700 --> 00:25:38,070 they slided in to my view there. 328 00:25:38,070 --> 00:25:40,970 Now, similarly when you go to the about component, 329 00:25:40,970 --> 00:25:45,050 you see that once the data is fetched from the server, 330 00:25:45,050 --> 00:25:50,470 then the rendering of the various leaders is being 331 00:25:50,470 --> 00:25:56,590 slide in ever so slowly into position in this view here. 332 00:25:56,590 --> 00:25:58,905 Similarly, going to the menu component, 333 00:25:58,905 --> 00:26:01,270 we will see a same behavior here. 334 00:26:01,270 --> 00:26:03,595 So, once the menu data is ready, 335 00:26:03,595 --> 00:26:07,065 the menu component slides into place right there. 336 00:26:07,065 --> 00:26:09,980 Same thing with the dish detail components. 337 00:26:09,980 --> 00:26:12,490 So, let me go to the DishDetail component and you will see that 338 00:26:12,490 --> 00:26:15,250 the view slides into place there but the 339 00:26:15,250 --> 00:26:18,495 other animation which was 340 00:26:18,495 --> 00:26:22,625 disappearing and reappearing that part still works just like before. 341 00:26:22,625 --> 00:26:32,755 So, you see that we have introduced yet another animation into our Angular application. 342 00:26:32,755 --> 00:26:38,555 Now, whether you like this or you want to do a more elaborate way of doing animations, 343 00:26:38,555 --> 00:26:41,605 certainly, you can go crazy with 344 00:26:41,605 --> 00:26:45,395 doing many different kinds of things with your animation. 345 00:26:45,395 --> 00:26:52,395 Changing many different properties within the styles as in which way you like and so on. 346 00:26:52,395 --> 00:26:57,060 But I felt that a few subtle animations here and there will 347 00:26:57,060 --> 00:27:02,390 help enhance the user interface for my angular application. 348 00:27:02,390 --> 00:27:08,195 So, I've added in two more new animations to my Angular application. 349 00:27:08,195 --> 00:27:14,535 With this, we complete the second part of our animations exercise. 350 00:27:14,535 --> 00:27:18,240 I hope that with these two parts exercise, 351 00:27:18,240 --> 00:27:21,280 you have understood better about how to make use of 352 00:27:21,280 --> 00:27:24,555 animations within your Angular application. 353 00:27:24,555 --> 00:27:32,040 This is a good time for you to do a git commit with the message, animations part two.