Integrating WinJS and Angular2

Question

I'm trying to wrap a WinJS rating control in an Angular2 component. When I debug, I can see that WinJS.UI.processAll(); is being called and executed. But I don't see the rating control.

How can I make it work?

Dashboard.cshtml:

@{
    ViewBag.Title = "Dashboard";
}

<my-app></my-app>

<script src="/jspm_packages/system.js"></script>
<script src="/config.js"></script>

<script>
    System.import('reflect-metadata')
        .then(function () {
            System.import('angular2')
                .then(function () {
                    System.import("/js/app");
                });
        });
</script>

app.js:

import { Component, View, bootstrap } from 'angular2';
import 'reflect-metadata';
import 'winjs';

@Component({
    selector: 'my-app'
})
@View({
    template: '<div data-win-control=\'WinJS.UI.Rating\' data-win-options=\'{averageRating: 3.4}\'></div>'
})
class MyAppComponent {
    constructor() {
    }

    onInit() {
        WinJS.UI.processAll();
    }
}

bootstrap(MyAppComponent);

For what I see in Adding the Windows Library for JavaScript to your page you are missing the stylesheets. Try this plnkr plnkr.co/edit/MBSuu8?p=preview — Eric Martinez
– Eric Martinez, Commented Sep 25, 2015 at 13:35
I forgot to mention, assuming you are using alpha37, you must implement OnInit and import it as well. All that is included in the plnkr. — Eric Martinez
– Eric Martinez, Commented Sep 25, 2015 at 16:34
Thank you. I added the style sheet (<link rel="stylesheet" href="cdnjs.cloudflare.com/ajax/libs/winjs/4.3.0/css/ui-light.min.css" />) to the cshtml file and it worked. If you can add your reply as the answer, I can mark it as answer. — wonderful world
– wonderful world, Commented Sep 25, 2015 at 19:23

Eric Martinez · Accepted Answer · 2015-09-25 21:40:18Z

3

As requested by @wonderfulworld

First of all, according to Adding the Windows Library for JavaScript to your page you must add the css file to your html.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/winjs/4.3.0/css/ui-light.min.css">

Second thing, from alpha37+ you must import and implement the lifecycle hook you're using, onInit in this case (see remove LifecycleEvent).

import { Component, View, bootstrap, OnInit} from 'angular2/angular2';
import 'reflect-metadata';
import 'winjs';

@Component({
    selector: 'my-app'
})
@View({
    template: '<div data-win-control=\'WinJS.UI.Rating\' data-win-options=\'{averageRating: 3.4}\'></div>'
})
class MyAppComponent implements OnInit {
    onInit() {
        WinJS.UI.processAll();
    }
}

And that would be all. Here's the plnkr.

Glad it helped ;)

answered Sep 25, 2015 at 21:40

Eric Martinez

31.9k9 gold badges95 silver badges91 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Integrating WinJS and Angular2

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related