Hello, everyone, and welcome back in this lesson, we're going to talk about a couple of performance
optimizations that you might need in certain scenarios.
First, let's talk about the attribute decorated.
So was you know, our components can have multiple input properties, such as, for example, here to
the course property, which is annotated here with the input decorator.
Now, if our components have a lot of input properties and we find ourselves in a situation where for
performance reasons, we want to reduce the number of input expressions that are evaluative in all angular
templates of our application, we can do so by removing the binding expression for certain properties
that are not meant to change over time.
Whenever we use the input syntax and we use here the input decorator Angular is shaking for this property
to see if it is changed after each browser event.
Now, in order to avoid that, if we have reasons to believe that the property will never change, there
is a better way.
Let's say, for example, that we have here another input property, which is going to be the type of
girl, let's say, that there could be several types of cards.
And these cards here would be, for example, a card for a beginner course.
So this input property here would be a string.
So we would use here the string syntax and let's fix here this multiple.
Now, one way of receiving this property as an input at the level of the card component would be to
declare here another input and define here a member variable called type.
This way we would have this value here available at the level of our course card component.
But as we can see, this input property here is a hardcoded string that won't change over time.
So there is really no need for Angular to shake.
If this expression is changed on every browser event.
In order to avoid that, we can do a small performance optimization, which is to declare this constant
value as an attribute instead.
So in order to receive this type attribute here at the level of our course card component, instead
of defining here a type variable, we can receive here this value at the level of the constructor using
the attribute decorator's.
So we are going to define here a member variable called type.
It's going to be of type string and we're going to annotate these with the angular attributes.
The greater the attributes, the character takes one parameter, which is going to be the name of the
attribute onto which this variable here is getting binded.
If we now print out these value to the console, we are going to see that we are receiving here in the
correct value of the type attribute if we reload our application and we expect here our console, we
are going to see that indeed the beginner type is getting printed out ten times here to the console
as expected.
Now notice that you don't have to use the attribute decorator in order to have this more simplified
input syntax here at the level of the component, the syntax without the square brackets around the
type and without having to provide you a single quotes in order to identify these with the string.
These more simplified syntax does not require the use of the attribute decorator.
So this syntax here would also work with an input property.
Let's quickly confirm this.
We are going to declare here type as an input and we are going to comment out here from the constructor
the injection of the attribute type.
We are now going to take this console, that statement, and we are going to paste it here inside the
engine on its lifecycle hook that we are going to cover in detail.
In a couple of lessons.
We are going to print out of the screen the value of the input property, and we are going to confirm
that indeed here in the console, we still have here the beginner string printed out ten times.
So as you can see, in order to be able to use these simplified syntax here without the square brackets
for providing an input, we don't have to use the attribute decorator.
The attribute decorator is really a performance optimization that will prevent Angular from continuously
checking the value of the type property.
We could call this functionality provided by the attribute decorator one time binding because this variable
here is only being bound here to the value in the template once the first time that the component gets
built and then the content of this attribute will no longer be Sheck in the future.
The defining this type of variable as an attribute makes it a bit more clear that this property here
is not intended to be changed over time.
Let's not talk about another performance optimization that you might need.
Occasionally we're going to learn how to do custom change detection.