triniwiz / nativescript-star-ratings

NativeScript star ratings UI component plugin.
Apache License 2.0
22 stars 8 forks source link

StarRatings: Support for Angular 5? #8

Open relez opened 6 years ago

relez commented 6 years ago

Hi guys thanks for this very useful plugin, I am trying to use it in my project but seems like its not customized for Angular 5?

Thanks!

isaacfi commented 6 years ago

Hi @relez ,

This is an example using angular 6:

main.ts

// this import should be first in order to load some required settings (like globals and reflect-metadata)
import { platformNativeScriptDynamic } from 'nativescript-angular/platform';
import { registerElement } from 'nativescript-angular';

import { AppModule } from './app.module';

registerElement('StarRating', () => require('nativescript-star-ratings').StarRating);

platformNativeScriptDynamic().bootstrapModule(AppModule);

main.aot.ts

import { platformNativeScript } from 'nativescript-angular/platform-static';
import { AppModuleNgFactory } from './modules/app.module.ngfactory';
import { registerElement } from 'nativescript-angular';
import { enableProdMode } from '@angular/core';
enableProdMode();

registerElement('StarRating', () => require('nativescript-star-ratings').StarRating);

platformNativeScript().bootstrapModuleFactory(AppModuleNgFactory);

score.component.html

<StackLayout class="m-5 m-t-10 container-rounded">
    <StarRating filledBorderColor="gold" filledColor="gold" style="width:240" class="m-x-auto" (valueChange)="setScore($event)" max="5" [value]="score">
    </StarRating>
</StackLayout>

score.component.ts

import { Component, OnInit } from '@angular/core';

@Component({
    moduleId: module.id,
    selector: 'score',
    templateUrl: 'score.component.html',
    styleUrls: []
})
export class ScoreComponent implements OnInit {
    score = 0;
    constructor() { }

    ngOnInit() { }

    setScore(args: any) {
        this.score = Number(args.object.get('value'));
    }
}

Cheers.