1
00:00:00,000 --> 00:00:04,763
[MUSIC]

2
00:00:04,763 --> 00:00:07,931
As we learned in the previous lecture,

3
00:00:07,931 --> 00:00:12,927
animations add a lot of intrinsic
value to your application.

4
00:00:12,927 --> 00:00:16,080
It adds to a better user experience.

5
00:00:16,080 --> 00:00:19,990
Now obviously that doesn't mean that
you throw animations all over the place

6
00:00:19,990 --> 00:00:22,730
just for the sake of doing animations.

7
00:00:22,730 --> 00:00:29,480
You put animations in place for the sake
of making the user experience better.

8
00:00:30,680 --> 00:00:34,130
In this exercise we'll
do our first animation

9
00:00:34,130 --> 00:00:37,006
within our Angular application
that we have developed so far.

10
00:00:37,006 --> 00:00:38,425
And along the way,

11
00:00:38,425 --> 00:00:44,190
learn how animations can be
implemented in an Angular application.

12
00:00:44,190 --> 00:00:49,127
We'll continue this thread in
the second part of the exercise where

13
00:00:49,127 --> 00:00:53,206
we will add more animation
to our Angular application.

14
00:00:53,206 --> 00:00:58,720
When we started out this course,
in the very first exercise with Angular,

15
00:00:58,720 --> 00:01:04,147
we had already added in the animation
module into our Angular application

16
00:01:04,147 --> 00:01:10,299
in the app.module.ts5, so we have imported
the animation module right there.

17
00:01:10,299 --> 00:01:13,551
Now the next step is to
go to the components and

18
00:01:13,551 --> 00:01:17,240
then add in the animation
wherever it is required.

19
00:01:17,240 --> 00:01:24,336
The first animation that we're going to
add is in the dishdetail component here.

20
00:01:24,336 --> 00:01:28,758
So going to the dishdetail component,

21
00:01:28,758 --> 00:01:32,790
let me import a few classes here.

22
00:01:32,790 --> 00:01:38,271
I'll import trigger, state,

23
00:01:38,271 --> 00:01:45,382
style, animate, and transition from.

24
00:01:50,250 --> 00:01:53,120
@angular/animations.

25
00:01:56,695 --> 00:02:02,460
Now, once we import these we can make use
of these in constructing our animation.

26
00:02:02,460 --> 00:02:06,390
So, how do you add
animation to a component?

27
00:02:06,390 --> 00:02:12,360
We will add the animation triggers
into the component decorator here.

28
00:02:12,360 --> 00:02:19,247
So going into the component
decorator after the styles URLs,

29
00:02:19,247 --> 00:02:25,217
and add in the animations
as a property within there.

30
00:02:25,217 --> 00:02:30,140
And then in here,
I'm going to define a trigger,

31
00:02:30,140 --> 00:02:34,126
which I call as visibility trigger, and

32
00:02:34,126 --> 00:02:39,888
I'm going to define the visibility
trigger inside here.

33
00:02:39,888 --> 00:02:43,942
Now for this visibility trigger,

34
00:02:43,942 --> 00:02:48,972
I will define two states,
I will define one

35
00:02:48,972 --> 00:02:54,282
state as shown and
I will define a second state

36
00:02:54,282 --> 00:03:00,932
as, Hidden.

37
00:03:00,932 --> 00:03:04,930
So I have the flexibility of
defining my states like this.

38
00:03:04,930 --> 00:03:09,670
So for the shown state,
what is it that I want to apply?

39
00:03:09,670 --> 00:03:16,565
So for the shown state,
I will apply the style as follows,

40
00:03:16,565 --> 00:03:21,350
so the styles that I'm going to apply for

41
00:03:21,350 --> 00:03:26,416
the shown state, I will do transform, and

42
00:03:26,416 --> 00:03:33,240
the transform that I'm going to
apply is a scale of 1.0.

43
00:03:33,240 --> 00:03:38,170
So I want to show it in

44
00:03:38,170 --> 00:03:42,810
its normal size and

45
00:03:42,810 --> 00:03:47,167
an opacity of 0.

46
00:03:47,167 --> 00:03:50,929
So this is how I define the shown style.

47
00:03:50,929 --> 00:03:57,884
So, and
the hidden state I define the style as,

48
00:04:03,816 --> 00:04:09,659
Transform, I'll say scale(0.5).

49
00:04:09,659 --> 00:04:13,002
You can play around with these numbers

50
00:04:13,002 --> 00:04:17,294
to see whether the animation
is what you desire.

51
00:04:17,294 --> 00:04:21,194
I also played around with these numbers
until I got something that I was

52
00:04:21,194 --> 00:04:22,194
satisfied with.

53
00:04:22,194 --> 00:04:29,457
And 0, or for their further shown state,
I will put the opacity as 1.

54
00:04:29,457 --> 00:04:31,929
Opacity 1 means it's completely visible.

55
00:04:31,929 --> 00:04:34,942
Opacity 0 means it's completely hidden.

56
00:04:34,942 --> 00:04:38,555
Now, I have defined two states here,
shown and here in state.

57
00:04:38,555 --> 00:04:43,481
Now, the transition
between these two states,

58
00:04:43,481 --> 00:04:50,931
I'm going to define here as, whenever
I move from any state to any state,

59
00:04:50,931 --> 00:04:56,339
it doesn't matter which
state to which state I move,

60
00:04:56,339 --> 00:05:02,108
the transform is done with
animation of 0.5 seconds,

61
00:05:02,108 --> 00:05:04,780
or 500 milliseconds.

62
00:05:04,780 --> 00:05:08,522
And I will ease in out.

63
00:05:08,522 --> 00:05:13,323
So here, what I'm specifying is that
if I move from shown to hidden state or

64
00:05:13,323 --> 00:05:19,140
from hidden to shown state, I will move
within 0.5 seconds, or 500 milliseconds.

65
00:05:19,140 --> 00:05:23,278
And then, I will do the transition
by easing in and out, so

66
00:05:23,278 --> 00:05:27,755
it won't be a linear transition,
it'll be slowly going in and

67
00:05:27,755 --> 00:05:31,218
then ease in and
then ease out the transition, so

68
00:05:31,218 --> 00:05:35,383
that it won't be a jerky
transition from one to the other.

69
00:05:35,383 --> 00:05:40,411
So you can use this ease in or
ease out or ease-in-out

70
00:05:40,411 --> 00:05:45,125
to specify how you want
the transition to happen.

71
00:05:45,125 --> 00:05:49,625
So now for this animation, I've specified

72
00:05:49,625 --> 00:05:54,861
the visibility as the trigger for
this animation.

73
00:05:54,861 --> 00:05:58,911
Now to enable this animation
to work correctly,

74
00:05:58,911 --> 00:06:04,344
I'll go into my DishdetailComponent,
and then I will specify,

75
00:06:04,344 --> 00:06:09,412
within this component,
the initial value for visibility.

76
00:06:09,412 --> 00:06:13,444
So, I will say visibility is

77
00:06:13,444 --> 00:06:18,484
initially set to shown, and then,

78
00:06:18,484 --> 00:06:25,379
whenever I am changing
from one dish to another.

79
00:06:25,379 --> 00:06:28,649
And this happens whenever I
am fetching the dish here.

80
00:06:28,649 --> 00:06:32,117
So whenever I am changing the dish
from one dish to the other,

81
00:06:32,117 --> 00:06:35,249
this is caused whenever
the route parameter changes.

82
00:06:35,249 --> 00:06:37,942
So at that point,
I'm going to apply the animation.

83
00:06:37,942 --> 00:06:42,649
I'll make the trigger go from
shown to hidden state and

84
00:06:42,649 --> 00:06:48,520
then back from hidden to shown
state when the dish is available.

85
00:06:48,520 --> 00:06:53,330
So to apply that transformation.

86
00:06:53,330 --> 00:06:58,720
So I'm going to enclose
this statement inside

87
00:06:58,720 --> 00:07:03,330
a block here in this arrow function.

88
00:07:03,330 --> 00:07:11,806
And then also define
this visibility here as.

89
00:07:11,806 --> 00:07:16,845
So when I am transitioning
from one state to another, so

90
00:07:16,845 --> 00:07:22,421
as I begin to fetch the dish
information from the server side,

91
00:07:22,421 --> 00:07:27,784
I will first hide the current
dish by setting the visibility

92
00:07:27,784 --> 00:07:32,503
value to hidden,
meaning that the current dish that

93
00:07:32,503 --> 00:07:37,265
is being displayed will
be hidden from the view.

94
00:07:37,265 --> 00:07:42,085
And then when the new dish becomes
available, it'll pop back into the view.

95
00:07:42,085 --> 00:07:48,147
So to do that, when my dish becomes
available in the second part,

96
00:07:48,147 --> 00:07:54,651
in the subscribe part, I will say as
the last statement in that block,

97
00:07:54,651 --> 00:07:59,299
I will say this visibility
is equal to shown here.

98
00:07:59,299 --> 00:08:04,513
So my view becomes visible at that point.

99
00:08:04,513 --> 00:08:09,229
Now I am not applying this to
the error message because I'm

100
00:08:09,229 --> 00:08:13,654
going to apply this visibility
only to those parts of my

101
00:08:13,654 --> 00:08:17,616
template where my dish
is actually being shown.

102
00:08:17,616 --> 00:08:20,910
Now, if there is an error,
then I just want to hide the correct dish.

103
00:08:20,910 --> 00:08:24,751
Then, only show the error
message in the view there.

104
00:08:24,751 --> 00:08:29,021
So, with these changes to
my DishdetailComponent.

105
00:08:29,021 --> 00:08:34,092
So, you can see again,
explaining this in it one more time.

106
00:08:34,092 --> 00:08:40,072
When I begin the fetching of the new dish
upon change of the route parameters,

107
00:08:40,072 --> 00:08:42,924
I will set the visibility to hidden so

108
00:08:42,924 --> 00:08:48,445
that current dish that is being
displayed in the view will hide itself.

109
00:08:48,445 --> 00:08:52,427
And then when the new dish becomes
available, so that will happen when

110
00:08:52,427 --> 00:08:56,221
the subscribe is called when that
observable becomes available.

111
00:08:56,221 --> 00:09:00,001
And then,
when the dish becomes available and then,

112
00:09:00,001 --> 00:09:04,455
I set this dish to the dish which
came back from the observable.

113
00:09:04,455 --> 00:09:08,181
At that point, I will restore
the visibility to that shown state.

114
00:09:08,181 --> 00:09:13,476
So, that my new dish that I have
fetched can be shown on the screen.

115
00:09:13,476 --> 00:09:18,150
With this change,
I now go to the template file,

116
00:09:18,150 --> 00:09:22,710
and within the template
file I'm going to apply

117
00:09:22,710 --> 00:09:26,366
the visibility to both the dish here.

118
00:09:26,366 --> 00:09:31,160
So the first div where I am
displaying the dish I will

119
00:09:31,160 --> 00:09:35,948
apply the, Visibility trigger to the dish.

120
00:09:35,948 --> 00:09:39,417
And then I will set that equal to,

121
00:09:42,937 --> 00:09:49,060
Visibility, which is the variable that
I have defined in the code there.

122
00:09:49,060 --> 00:09:54,450
Now, I apply this to the dish here,
and also apply the same thing

123
00:09:54,450 --> 00:09:58,530
to the second div,
where I am displaying the comments.

124
00:09:59,700 --> 00:10:00,837
And that's it.

125
00:10:00,837 --> 00:10:05,902
So let me save all the changes,
and then we'll go and

126
00:10:05,902 --> 00:10:11,213
take a look at how this
animation works in our example.

127
00:10:11,213 --> 00:10:15,015
Going to the browser,
now I am displaying them the menu.

128
00:10:15,015 --> 00:10:19,618
Let me select one of the dishes and then
move into the view of the dishes here.

129
00:10:19,618 --> 00:10:24,336
So when the dish is displayed,
notice that anytime I move from

130
00:10:24,336 --> 00:10:28,432
this dish to the next dish,
so by clicking the right.

131
00:10:28,432 --> 00:10:33,349
Then that dish disappears, and
then when the new dish becomes available,

132
00:10:33,349 --> 00:10:37,900
the view again becomes visible and
then the new dish is shown.

133
00:10:37,900 --> 00:10:42,210
Similarly, I can do one more and
then notice that the new dish,

134
00:10:42,210 --> 00:10:46,070
as soon as the information becomes
available, it becomes again visible.

135
00:10:46,070 --> 00:10:51,890
So this is the transition that I
am applying in this example here.

136
00:10:51,890 --> 00:10:58,860
So going back, you can see the same
behavior again repeating itself.

137
00:10:58,860 --> 00:11:02,730
This little user interface change

138
00:11:02,730 --> 00:11:08,310
adds a lot of value to the way
the user perceives your application.

139
00:11:08,310 --> 00:11:13,520
As you realize, this doesn't add much to
the functionality of your application

140
00:11:13,520 --> 00:11:18,690
itself, but
adds to a better user experience.

141
00:11:18,690 --> 00:11:23,625
And that is where we apply
animations judiciously within our

142
00:11:23,625 --> 00:11:28,658
application to make certain
user experience more meaningful

143
00:11:28,658 --> 00:11:33,302
to the user that is viewing
your Angular application, or

144
00:11:33,302 --> 00:11:39,421
viewing your mobile application,
which we will see in the later courses.

145
00:11:39,421 --> 00:11:43,957
This completes this
exercise on animations.

146
00:11:43,957 --> 00:11:48,939
We'll continue the animations
explorations into that second

147
00:11:48,939 --> 00:11:53,082
part of the exercise that
comes up right after this.

148
00:11:53,082 --> 00:11:57,513
This is a good time for you to do a Git
comment with the message animations,

149
00:11:57,513 --> 00:11:58,164
part one.

150
00:11:58,164 --> 00:12:03,927
[MUSIC]