Wesley Van den Eede Wesley Van den Eede - 4 months ago 84
AngularJS Question

angular typescript component not displaying the template

Following this question and resolution:
AngularJS directive not displaying the template

I wanted to try the same with an angular component and typescript, but i can't seem to get it working. The component just doesn't show.

My html looks like this:

<div ng-app="SuperHero">
<super-man></super-man>
</div>


My Typescript looks like this:

module Application.Components {
export class superMan implements ng.IComponentOptions {
template: string = "<h1>Hello from component</h1>";
}
}

var appModule = angular.module("SuperHero", []);
appModule.component("superMan", () => Application.Components.superMan);


A fiddle here: http://jsfiddle.net/589301uo/2/

Answer

Component definition takes configuration object, not a function. So in your example you should use new Application.Components.superMan() instead of () => Application.Components.superMan.

Also pay attention that components were added in angular 1.5 and your fiddle uses older version.

Here's working demo.

Comments