robophil / nativescript-numberpicker

A nativescript plugin for number picker
MIT License
6 stars 1 forks source link

Angular 2 #1

Closed gouvermxt closed 7 years ago

gouvermxt commented 7 years ago

Is it possible to use this plugin on Nativescript Angular 2 projects, since we don´t have the Page directive to declare the namespace in the view?

robophil commented 7 years ago

Yes you can @gouvermxt . I haven't tested this out, but this should work fine. Let me know if it does so i can update the README.MD file.

import {registerElement} from "nativescript-angular/element-registry";
import {NumberPicker} from "nativescript-numberpicker";

registerElement("NumberPicker", () => require("nativescript-numberpicker").NumberPicker);

@Component({
    selector: 'numberpicker-example',
    template: `
      <StackLayout style.backgroundColor="green" id="Mycontainer">
        <Label text="Find numberpicker below" class="message" textWrap="true"/>
        <NumberPicker value="3" minValue="2" maxValue="6" id="np"></NumberPicker>
        <Label text="Find numberpicker below" class="message" textWrap="true"/>
    </StackLayout>
    `
})
export class NumberPickerExample {

    @ViewChild("NumberPicker") NumberPicker: ElementRef;

    getNumber(){
     //how to retrive value set from view
    let np = <NumberPicker>this.NumberPicker.nativeElement;
    let value = np.value; //retrive value from view
   }
}
gouvermxt commented 7 years ago

Yeah, the element registry worked well.

The only change i have to made is on element retrieving. I had to set an ID to the NumberPicker element and get it referenced by that ID in the component. So in the view i have:

<NumberPicker #itemQuantity id="item-quantity" [value]="value" minValue="1" maxValue="100"></NumberPicker>

And in the component:

@ViewChild("itemQuantity") itemQuantity: ElementRef;

Thanks.

robophil commented 7 years ago

No problem. I'll update the README.MD file soonest.