Sharing Top Content from the Angular-sphere.

Getting to Know the @Attribute Decorator in Angular

  • Getting to Know the @Attribute Decorator in AngularThe @Attribute decorator is one of the least known and least used, but in some cases, it can bring a performance boost to the application.The @Attribute decorator returns the value of the specified attribute from the host.Let’s say that we have a core button…
  • Because we are using an Input(), Angular will still create a binding for the type property and will check it with every change detection cycle, even though this is a static string.To illustrate this, let’s see the compiled code.As you can see, when we trigger the change detection by emitting…
  • As a general rule, I prefer the @Attribute() approach when the string is a fixed value that never changes.Note that in this case, it is possible to take it further, remove the ngClass and leverage CSS selector, but I’m sure you got the idea.Follow me on Medium or Twitter to…

The @Attribute decorator is one of the least known and least used, but in some cases, it can bring a performance boost to the application. Let’s say that we have a core button component that accepts…

Getting to Know the @Attribute Decorator in AngularThe @Attribute decorator is one of the least known and least used, but in some cases, it can bring a performance boost to the application.The @Attribute decorator returns the value of the specified attribute from the host.Let’s say that we have a core button component that accepts the type, which can be primary or secondary.And because it is a static string, we will use it in the template without the brackets.There is one drawback to this approach. Because we are using an Input(), Angular will still create a binding for the type property and will check it with every change detection cycle, even though this is a static string.To illustrate this, let’s see the compiled code.As you can see, when we trigger the change detection by emitting the click event, Angular is checking the value.We can be more efficient in this case if we use the @Attribute decorator.With this change, Angular will evaluate it once and forget about it. As a general rule, I prefer the @Attribute() approach when the string is a fixed value that never changes.Note that in this case, it is possible to take it further, remove the ngClass and leverage CSS selector, but I’m sure you got the idea.Follow me on Medium or Twitter to read more about Angular, Vue and JS!

Getting to Know the @Attribute Decorator in Angular