Angular 2 - understanding bidings and pipes -

i'm trying understand how angular 2 works. i'm reading pipes documentation: https://angular.io/docs/ts/latest/guide/pipes.html , there following example:

import {component} 'angular2/core'  @component({   selector: 'hero-birthday',   template: `     <p>the hero's birthday {{ birthday | date:format }}</p>     <button (click)="toggleformat()">toggle format</button>   ` }) export class herobirthday {   birthday = new date(1988,3,15); // april 15, 1988    toggle = true; // start true == shortdate    format() { return this.toggle ? 'shortdate' : 'fulldate'}    toggleformat() { this.toggle = !this.toggle; } } 

what puzzles me why birthday updated when user clicks on button? so... when click button , toggleformat() function called, changes this.toggle variable. there "something" checks if this.toggle changed , therefore format changed updates birthday ?

can explain how working?

thanks

as eric mentioned in comment, savkin's blog post reveals every component gets associated change detector checks of bindings in component when "change detection" runs. stateless pipe, bindings input data (birthday) , parameters (format).

angular uses zone.js monkey patch / intercept every browser async event. after every browser event angular calls change detection algorithm.

so, click button, toggleformat() runs, change detection runs. since result of format() different every time, "change", hence pipe executed/re-evaluated every time. dom updated angular. @ point change detection done. browser detects/notices dom change , updates see on screen.