Runtime error on Angular 2 way databinding

2 posts, 0 answers
  1. Brian
    Brian avatar
    10 posts
    Member since:
    Feb 2012

    Posted 13 Jan Link to this post

    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)

     

     

  2. nikolay.tsonev
    Admin
    nikolay.tsonev avatar
    268 posts

    Posted 16 Jan Link to this post

    Hello,
    Thank you for reporting this issue.

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

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

    In the meantime you could change the mode manually. In this way the property always will contain the last RadCalendar mode. For you convenience I am providing code 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.
Back to Top