[Angular] Getting to Know the @Attribute Decorator in Angular

So when you using input binding in Angular, it will always check for update.

If you want to improve youre preformence a little bit, you can use @Attribute decorator comes with Angular latest v6.

From code:

export type ButtonType = 'primary' | 'secondary';

@Component({
  selector: 'app-button',
  template: `
    <button [ngClass]="type">
      <ng-content></ng-content>
    </button>
  `
})
export class ButtonComponent {
  @Input() type: ButtonType = 'primary';
}


// use
<app-button type="secondary" (click)="click()">Click</app-button>

 

To code:

import { Component, Attribute } from '@angular/core';

export type ButtonType = 'primary' | 'secondary';

@Component({
  selector: 'app-button',
  template: `
    <button [ngClass]="type">
      <ng-content></ng-content>
    </button>
  `
})
export class ButtonComponent {

  constructor(@Attribute('type') public type: ButtonType = 'primary') { }

}

With this change, Angular will evaluate it once and forget about it. 

 

More information to follow: 

Blog post

https://github.com/angular/angular.io/issues/1150