What is the main difference between the decorators @Input() and @Attribute() in Angular2?

Question

I have seen @Attribute() being used in Directives usually as a parameter in the constructor like this:

export class EqualValidator implements Validator {
    constructor( @Attribute(‘validateEqual’) public validateEqual: string) {}
    validate(c: AbstractControl): { [key: string]: any } {}
}

and @Input() used in Components like this:

export class UserProfile {
    @Input() user;
    constructor() {}
}

And then you can pass data into these variables in the template with property binding in the case of @Input().

What are the main differences between these decorators and when should you use them?

Answer 1

@Input(): Used to pass values into the directive or to pass data from one component to another (typically parent to child).

@Attribute(): You are able to retrieve the constant value of an attribute available in the host element of component/directive and it has to be used with a parameter of a component’s or Directive’s constructor

Hope this help!