Is the Angular 2 @Component syntax part of ES6?

Question

Can anyone tell me. The '@' symbol in front of the imported Component function. Is that ES6 syntax? I've not seen it used on any other non-angular ES6 projects I've looked at.

import {Component} from ...
@Component({})

Here is a example

Answer 1

The @ syntax is part of a new draft for es7 which is currently in stage 1 (proposal stage). They are called decorators.

Decorators make it possible to annotate and modify classes and properties at design time.

For more information see: https://github.com/wycats/javascript-decorators

---

Note: you can use decorators, using Babel by enabling the optional[]=es7.decorators (in webpack) or by setting your configuration to stage:1

Answer 2

Short answer: No.

The @ syntax defines an annotation - this was introduced by Angular's AtScript, which later merged into TypeScript. From what I can see, they are similar to annotations in .NET languages.

Annotations are not a part of standard ES6; they are simply a decoration provided by TypeScript. Of note, Angular 2 supports the use of TypeScript annotations, as does Aurelia.

I can't provide a link at the moment, but there are resources that describe the features and language components of ES6 in great detail.

Answer 3

Just for the records, you can achieve the same behavior in ES6 just by translating the TypeScript annotation into the following:

import {Component, ...} from 'angular2/core';
export class myAppOrDirective {
    static get annotations() {
        return [
            new Component({
                selector: 'my-app-or-directive'
            }),
            new View({
                template: `<div>Hello!</div>`
            })
        ];
    }
}