Vanilla Taskpie Plugin in Angular


#1

I’m trying to adapt the TaskPie plugin, developed for Vanilla Nativescript to Angular. I’ve gotten the bar to show up with the default yellow ring, but am having difficulty calling any of the plugin’s methods properly.

I converted the xml into html and placed this inside a StackLayout.

<TaskPie id="my-taskpie" counts="4" pieSize="300" [countChanged]="taskChanged()"></TaskPie>

On my home.component.ts I registered, and imported what I believed to be the necessary classes

import { TaskPie, ITaskCategory, TaskCategory, TaskCategoryType } from “nativescript-taskpie”;
import Observable = require(‘data/observable’);

registerElement(“TaskPie”, () => require(“nativescript-taskpie”).TaskPie);

And finally my constructor looks like this

constructor(private page: Page, private database: Database, private router: Router) {

var pie = <TaskPie>page.getViewById('my-taskpie');

pie.edit(() => {
    pie.clearCategories();
    
    pie.addCategory('Pending', 'ffc90e', TaskCategoryType.NotStarted)
       .addCategory('Late!', 'd54130', TaskCategoryType.NotStarted)
       .addCategory('On work', '4cabe1', TaskCategoryType.InProgress)
       .addCategory('Complete', '88be39', TaskCategoryType.Completed);
});

}

The error I’m getting is “Cannot read property ‘edit’ of undefined” Which leads me to believe that my use of the getViewById is not proper ng syntax.
I initially tried using @ViewChild(“my-taskpie”) pie: ElementRef; by wasn’t able to reference it inside of the constructor. Also in the plugin documentation, there is code that should be placed inside the viewModel, but I thought that was done away with NS ng.

Any suggestings?
Thanks!


#2

See the sample here getting a view component in angular, this is for the checkbox plugin. You’re close it looks like.


import { CheckBox } from 'nativescript-checkbox';
import { registerElement } from "nativescript-angular/element-registry";
registerElement("CheckBox", () => require("nativescript-checkbox").CheckBox);

export class SomeComponent  {
    @ViewChild("CB1") FirstCheckBox: ElementRef;
    constructor() {}
    public toggleCheck() {
        this.FirstCheckBox.nativeElement.toggle();
    }

    public getCheckProp() {
        console.log('checked prop value = ' + this.FirstCheckBox.nativeElement.checked);
    }
}
<StackLayout>
    <CheckBox #CB1 text="CheckBox Label" checked="false"></CheckBox>
    <Button (tap)="toggleCheck()" text="Toggle it!"></Button>
    <Button (tap)="getCheckProp()" text="Check Property"></
</StackLayout>

As for the viewModel going away with angular, not sure I follow. A view model isn’t specific to nativescript or angular. Might just be some confusion :smile:hopefully the snippet above helps with the taskpie view component.