title: Why angular2 executes methods several times?
body: <p>my application structure looks like this:</p>
  
  <p><a href="https://i.stack.imgur.com/sgdeg.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/sgdeg.jpg" alt="enter image description here"></a></p>
  
  <p><strong>ts:</strong></p>
  
  <pre><code>...
  export class TodoListComponent {
  
      get sortedTodos():ITodo[] {
              console.log(this.counter++);
              ...
          } 
      ....
  </code></pre>
  
  <p><strong>html:</strong></p>
  
  <pre><code>  &lt;div class="todo-item" *ngFor="let todo of sortedTodos" [class.completed]="todo.completed"&gt;
          &lt;todo-list-item [todo]="todo" class="todo-item" (deleted)="onTodoDeleted(todo)"
                          (toggled)="onTodoUpdated($event)"&gt;&lt;/todo-list-item&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>If I start application I see in console:</p>
  
  <pre><code>1
  2
  3
  4
  5
  6
  </code></pre>
  
  <p>I really confusing about this behaviour. for me it looks very strange and I think it can lead to bugs and performance issues. Please explain why it executes <strong>6!</strong> times when I load page at once.</p>
  
  <p>I am not sure that I provided all needed information in topic. Feel free to request womething else. Also all code base can be found <a href="https://bitbucket.org/gredwhite/angular2-demo/src" rel="nofollow noreferrer">bitbucket repo link</a></p>
  
  <p><strong>P.S.</strong></p>
  
  <p>full ts file content:</p>
  
  <pre><code>import {Component, Input, Output, EventEmitter} from "@angular/core"
  
  import {ITodo} from "../../shared/todo.model";
  import {TodoService} from "../../shared/todoService";
  
  @Component({
      moduleId: module.id,
      selector: "todo-list",
      templateUrl: "todo-list.component.html",
      styleUrls: ["todo-list.component.css"],
  })
  export class TodoListComponent {
      @Input() todos:ITodo[];
  
      @Output() updated:EventEmitter&lt;ITodo&gt; = new EventEmitter&lt;ITodo&gt;();
      @Output() deleted:EventEmitter&lt;ITodo&gt; = new EventEmitter&lt;ITodo&gt;();
  
      get sortedTodos():ITodo[] {
          return !this.todos ? [] :
              this.todos.map((todo:ITodo)=&gt;todo)
                  .sort((a:ITodo, b:ITodo)=&gt; {
                      if (a.title &gt; b.title) {
                          return 1;
                      } else if (a.title &lt; b.title) {
                          return -1;
                      }
                      return 0;
                  })
                  .sort((a:ITodo, b:ITodo)=&gt; (+a.completed - (+b.completed)));
      }
  
      onTodoDeleted(todo:ITodo):void {
          this.deleted.emit(todo);
      }
  
      onTodoUpdated(todo:ITodo):void {
          this.updated.emit(todo);
      }
  
      constructor(private todoService:TodoService) {
      }
  }
  </code></pre>