[Angular] Angular Attribute Decorator – When to use it?

When we pass value to a component, normally we use @Input.

<my-comp [courses]="(courses$ | async) as courses" ></my-comp>@Component({...})
export class MyComp implements OnInit {
    @Input() courses;
    ...
}

Angular will check whether any update on @Input on each event fires in order to keep DOM update.  Which means if we have too many unncessary @Input, can cause profermance overhead.

By ‘unncessary’ I mean, the value won’t change overtime.

For example:

<my-comp type="beginner" [courses]="(courses$ | async) as courses" ></my-comp>

In this case, we can use @Attribute decorator:

@Component({...})
export class MyComp implements OnInit {
    @Input() courses;
    ...    constructor (@Attribute('type') private type) {}
}

It is similar to AngularJS one time binding.