What is meaning by @ symbol in typescript –Angular 2

The @ symbol you are referring to is called decorator.

Decorators provide a way to add both annotations and a meta-programming syntax for class declarations and members.

Basically when you are doing @component you are telling compiler that the class is a angular2 component with the metadata passed as an argument.

for eg.

@Component({
  moduleId: module.id,
  selector: 'heroes-app',
  templateUrl: 'heroes.component.html',
  styleUrls: ['heroes.component.css'],  
})
class HeroesComponent{}

this code will tell compiler that class HeroesComponent is supposed to be an angular2 component with metadata passed as arguments and it will create a component class.

Decorator isn’t a magic. It’s just function-calling.

for eg.

@Component({
selector: 'static-component',
template: `<p>Static Component</p>`
})
class StaticComponent {}

is equivalent to:

class DynamicComponent {
}

const dynamicComponent = Component({
    selector: 'dynamic-component',
    template: `<p>Dynamic Component</p>`
})(DynamicComponent);

Hope this helps.