1

It's a simple Angular4 application. I am calling a method using interpolation. It's getting executed 4 times.

app.component.ts

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 1;



 testing(){
     console.log('IN testing 0');

 }

 private testing1(){
    console.log('IN testing 1');
 }
}

app.component.html

<h2>{{testing1()}}</h2>
<button (click)="testing()">Testing2 </button>

When the page is loaded it prints "IN testing 1" 4 times. When I click the button it prints "IN testing 1" twice. I am not able to understand the flow.

NTP
  • 4,338
  • 3
  • 16
  • 24
Kittu
  • 198
  • 8
  • here's a [thread](https://stackoverflow.com/questions/24698620/dirty-checking-on-angular) to help you understand the digest cycle. – alphapilgrim Dec 29 '17 at 17:14

1 Answers1

0

when you call function like this <h2>{{testing1()}}</h2> in each change detection testing1() function will get triggered. that is why its printing console multiple time. This is a bad habit. instead of using a function use a variable

Sachila Ranawaka
  • 39,756
  • 7
  • 56
  • 80