1
00:00:03,940 --> 00:00:09,160
Hello, everyone, and welcome back in this lesson, we're going to talk about a couple of performance

2
00:00:09,160 --> 00:00:12,670
optimizations that you might need in certain scenarios.

3
00:00:12,700 --> 00:00:15,670
First, let's talk about the attribute decorated.

4
00:00:15,700 --> 00:00:20,920
So was you know, our components can have multiple input properties, such as, for example, here to

5
00:00:20,920 --> 00:00:24,970
the course property, which is annotated here with the input decorator.

6
00:00:25,120 --> 00:00:31,450
Now, if our components have a lot of input properties and we find ourselves in a situation where for

7
00:00:31,450 --> 00:00:37,960
performance reasons, we want to reduce the number of input expressions that are evaluative in all angular

8
00:00:37,960 --> 00:00:44,590
templates of our application, we can do so by removing the binding expression for certain properties

9
00:00:44,590 --> 00:00:47,320
that are not meant to change over time.

10
00:00:47,350 --> 00:00:53,740
Whenever we use the input syntax and we use here the input decorator Angular is shaking for this property

11
00:00:53,740 --> 00:00:57,250
to see if it is changed after each browser event.

12
00:00:57,370 --> 00:01:02,650
Now, in order to avoid that, if we have reasons to believe that the property will never change, there

13
00:01:02,650 --> 00:01:03,450
is a better way.

14
00:01:03,490 --> 00:01:08,980
Let's say, for example, that we have here another input property, which is going to be the type of

15
00:01:08,980 --> 00:01:12,610
girl, let's say, that there could be several types of cards.

16
00:01:12,610 --> 00:01:17,700
And these cards here would be, for example, a card for a beginner course.

17
00:01:17,740 --> 00:01:20,770
So this input property here would be a string.

18
00:01:20,770 --> 00:01:26,470
So we would use here the string syntax and let's fix here this multiple.

19
00:01:26,590 --> 00:01:32,470
Now, one way of receiving this property as an input at the level of the card component would be to

20
00:01:32,470 --> 00:01:38,050
declare here another input and define here a member variable called type.

21
00:01:38,290 --> 00:01:43,350
This way we would have this value here available at the level of our course card component.

22
00:01:43,360 --> 00:01:49,360
But as we can see, this input property here is a hardcoded string that won't change over time.

23
00:01:49,510 --> 00:01:52,030
So there is really no need for Angular to shake.

24
00:01:52,030 --> 00:01:55,890
If this expression is changed on every browser event.

25
00:01:55,930 --> 00:02:01,510
In order to avoid that, we can do a small performance optimization, which is to declare this constant

26
00:02:01,510 --> 00:02:03,700
value as an attribute instead.

27
00:02:03,730 --> 00:02:09,669
So in order to receive this type attribute here at the level of our course card component, instead

28
00:02:09,669 --> 00:02:16,000
of defining here a type variable, we can receive here this value at the level of the constructor using

29
00:02:16,000 --> 00:02:17,650
the attribute decorator's.

30
00:02:17,650 --> 00:02:20,730
So we are going to define here a member variable called type.

31
00:02:20,750 --> 00:02:25,930
It's going to be of type string and we're going to annotate these with the angular attributes.

32
00:02:25,930 --> 00:02:31,450
The greater the attributes, the character takes one parameter, which is going to be the name of the

33
00:02:31,450 --> 00:02:34,880
attribute onto which this variable here is getting binded.

34
00:02:34,990 --> 00:02:40,480
If we now print out these value to the console, we are going to see that we are receiving here in the

35
00:02:40,480 --> 00:02:46,840
correct value of the type attribute if we reload our application and we expect here our console, we

36
00:02:46,840 --> 00:02:52,060
are going to see that indeed the beginner type is getting printed out ten times here to the console

37
00:02:52,060 --> 00:02:53,020
as expected.

38
00:02:53,050 --> 00:02:58,510
Now notice that you don't have to use the attribute decorator in order to have this more simplified

39
00:02:58,510 --> 00:03:04,630
input syntax here at the level of the component, the syntax without the square brackets around the

40
00:03:04,630 --> 00:03:10,870
type and without having to provide you a single quotes in order to identify these with the string.

41
00:03:10,900 --> 00:03:16,100
These more simplified syntax does not require the use of the attribute decorator.

42
00:03:16,130 --> 00:03:20,920
So this syntax here would also work with an input property.

43
00:03:20,950 --> 00:03:22,540
Let's quickly confirm this.

44
00:03:22,540 --> 00:03:28,840
We are going to declare here type as an input and we are going to comment out here from the constructor

45
00:03:28,840 --> 00:03:31,230
the injection of the attribute type.

46
00:03:31,270 --> 00:03:36,340
We are now going to take this console, that statement, and we are going to paste it here inside the

47
00:03:36,340 --> 00:03:40,330
engine on its lifecycle hook that we are going to cover in detail.

48
00:03:40,330 --> 00:03:41,590
In a couple of lessons.

49
00:03:41,590 --> 00:03:46,660
We are going to print out of the screen the value of the input property, and we are going to confirm

50
00:03:46,660 --> 00:03:52,210
that indeed here in the console, we still have here the beginner string printed out ten times.

51
00:03:52,210 --> 00:03:58,810
So as you can see, in order to be able to use these simplified syntax here without the square brackets

52
00:03:58,810 --> 00:04:03,640
for providing an input, we don't have to use the attribute decorator.

53
00:04:03,790 --> 00:04:10,720
The attribute decorator is really a performance optimization that will prevent Angular from continuously

54
00:04:10,720 --> 00:04:13,210
checking the value of the type property.

55
00:04:13,360 --> 00:04:19,329
We could call this functionality provided by the attribute decorator one time binding because this variable

56
00:04:19,329 --> 00:04:25,570
here is only being bound here to the value in the template once the first time that the component gets

57
00:04:25,570 --> 00:04:30,430
built and then the content of this attribute will no longer be Sheck in the future.

58
00:04:30,610 --> 00:04:36,730
The defining this type of variable as an attribute makes it a bit more clear that this property here

59
00:04:36,730 --> 00:04:39,530
is not intended to be changed over time.

60
00:04:39,580 --> 00:04:43,820
Let's not talk about another performance optimization that you might need.

61
00:04:43,840 --> 00:04:47,650
Occasionally we're going to learn how to do custom change detection.