Component function gets executed twice in angular 2

[guy.wit...@gmail.com]

I have a component as follows:

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

    @Component({
        selector: 'app',
        template: `
<div>
    <div>value of a :
        <input [(ngModel)]="a" />
    </div>
    <div>value of b :
        <input [(ngModel)]="b" />
    </div>
    <div>
        Value of a = {{a}}
        <br> Value of b = {{b}}
        <br> Sum instantaneous {{calc(a+b)}}
    </div>
</div>
`   
    })
    export class AppComponent implements OnInit {

        a: string = "";
        b: string = "";
        constructor() { }

        ngOnInit() {
        }

        calc() {
            console.log('test');
            return (+this.a + +this.b);
        }
    }

Every time, I modify (say, key press) anything in textboxes or even just focusing/defocusing textboxes, the 'calc' function gets executed twice.

What am I missing here or how can I get the function execute once (instead of twice).

[Sander Elias]

Hi GuyWithDoubts,

Try production mode. In dev mode the CD is ran twice to detect certain kinds of errors. This doesn't happen in production mode,

Regards

Sander