Is Angular 2 @Component syntax part of ES6?

Question

Can anyone tell me. The '@' symbol before the imported Component function. Is this ES6 syntax? I did not see it used in any other non-angular ES6 projects that I was looking at.

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

Here is an example

Answer 1

Short answer: None.

The @ syntax defines an annotation - this was introduced by Angular AtScript , which later merged with TypeScript . From what I see, they look like annotations in .NET languages.

Annotations are not part of standard ES6; it's just a decoration provided by TypeScript. It should be noted that Angular 2 supports the use of TypeScript annotations, as does Aurelia.

I cannot provide a link at the moment, but there are resources that describe ES6 components and language components in detail.

Answer 2

The @ syntax is part of a new project for es7, which is currently at stage 1 (application phase). They are called decorators.

Decorators allow you to comment and change classes and properties during development.

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

---

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

Answer 3

For records only, you can achieve the same behavior in ES6 by simply 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>` }) ]; } }