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: