This is a migrated thread and some comments may be shown as answers.

Runtime error on Angular 2 way databinding

1 Answer 91 Views
Calendar
This is a migrated thread and some comments may be shown as answers.
This question is locked. New answers and comments are not allowed.
Brian
Top achievements
Rank 1
Brian asked on 13 Jan 2017, 03:35 PM
I'm trying to do Angular 2, 2-way databinding with the calendar's viewMode (see template).  in my component I have global variable that it binds to (see component).  When I run the project I get a runtime error (below).  What am I doing wrong?  Does RadCalendar not support Angular 2 way databinding on it's inputs?  I'm using the latest version of all components.

 

Template:--------------

<RadCalendar id="calendar" row="1" col="0"
        [eventSource]="eventSource" 
        [(viewMode)]="calViewMode">
    </RadCalendar>

Component:----------------

@Component({
    moduleId: module.id,
    selector: 'calendar'
})
export class CalendarComponent implements OnInit {
    calViewMode: any;

}

Error: ------------------------

ORIGINAL STACKTRACE: (c:\Users\brianp\Documents\SRC\2017\tns\cpapp\node_modules\@angular\core\bundles\core.umd.js:3496:31)
Error: Expression has changed after it was checked. Previous value: 'undefined'. Current value: '[object Object]'.
    at ExpressionChangedAfterItHasBeenCheckedError.BaseError [as constructor] (/data/data/com.ekyros.cpapp/files/app/tns_modules/@angular/core/bundles/core.umd.js:1225:31)
    at new ExpressionChangedAfterItHasBeenCheckedError (/data/data/com.ekyros.cpapp/files/app/tns_modules/@angular/core/bundles/core.umd.js:6549:20)
    at checkBinding (/data/data/com.ekyros.cpapp/files/app/tns_modules/@angular/core/bundles/core.umd.js:6724:23)
    at DebugAppView.View_CalendarComponent0.detectChangesInternal (/AppModule/CalendarComponent/component.ngfactory.js:142:7)
    at DebugAppView.AppView.detectChanges (/data/data/com.ekyros.cpapp/files/app/tns_modules/@angular/core/bundles/core.umd.js:12587:18)
    at DebugAppView.detectChanges (/data/data/com.ekyros.cpapp/files/app/tns_modules/@angular/core/bundles/core.umd.js:12734:48)
    at DebugAppView.AppView.internalDetectChanges (/data/data/com.ekyros.cpapp/files/app/tns_modules/@angular/core/bundles/core.umd.js:12572:22)
    at DebugAppView.View_CalendarComponent_Host0.detectChangesInternal (/AppModule/CalendarComponent/host.ngfactory.js:38:19)
    at DebugAppView.AppView.detectChanges (/data/data/com.ekyros.cpapp/files/app/tns_modules/@angular/core/bundles/core.umd.js:12587:18)
    at DebugAppView.detectChanges (/data/data/com.ekyros.cpapp/files/app/tns_modules/@angular/core/bundles/core.umd.js:12734:48) (c:\Users\brianp\Documents\SRC\2017\tns\cpapp\node_modules\@angular\core\bundles\core.umd.js:3497:31)
ERROR CONTEXT: (c:\Users\brianp\Documents\SRC\2017\tns\cpapp\node_modules\@angular\core\bundles\core.umd.js:3500:31)
[object Object] (c:\Users\brianp\Documents\SRC\2017\tns\cpapp\node_modules\@angular\core\bundles\core.umd.js:3501:31)
Error: Error in /data/data/com.ekyros.cpapp/files/app/pages/calendar/calendar.component.html:12:8 caused by: Expression has changed after it was checked. Previous value: 'undefined'. Current value: '[object Object]'. (c:\Users\brianp\Documents\SRC\2017\tns\cpapp\node_modules\nativescript-angular\zone-js\dist\zone-nativescript.js:344:17)

 

 

1 Answer, 1 is accepted

Sort by
0
Nikolay Tsonev
Telerik team
answered on 16 Jan 2017, 11:22 AM
Hello,
Thank you for reporting this issue.

I reviewed your case and found that this property not support two-way binding. To be able to use this type of binding the component should have instead of viewMode property also event, this event has been not added for this property.

For your I have logged new issue, where describe this case and suggested adding this event the component. You could keep track on the issue, for further info.

In the you could change the mode manually. In this the property always will contain the last RadCalendar mode. For you I am providing example. 

app.component.html
<StackLayout>
    <Button text="week mode" (tap)="onTap()"></Button>
     
    <RadCalendar id="calendar" inlineEventCellStyle.eventTextColor="green" (loaded)="calendarloaded($event)"  [viewMode]="viewModecaledar" [eventSource]="eventSource" eventsViewMode="Inline">
        
    </RadCalendar>
 
 
</StackLayout>


app.component.ts

import { Component } from "@angular/core";
import {CalendarEvent, RadCalendar, CalendarViewMode} from 'nativescript-telerik-ui-pro/calendar'
import { Color } from "color";
 
 
@Component({
    selector: "my-app",
    templateUrl: "app.component.html",
})
export class AppComponent {
    public eventSource:Array<CalendarEvent>;
    public viewModecaledar=CalendarViewMode.Year;
    constructor(){
        this.eventSource=[];
         let now = new Date();
        let startDate: Date,
            endDate: Date,
            event: CalendarEvent;
        let colors: Array<Color> = [new Color(200, 188, 26, 214), new Color(220, 255, 109, 130), new Color(255, 55, 45, 255), new Color(199, 17, 227, 10), new Color(255, 255, 54, 3)];
        let events: Array<CalendarEvent> = new Array<CalendarEvent>();
        for (let i = 1; i < 100; i++) {
            startDate = new Date(now.getFullYear(), now.getMonth(), i * 2, 1);
            endDate = new Date(now.getFullYear(), now.getMonth(), (i * 2), 3);
            event = new CalendarEvent("event " + i, startDate, endDate, false, colors[i * 10 % (colors.length - 1)]);
            events.push(event);
            if (i % 3 == 0) {
                event = new CalendarEvent("second " + i, startDate, endDate, true, colors[i * 5 % (colors.length - 1)]);
                this.eventSource.push(event);
            }
        }
    }
 
    public calendarloaded(args){
       var calendar:RadCalendar=<RadCalendar> args.object;
 
    }
 
    onTap(){
        this.viewModecaledar=CalendarViewMode.Week;
    }
}


Hope this helps.

Regards,
nikolay.tsonev
Telerik by Progress
Did you know that you can open private support tickets which are reviewed and answered within 24h by the same team who built the components? This is available in our UI for NativeScript Pro + Support offering.
Tags
Calendar
Asked by
Brian
Top achievements
Rank 1
Answers by
Nikolay Tsonev
Telerik team
Share this question
or