{"id":25943,"date":"2020-11-11T00:00:00","date_gmt":"2020-11-10T23:00:00","guid":{"rendered":"https:\/\/blexin.com\/?p=25943"},"modified":"2021-01-13T09:39:57","modified_gmt":"2021-01-13T08:39:57","slug":"la-change-detection-in-angular","status":"publish","type":"post","link":"https:\/\/blexin.com\/it\/blog\/la-change-detection-in-angular\/","title":{"rendered":"La change detection in Angular"},"content":{"rendered":"\n
\"\"<\/figure>\n\n\n\n

Quando parliamo di soluzioni web, la change detection \u00e8 un elemento fondamentale del framework che stiamo utilizzando perch\u00e9 \u00e8 responsabile degli aggiornamenti nel DOM.<\/p>\n\n\n\n

Non dimentichiamo, poi, che influisce in maniera significativa sulle performance dell\u2019applicazione stessa.<\/p>\n\n\n\n

La change detection ha due momenti principali: il tracciamento delle modifiche e il rendering.<\/p>\n\n\n\n

Partiamo dal rendering che \u00e8 quel processo che prende lo stato interno del programma (ossia oggetti e array Javascript) e lo proietta in qualcosa che vediamo sullo schermo (immagini, bottoni e altri elementi visuali).<\/p>\n\n\n\n

In principio, l\u2019implementazione della logica di rendering non sembra difficile, ma si complica quando consideriamo la variabile temporale. Lo stato dell\u2019applicazione pu\u00f2 cambiare in qualsiasi momento per effetto dell\u2019interazione dell\u2019utente o per l\u2019arrivo dei dati da una chiamata HTTP.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Fonte<\/a><\/em><\/p>\n\n\n\n

C\u2019\u00e8 un esempio molto interessante a questo indirizzo<\/a> scritto in puro Javascript per un widget di rating.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

A parte il codice di inizializzazione, possiamo scrivere una classe (chiamiamola RatingComponent) contenente una propriet\u00e0 rating il cui valore muta in base alla selezione. Tale mutamento deve produrre anche un aggiornamento del DOM. Il setter della propriet\u00e0 rating \u00e8 il momento giusto per triggerare da codice il cambio delle classi css coinvolte.<\/p>\n\n\n

\nexport class RatingsComponent {\n    ...\n    set rating(v) {\n        this._rating = v;\n \n        \/\/ triggers DOM update\n        this.updateRatings();\n    }\n \n    get rating() {\n        return this._rating;\n    }\n \n    updateRatings() {\n        \/\/ Update DOM code\n    }\n}\n<\/pre><\/div>\n\n\n
Questo codice non scala all\u2019aumentare della complessit\u00e0 della pagina e della logica condizionale da usare nei suoi elementi. La nostra attenzione deve concentrarsi sulla logica applicativa e non sull\u2019aggiornamento dello schermo.<\/p>\n\n\n\n
Questo \u00e8 il motivo per cui usiamo un framework come Angular o librerie come React. Un framework pu\u00f2 occuparsi del tracciamento delle modifiche e del rendering al posto nostro e lo pu\u00f2 fare in maniera molto efficiente.<\/p>\n\n\n\n
Come viene implementata in Angular la change detection?<\/p>\n\n\n\n
Quando il compilatore analizza il template, identifica le propriet\u00e0 del componente che sono associate con gli elementi del DOM. Per ciascuna di queste associazioni, il compilatore crea un binding. Un binding definisce una corrispondenza 1:1 tra la propriet\u00e0 coinvolta e una propriet\u00e0 di un elemento del DOM.<\/p>\n\n\n\n
Una volta che i binding vengono creati, Angular smette di lavorare col template. Il meccanismo di change detection esegue istruzioni che processano ogni binding.<\/p>\n\n\n\n
Queste istruzioni controllano se il valore di un\u2019espressione con una propriet\u00e0 di un componente \u00e8 cambiata e se necessario aggiornano il DOM.<\/p>\n\n\n\n
Prendiamo come esempio una possibile implementazione del componente rating visto in precedenza.<\/p>\n\n\n
\n<ul class="rating" (click)="handleClick($event)">\n    <li [className]="'star ' + (rating > 0 ? 'solid' : 'outline')"><\/li>\n    <li [className]="'star ' + (rating > 1 ? 'solid' : 'outline')"><\/li>\n    <li [className]="'star ' + (rating > 2 ? 'solid' : 'outline')"><\/li>\n    <li [className]="'star ' + (rating > 3 ? 'solid' : 'outline')"><\/li>\n    <li [className]="'star ' + (rating > 4 ? 'solid' : 'outline')"><\/li>\n<\/ul>\n<\/pre><\/div>\n\n\n
In questo caso, la propriet\u00e0 rating nel template \u00e8 collegata alla propriet\u00e0 className mediante l\u2019espressione:<\/p>\n\n\n
\n[className]="'star ' + ((ctx.rating > 0) ? 'solid' : 'outline')"\n<\/pre><\/div>\n\n\n
Il binding che viene creato inizialmente sar\u00e0 un oggetto con un valore corrente (supponiamo che sia \u2018outline\u2019) e una propriet\u00e0 chiamata dirty settata a false.<\/p>\n\n\n\n
Quando il rating viene aggiornato, il binding sar\u00e0 marcato come dirty uguale a true e il valore impostato a \u2018solid\u2019. Una istruzione successiva controlla se il binding \u00e8 dirty e in tal caso usa il nuovo valore per aggiornare il DOM (ossia la className).<\/p>\n\n\n\n
Ci sono due modi per innescare la change detection. Il primo \u00e8 invocarla manualmente dal nostro codice. Il secondo \u00e8 affidarsi completamente al framework e farla gestire in maniera automatica.<\/p>\n\n\n\n
Nel primo caso, possiamo iniettare il servizio ChangeDetectorRef (documentato qui<\/a>) in un componente e in corrispondenza di un evento invocare il suo metodo detectChanges.<\/p>\n\n\n\n
Nel secondo caso, non aggiungiamo nulla al nostro codice. La domanda da porsi \u00e8 quindi: come fa il framework a sapere di dover eseguire la change detection?<\/p>\n\n\n\n
\u00c8 semplice intercettare un evento e schedulare una change detection dopo che il codice applicativo \u00e8 stato eseguito. Il problema sono ancora una volta gli eventi asincroni come setTimeout, Promise o XHR che non sono gestiti da Angular.<\/p>\n\n\n\n
Per risolvere il problema, il framework usa una libreria esterna chiamata zone.js che crea un wrapper attorno a tutti gli eventi asincroni nel browser. Zone.js pu\u00f2 quindi notificare Angular quando un particolare evento avviene.<\/p>\n\n\n\n
Per usare Zone, occorre importare il package zone.js. Se abbiamo usato la command line interface ci\u00f2 avviene alla creazione di un progetto. Inoltre vedremo la riga seguente nel file src\/polyfills.ts<\/code><\/p>\n\n\n
\n\/***************************************************************************************************\n\u00a0* Zone JS is required by default for Angular itself.\n\u00a0*\/\n\u00a0\u00a0\u00a0\u00a0import 'zone.js\/dist\/zone';\u00a0 \/\/ Included with Angular CLI.\n<\/pre><\/div>\n\n\n
\u00c8 importante sottolineare che le zone non fanno parte del meccanismo di change detection in Angular. Infatti, Angular pu\u00f2 lavorare anche senza di esse come potete leggere qui<\/a>.<\/p>\n\n\n\n
Basta modificare il file main.ts che esegue il bootstrap della nostra applicazione.<\/p>\n\n\n
\nplatformBrowserDynamic()\n    .bootstrapModule(AppModule, {\n        ngZone: 'noop'\n    });\n<\/pre><\/div>\n\n\n
Le zone sono un contesto di esecuzione per operazioni asincrone. Sono molto utili per gestire gli errori e fare profiling. Cosa vuol dire in pratica?<\/p>\n\n\n\n
Per capire la parte della definizione relativa al contesto di esecuzione, cerchiamo di isolare il problema che le zone stanno cercando di risolvere.<\/p>\n\n\n\n
Consideriamo 3 funzioni che vengono eseguite in sequenza:<\/p>\n\n\n
\nfunctionA();\nfunctionB();\nfunctionC();\n\u00a0\nfunction functionA() {...}\nfunction functionB() {...}\nfunction functionC() {...}\n<\/pre><\/div>\n\n\n
Supponiamo di voler misurare il tempo di esecuzione di questo codice.<\/p>\n\n\n
\n<script>\nconst t0 = performance.now();\nfunctionA();\nfunctionB();\nfunctionC();\nconst t1 = performance.now();\nconsole.log(Math.floor((t1-t0)*100) \/ 100 + ' ms');\n  \nfunction functionA() { console.log('function A');}\nfunction functionB() { console.log('function B');}\nfunction functionC() { console.log('function C');}\n<\/script>\n<\/pre><\/div>\n\n\n
\"\"<\/figure>\n\n\n\n
Spesso per\u00f2 abbiamo a che fare con l\u2019esecuzione di codice asincrono.<\/p>\n\n\n\n
Le operazioni asincrone non vengono considerate dal nostro profiler. Ad esempio:<\/p>\n\n\n
\n<script>\nconst t0 = performance.now();\nfunctionA();\nfunctionB();\nfunctionC();\nconst t1 = performance.now();\nconsole.log(Math.floor((t1-t0)*100) \/ 100 + ' ms');\n  \nfunction functionA() { setTimeout(doSomething, 0);}\nfunction functionB() { setTimeout(doSomething, 0);}\nfunction functionC() { setTimeout(doSomething, 0);}\nfunction doSomething() {\n   console.log('Async task');\n}\n<\/script>\n<\/pre><\/div>\n\n\n
produce come risultato:<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
Cosa \u00e8 successo nel nostro codice? Il linguaggio Javascript \u00e8 single-threaded. Il comportamento asincrono non \u00e8 parte del linguaggio stesso, piuttosto \u00e8 stato aggiunto ad esso nel browser. Le funzionalit\u00e0 asincrone sono accessibili mediante le cosiddette API del browser.<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
Fonte<\/a><\/em><\/p>\n\n\n\n
In questa immagine, l\u2019Heap \u00e8 una regione di memoria per lo pi\u00f9 non strutturata dove vengono allocati gli oggetti.<\/p>\n\n\n\n
Lo Stack \u00e8 il single thread fornito per l\u2019esecuzione di codice Javascript. Le chiamate alle funzioni formano uno stack di frame. Cos\u2019\u00e8 un frame? Torniamo al nostro esempio nel caso sincrono e modifichiamolo leggermente<\/p>\n\n\n
\nfunction functionA(x) {\n   let y = 3;\n   return functionB(x * y);\n}\n  \nfunction functionB(b) {\n   let a = 10;\n   return a + b + 11;\n}\nconsole.log(functionA(5));\n<\/pre><\/div>\n\n\n
Quando invochiamo functionA, viene creato un frame contenente l\u2019argomento passato e le variabili locali. Quando functionA invoca functionB, viene creato un secondo frame e messo in cima al primo. Anch\u2019esso conterr\u00e0 l\u2019argomento passato e le variabili locali. Quando functionB ritorna un valore, il suo frame viene rimosso dallo stack (lasciando solo il frame della functionA). Quando functionA restituisce un valore, lo stack viene svuotato.<\/p>\n\n\n\n
Resta da capire cos\u2019\u00e8 quella Queue nell\u2019immagine. Consideriamo il seguente esempio che introduce una chiamata setTimeout.<\/p>\n\n\n
\nfunction main() {\n   console.log('A');\n   setTimeout( function exec() {\n       console.log('B');\n   }, 0);\n}\n  \nmain();\n\/\/ Output\n\/\/ A\n\/\/ C\n\/\/ B\n<\/pre><\/div>\n\n\n
setTimeout() ha un tempo di attesa di 0 ms e una funzione di callback chiamata exec(). setTimeout() viene pushata nello stack e parte la sua esecuzione. Ma setTimeout fa parte delle API del browser. Quindi la responsabilit\u00e0 di avviare la funzione exec() \u00e8 delegata alle API del browser. Nel frattempo setTimeout() viene tolto dallo stack.<\/p>\n\n\n\n
Dopo i 0 ms di attesa, le API del browser non possono pushare la funzione exec direttamente nello stack. Ci\u00f2 che possono fare \u00e8 mettere la funzione exec() in una coda di funzioni in attesa (Message Queue).<\/p>\n\n\n\n
Solo quando lo stack \u00e8 vuoto (privo di frame), il primo elemento in coda nella Message Queue pu\u00f2 essere pushato nello stack.<\/p>\n\n\n\n
Poich\u00e9 nello stack nel frattempo \u00e8 stato pushato console.log(\u2018C\u2019), questa stampa preceder\u00e0 quella prodotta da exec()<\/p>\n\n\n\n
Lo 0 che c\u2019\u00e8 in setTimeout() provoca spesso confusione. Non \u00e8 mai 0 ma piuttosto il tempo minimo di attesa dopo il quale verr\u00e0 eseguita la funzione di callback.<\/p>\n\n\n\n
Se inseriamo un\u2019istruzione bloccante, lo svuotamento della coda verr\u00e0 ulteriormente ritardato.<\/p>\n\n\n\n
Vi consiglio di dare uno sguardo a questa pagina web<\/a> contenente una fantastica rappresentazione visuale di quello che abbiamo appena spiegato. \u00c8 possibile anche modificare il codice.<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
Torniamo al nostro problema del profiling in presenza di codice asincrono. Avremmo bisogno di quelli che in gergo si chiamano hooks (ganci) che ci consentano di eseguire il codice di profiling ogni qual volta scatta un’operazione asincrona.<\/p>\n\n\n\n
Ecco dove entrano in azione le zone. Le zone possono eseguire un\u2019operazione (ad esempio avviare o fermare un timer o salvare uno stack trace) ogni qual volta quel codice entra o esca da una zona. Possono addirittura fare l\u2019override di metodi nel nostro codice o anche associare dati a singole zone.<\/p>\n\n\n\n
Tornando ad Angular, quando viene eseguito il bootstrap di un\u2019applicazione viene creata una zona chiamata Ngzone. Questa \u00e8 la zona in cui l\u2019applicazione gira e il framework viene notificato solo da eventi avvenuti in questa zona.<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
Esiste anche un servizio NgZone che pu\u00f2 essere iniettato nella nostra applicazione che consente di forkare (consentitemi il termine) la zona principale di Angular se vogliamo eseguire codice al suo esterno.<\/p>\n\n\n\n
Pi\u00f9 in generale, il servizio NgZone mette a disposizione molti Observable e metodi per stabilire lo stato della zona di Angular e per eseguire codice in modalit\u00e0 differenti all\u2019interno ed esterno della zona di Angular.<\/p>\n\n\n\n
Possiamo vedere un semplice esempio<\/a> dove diventa necessario usare questo servizio.<\/p>\n\n\n\n
Prendiamo il codice seguente con il suo template:<\/p>\n\n\n
\nexport class AppComponent {\n get time() {\n   return Date.now();\n }\n}\n \n<h3>\n     Change detection is triggered at:\n     <span [textContent]="time | date:'hh:mm:ss:SSS'"><\/span>\n<\/h3>\n<button (click)="0">Trigger Change Detection<\/button>\n<\/pre><\/div>\n\n\n
Sorprendentemente, questo codice genera un errore in console<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
Si tratta di un errore che \u00e8 capitato a chiunque abbia mai lavorato con Angular come potete leggere nella pagina<\/a> delle issue della repository su github. Nonostante il nome lungo spieghi esattamente cosa sia successo la prima reazione \u00e8 sicuramente una ricerca disperata su StackOverflow.<\/p>\n\n\n\n
Quando Angular crea i nodi del DOM per renderizzare il template di un componente sullo schermo, occorre conservare da qualche parte le referenze a questi nodi. A tale scopo, c\u2019\u00e8 una struttura dati chiamata View che conserva la referenza all\u2019istanza del componente e i precedenti valori delle binding expression.<\/p>\n\n\n\n
Abbiamo detto che la change detection avviene su ciascun componente. Ora che sappiamo che un componente \u00e8 internamente rappresentato come una view, possiamo dire che la change detection viene eseguita su ciascuna view.<\/p>\n\n\n\n
Quando una view viene controllata, Angular esegue un loop su tutti i binding in cui vengono valutate tutte le expression e i valori risultanti confrontati con un array chiamato oldValues. Se c\u2019\u00e8 una differenza, la propriet\u00e0 del DOM viene aggiornata cos\u00ec come l\u2019array oldValues.<\/p>\n\n\n\n
Dopo ciascun ciclo di change detection, in modalit\u00e0 di sviluppo, Angular esegue in sincrono un altro check per assicurarsi che le expression producano gli stessi valori del precedente ciclo di change detection. Questo check non aggiorna il DOM ma solleva la nostra simpatica eccezione.<\/p>\n\n\n\n
Perch\u00e9 eseguire un nuovo ciclo di controllo?<\/p>\n\n\n\n
Supponiamo che alcune propriet\u00e0 del componente siano state aggiornate durante la change detection. Le expression corrispondenti hanno dunque un nuovo valore inconsistente con ci\u00f2 che \u00e8 stato mostrato sullo schermo. Angular potrebbe sicuramente avviare un nuovo ciclo di change detection ma \u00e8 chiaro che nascerebbe un loop infinito di cicli di change detection .<\/p>\n\n\n\n
Per evitare questa situazione, il framework ha imposto ci\u00f2 che viene chiamato UniDirectional Data Flow. Ossia, una volta che sono stati processati i binding per un componente, non possiamo pi\u00f9 aggiornare le sue propriet\u00e0 che vengono usate nelle expression. Il sollevamento della ExpressionChangedAfterItHasBeenCheckedError \u00e8 lo strumento attraverso il quale viene implementato il data flow.<\/p>\n\n\n\n
Ok, a questo punto potremmo usare un setInterval per scatenare un nuovo ciclo di change detection. Sbagliato! Ancora una volta avremmo un ciclo infinito di change detection.<\/p>\n\n\n\n
La soluzione consiste nell\u2019eseguire l\u2019aggiornamento della propriet\u00e0 time in una zona diversa da quella di Angular. Come realizzarla? La prima cosa che ci pu\u00f2 venire in mente \u00e8 usare un setInterval in questa nuova zona.<\/p>\n\n\n
\nexport class AppComponent {\n    mytime: number;\n  \n    get time(): number {\n        return this.mytime;\n    }\n  \nconstructor(private zone: NgZone) {\n    this.mytime = Date.now();\n  \n    this.zone.runOutsideAngular(() => {\n        setInterval(() => {\n            this.mytime = Date.now();\n        }, 0);\n    });\n    }\n}\n<\/pre><\/div>\n\n\n
Ricordiamo per\u00f2 che l\u2019uso di un setInterval \u00e8 sempre da deprecare nel codice reale che si porta in produzione.<\/p>\n\n\n\n
Possiamo invece adottare la strategia onPush su un componente (ChangeDetectionStrategy.onPush) per dispensare Angular dalla scelta di quando eseguire la change detection.<\/p>\n\n\n\n
Con onPush la change detection strategy verr\u00e0 avviata quando:<\/p>\n\n\n\n
  1. ci sono cambi in una @Input<\/li>
  2. c\u2019\u00e8 un evento originato nel componente o in suo figlio<\/li>
  3. usiamo una async pipe<\/li>
  4. Eseguiamo, come nel nostro esempio, la change detection esplicitamente (con markForCheck() sul ChangeDetectorRef iniettato nel componente)<\/li><\/ol>\n\n\n\n
    Spero che l\u2019argomento vi abbia interessato e che abbia gettato un po\u2019 di luce su un argomento estremamente complesso.<\/p>\n\n\n\n
    Alla prossima!<\/p>\n\n\n\n\n","protected":false},"excerpt":{"rendered":"
    Cosa si nasconde dietro il rendering in un web browser<\/p>\n","protected":false},"author":196716245,"featured_media":25947,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_et_pb_use_builder":"off","_et_pb_old_content":"","_et_gb_content_width":"","_coblocks_attr":"","_coblocks_dimensions":"","_coblocks_responsive_height":"","_coblocks_accordion_ie_support":"","inline_featured_image":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_feature_clip_id":0,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2},"_wpas_customize_per_network":false,"jetpack_post_was_ever_published":false},"categories":[688637374],"tags":[688637387,688637388,688637389],"class_list":["post-25943","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog","tag-angular","tag-javascript","tag-web"],"yoast_head":"\nLa change detection in Angular - Blexin<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/blexin.com\/it\/blog\/la-change-detection-in-angular\/\" \/>\n<meta property=\"og:locale\" content=\"it_IT\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"La change detection in Angular - Blexin\" \/>\n<meta property=\"og:description\" content=\"Cosa si nasconde dietro il rendering in un web browser\" \/>\n<meta property=\"og:url\" content=\"https:\/\/blexin.com\/it\/blog\/la-change-detection-in-angular\/\" \/>\n<meta property=\"og:site_name\" content=\"Blexin\" \/>\n<meta property=\"article:published_time\" content=\"2020-11-10T23:00:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2021-01-13T08:39:57+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/i2.wp.com\/blexin.com\/wp-content\/uploads\/2020\/12\/iamge00.png?fit=1024%2C608&ssl=1\" \/>\n\t<meta property=\"og:image:width\" content=\"1024\" \/>\n\t<meta property=\"og:image:height\" content=\"608\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Salvatore Sorrentino\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Scritto da\" \/>\n\t<meta name=\"twitter:data1\" content=\"Salvatore Sorrentino\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tempo di lettura stimato\" \/>\n\t<meta name=\"twitter:data2\" content=\"11 minuti\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/blexin.com\\\/it\\\/blog\\\/la-change-detection-in-angular\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/blexin.com\\\/it\\\/blog\\\/la-change-detection-in-angular\\\/\"},\"author\":{\"name\":\"Salvatore Sorrentino\",\"@id\":\"https:\\\/\\\/blexin.com\\\/it\\\/#\\\/schema\\\/person\\\/354db2bc97cac71c2ceeca21a92d5bed\"},\"headline\":\"La change detection in Angular\",\"datePublished\":\"2020-11-10T23:00:00+00:00\",\"dateModified\":\"2021-01-13T08:39:57+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/blexin.com\\\/it\\\/blog\\\/la-change-detection-in-angular\\\/\"},\"wordCount\":1869,\"image\":{\"@id\":\"https:\\\/\\\/blexin.com\\\/it\\\/blog\\\/la-change-detection-in-angular\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/i0.wp.com\\\/blexin.com\\\/wp-content\\\/uploads\\\/2020\\\/12\\\/iamge00.png?fit=1024%2C608&ssl=1\",\"keywords\":[\"Angular\",\"Javascript\",\"Web\"],\"articleSection\":[\"Blog\"],\"inLanguage\":\"it-IT\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/blexin.com\\\/it\\\/blog\\\/la-change-detection-in-angular\\\/\",\"url\":\"https:\\\/\\\/blexin.com\\\/it\\\/blog\\\/la-change-detection-in-angular\\\/\",\"name\":\"La change detection in Angular - Blexin\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/blexin.com\\\/it\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/blexin.com\\\/it\\\/blog\\\/la-change-detection-in-angular\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/blexin.com\\\/it\\\/blog\\\/la-change-detection-in-angular\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/i0.wp.com\\\/blexin.com\\\/wp-content\\\/uploads\\\/2020\\\/12\\\/iamge00.png?fit=1024%2C608&ssl=1\",\"datePublished\":\"2020-11-10T23:00:00+00:00\",\"dateModified\":\"2021-01-13T08:39:57+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/blexin.com\\\/it\\\/#\\\/schema\\\/person\\\/354db2bc97cac71c2ceeca21a92d5bed\"},\"breadcrumb\":{\"@id\":\"https:\\\/\\\/blexin.com\\\/it\\\/blog\\\/la-change-detection-in-angular\\\/#breadcrumb\"},\"inLanguage\":\"it-IT\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/blexin.com\\\/it\\\/blog\\\/la-change-detection-in-angular\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"it-IT\",\"@id\":\"https:\\\/\\\/blexin.com\\\/it\\\/blog\\\/la-change-detection-in-angular\\\/#primaryimage\",\"url\":\"https:\\\/\\\/i0.wp.com\\\/blexin.com\\\/wp-content\\\/uploads\\\/2020\\\/12\\\/iamge00.png?fit=1024%2C608&ssl=1\",\"contentUrl\":\"https:\\\/\\\/i0.wp.com\\\/blexin.com\\\/wp-content\\\/uploads\\\/2020\\\/12\\\/iamge00.png?fit=1024%2C608&ssl=1\",\"width\":1024,\"height\":608},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/blexin.com\\\/it\\\/blog\\\/la-change-detection-in-angular\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/blexin.com\\\/it\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"La change detection in Angular\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/blexin.com\\\/it\\\/#website\",\"url\":\"https:\\\/\\\/blexin.com\\\/it\\\/\",\"name\":\"Blexin\",\"description\":\"Con noi \u00e8 semplice\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/blexin.com\\\/it\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"it-IT\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/blexin.com\\\/it\\\/#\\\/schema\\\/person\\\/354db2bc97cac71c2ceeca21a92d5bed\",\"name\":\"Salvatore Sorrentino\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"it-IT\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/a6ec0dc827d2acaa55df9dbf1007e23f6fcb8c9436df52ab48274bb2221085bf?s=96&d=identicon&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/a6ec0dc827d2acaa55df9dbf1007e23f6fcb8c9436df52ab48274bb2221085bf?s=96&d=identicon&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/a6ec0dc827d2acaa55df9dbf1007e23f6fcb8c9436df52ab48274bb2221085bf?s=96&d=identicon&r=g\",\"caption\":\"Salvatore Sorrentino\"},\"url\":\"https:\\\/\\\/blexin.com\\\/it\\\/author\\\/salvatore-sorrentinoblexin-com\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"La change detection in Angular - Blexin","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/blexin.com\/it\/blog\/la-change-detection-in-angular\/","og_locale":"it_IT","og_type":"article","og_title":"La change detection in Angular - Blexin","og_description":"Cosa si nasconde dietro il rendering in un web browser","og_url":"https:\/\/blexin.com\/it\/blog\/la-change-detection-in-angular\/","og_site_name":"Blexin","article_published_time":"2020-11-10T23:00:00+00:00","article_modified_time":"2021-01-13T08:39:57+00:00","og_image":[{"width":1024,"height":608,"url":"https:\/\/i2.wp.com\/blexin.com\/wp-content\/uploads\/2020\/12\/iamge00.png?fit=1024%2C608&ssl=1","type":"image\/png"}],"author":"Salvatore Sorrentino","twitter_card":"summary_large_image","twitter_misc":{"Scritto da":"Salvatore Sorrentino","Tempo di lettura stimato":"11 minuti"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/blexin.com\/it\/blog\/la-change-detection-in-angular\/#article","isPartOf":{"@id":"https:\/\/blexin.com\/it\/blog\/la-change-detection-in-angular\/"},"author":{"name":"Salvatore Sorrentino","@id":"https:\/\/blexin.com\/it\/#\/schema\/person\/354db2bc97cac71c2ceeca21a92d5bed"},"headline":"La change detection in Angular","datePublished":"2020-11-10T23:00:00+00:00","dateModified":"2021-01-13T08:39:57+00:00","mainEntityOfPage":{"@id":"https:\/\/blexin.com\/it\/blog\/la-change-detection-in-angular\/"},"wordCount":1869,"image":{"@id":"https:\/\/blexin.com\/it\/blog\/la-change-detection-in-angular\/#primaryimage"},"thumbnailUrl":"https:\/\/i0.wp.com\/blexin.com\/wp-content\/uploads\/2020\/12\/iamge00.png?fit=1024%2C608&ssl=1","keywords":["Angular","Javascript","Web"],"articleSection":["Blog"],"inLanguage":"it-IT"},{"@type":"WebPage","@id":"https:\/\/blexin.com\/it\/blog\/la-change-detection-in-angular\/","url":"https:\/\/blexin.com\/it\/blog\/la-change-detection-in-angular\/","name":"La change detection in Angular - Blexin","isPartOf":{"@id":"https:\/\/blexin.com\/it\/#website"},"primaryImageOfPage":{"@id":"https:\/\/blexin.com\/it\/blog\/la-change-detection-in-angular\/#primaryimage"},"image":{"@id":"https:\/\/blexin.com\/it\/blog\/la-change-detection-in-angular\/#primaryimage"},"thumbnailUrl":"https:\/\/i0.wp.com\/blexin.com\/wp-content\/uploads\/2020\/12\/iamge00.png?fit=1024%2C608&ssl=1","datePublished":"2020-11-10T23:00:00+00:00","dateModified":"2021-01-13T08:39:57+00:00","author":{"@id":"https:\/\/blexin.com\/it\/#\/schema\/person\/354db2bc97cac71c2ceeca21a92d5bed"},"breadcrumb":{"@id":"https:\/\/blexin.com\/it\/blog\/la-change-detection-in-angular\/#breadcrumb"},"inLanguage":"it-IT","potentialAction":[{"@type":"ReadAction","target":["https:\/\/blexin.com\/it\/blog\/la-change-detection-in-angular\/"]}]},{"@type":"ImageObject","inLanguage":"it-IT","@id":"https:\/\/blexin.com\/it\/blog\/la-change-detection-in-angular\/#primaryimage","url":"https:\/\/i0.wp.com\/blexin.com\/wp-content\/uploads\/2020\/12\/iamge00.png?fit=1024%2C608&ssl=1","contentUrl":"https:\/\/i0.wp.com\/blexin.com\/wp-content\/uploads\/2020\/12\/iamge00.png?fit=1024%2C608&ssl=1","width":1024,"height":608},{"@type":"BreadcrumbList","@id":"https:\/\/blexin.com\/it\/blog\/la-change-detection-in-angular\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/blexin.com\/it\/"},{"@type":"ListItem","position":2,"name":"La change detection in Angular"}]},{"@type":"WebSite","@id":"https:\/\/blexin.com\/it\/#website","url":"https:\/\/blexin.com\/it\/","name":"Blexin","description":"Con noi \u00e8 semplice","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/blexin.com\/it\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"it-IT"},{"@type":"Person","@id":"https:\/\/blexin.com\/it\/#\/schema\/person\/354db2bc97cac71c2ceeca21a92d5bed","name":"Salvatore Sorrentino","image":{"@type":"ImageObject","inLanguage":"it-IT","@id":"https:\/\/secure.gravatar.com\/avatar\/a6ec0dc827d2acaa55df9dbf1007e23f6fcb8c9436df52ab48274bb2221085bf?s=96&d=identicon&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/a6ec0dc827d2acaa55df9dbf1007e23f6fcb8c9436df52ab48274bb2221085bf?s=96&d=identicon&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/a6ec0dc827d2acaa55df9dbf1007e23f6fcb8c9436df52ab48274bb2221085bf?s=96&d=identicon&r=g","caption":"Salvatore Sorrentino"},"url":"https:\/\/blexin.com\/it\/author\/salvatore-sorrentinoblexin-com\/"}]}},"jetpack_publicize_connections":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/blexin.com\/wp-content\/uploads\/2020\/12\/iamge00.png?fit=1024%2C608&ssl=1","jetpack_shortlink":"https:\/\/wp.me\/pcyUBx-6Kr","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/blexin.com\/it\/wp-json\/wp\/v2\/posts\/25943","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blexin.com\/it\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blexin.com\/it\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blexin.com\/it\/wp-json\/wp\/v2\/users\/196716245"}],"replies":[{"embeddable":true,"href":"https:\/\/blexin.com\/it\/wp-json\/wp\/v2\/comments?post=25943"}],"version-history":[{"count":20,"href":"https:\/\/blexin.com\/it\/wp-json\/wp\/v2\/posts\/25943\/revisions"}],"predecessor-version":[{"id":27633,"href":"https:\/\/blexin.com\/it\/wp-json\/wp\/v2\/posts\/25943\/revisions\/27633"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/blexin.com\/it\/wp-json\/wp\/v2\/media\/25947"}],"wp:attachment":[{"href":"https:\/\/blexin.com\/it\/wp-json\/wp\/v2\/media?parent=25943"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blexin.com\/it\/wp-json\/wp\/v2\/categories?post=25943"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blexin.com\/it\/wp-json\/wp\/v2\/tags?post=25943"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}