What is best practice to create an AngularJS 1.5 component in Typescript?

Question

I am experimenting with the .component() syntax in Angular 1.5.

It seems that the latest fashion is to code the controller in-line in the component rather t

Answer 1

I'd suggest not to use custom made solutions, but to use the ng-metadata library instead. You can find it at https://github.com/ngParty/ng-metadata. Like this your code is the most compatible with Angular 2 possible. And as stated in the readme it's

No hacks. No overrides. Production ready.

I just switched after using a custom made solution from the answers here, but it's easier if you use this library right away. Otherwise you’ll have to migrate all the small syntax changes. One example would be that the other solutions here use the syntax

@Component('moduleName', 'selectorName', {...})

while Angular 2 uses

@Component({
  selector: ...,
  ...
})

So if you're not using ng-metadata right away, you'll considerably increase the effort of migrating your codebase later on.

A full example for the best practice to write a component would be the following:

// hero.component.ts
import { Component, Inject, Input, Output, EventEmitter } from 'ng-metadata/core';

@Component({
  selector: 'hero',
  moduleId: module.id,
  templateUrl: './hero.html'
})
export class HeroComponent {

  @Input() name: string;
  @Output() onCall = new EventEmitter();

  constructor(@Inject('$log') private $log: ng.ILogService){}

}

(copied from ng-metadata recipies)