Writing Angular 1.5 components in TypeScript

I like the addition of components to Angular 1.5. Not only are they simpler  compared to directives, they also are the way forward to Angular 2.

Yesterday I was investigating with a  colleague why a specific component didn’t work. Turned out that it was a (stupid) typo in our TypeScript code.

We first thought we had a mistake in the way we constructed the component using TypeScript. So we unnecessary lost time questioning if our TypeScript implementation was causing the issue.

Therefore I add a quick code snippet  here as a reference for future usage:

	<div>
	<span>Hello world to {{vm.data}}</span>
	</div>

view raw Helloworld.html hosted with ❤ by GitHub

	module app.widgets {
	'use strict';
	export class HelloWorldComponent implements ng.IComponentOptions {
	public bindings: any;
	public controller: any;
	public controllerAs: string;
	public templateUrl: string;
	contructor() {
	this.bindings = {
	data: '<'
	};
	this.controller = HelloWorldController;
	this.controllerAs = 'vm';
	this.templateUrl = 'helloworld.html'
	}
	}
	angular
	.module('app.widgets')
	.component('helloworld', new HelloWorldComponent());
	}

view raw HelloWorldComponent.ts hosted with ❤ by GitHub

	module app.widgets {
	'use strict';
	export interface IHelloWorldController extends IHelloWorldBindings {
	}
	export class HelloWorldController implements IHelloWorldController {
	public data: string;
	constructor() {
	this.data = 'everyone';
	}
	}
	}

view raw HelloworldController.ts hosted with ❤ by GitHub

	module app.widgets {
	'use strict';
	export interface IHelloWorldBindings {
	data: string;
	}
	}

view raw IHelloWorldBindings.ts hosted with ❤ by GitHub