CODEWITHSUNDEEP
angularjstypescript
Slava
Slava

Reputation: 6640

Cant make Angular 1.5 (in typescript) component work

I can't make this code work, don't see why it's not showing the button :(

Any ideas? Thanks.

https://jsfiddle.net/slishnevsky/Let38jho/10/

Angular/Typescript

let app = angular.module('app', []);

export class MyController {

    public name: string;

    constructor() {}

}

export class MyComponent implements ng.IComponentOptions {

    public bindings: any;
    public controller: any;
    public controllerAs: string;
    public template: string;

    constructor() {
        this.bindings = {
            name: '@'
        };
        this.controller = MyController;
        this.controllerAs = 'vm';
        this.template = '<button>{{vm.name}}</button>';
    }
}

app.component('MyComponent', new MyComponent());

HTML

<div ng-app='app'>

    <my-component name='Miranda'></my-component>

</div>

Upvotes: 1

Views: 303

Answers (1)

Aviad Hadad
Aviad Hadad

Reputation: 1717

working fiddle: https://jsfiddle.net/13ju990x/

two issues:

  1. Typescript transpiles the export keyword to amd or commonjs (or umd) format. Look here for a quick example. And we don't have any module loader working in jsfiddle (I assume jsfiddle simpley takes your code and puts it in a <script> tag). You can simply open developer tools and see Uncaught ReferenceError: exports is not defined in your original code.

  2. Angular uses Kebab-case. so you need to write app.component('myComponent', new MyComponent()); and not 'MyComponenet'. It's stupid, I know.

Upvotes: 1

Related Questions