{"id":3544,"date":"2017-11-20T00:25:51","date_gmt":"2017-11-20T00:25:51","guid":{"rendered":"http:\/\/pensemosweb.com.mx\/index.php\/2017\/11\/20\/angular-hooks-del-ciclo-de-vida-de-un-componente\/"},"modified":"2024-04-06T01:51:15","modified_gmt":"2024-04-06T07:51:15","slug":"angular-hooks-del-ciclo-de-vida-de-un-componente","status":"publish","type":"post","link":"https:\/\/pensemosweb.com\/en\/angular-hooks-del-ciclo-de-vida-de-un-componente\/","title":{"rendered":"Angular: Hooks del ciclo de vida de un componente"},"content":{"rendered":"<h2 class=\"wp-block-heading\">Introducci\u00f3n a los hooks de angular<\/h2>\n\n\n\n<p>Antes de empezar a describir los Hooks del ciclo de vida de un componente  en angular quiero citar la definici\u00f3n de Hooking de wikipedia:<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p>El t\u00e9rmino <strong>Hooking <\/strong>abarca una gama de t\u00e9cnicas utilizadas para alterar o aumentar el comportamiento de un sistema operativo, aplicaciones o de otros componentes de software interceptando llamadas de funci\u00f3n o mensajes o eventos pasados entre componentes de software. El c\u00f3digo que maneja tales llamadas de funci\u00f3n, eventos o mensajes interceptados se le llama un <strong>Hook<\/strong>.<\/p>\n<\/blockquote>\n\n\n\n<figure class=\"wp-block-image aligncenter kg-card kg-image-card\"><img decoding=\"async\" src=\"\/wp-content\/uploads\/2017\/11\/hooks-in-sequence.png\" alt=\"\" class=\"wp-image-384\"\/><\/figure>\n\n\n\n<p>En angular tenemos estos hooks, que son funciones ejecutadas en puntos claves del ciclo de vida de un componente.<\/p>\n\n\n\n<p>Tanto los componentes y las directivas pueden ejecutar estas funciones. Pero las directivas no ejecutan las funciones de color azul, las cuales son espec\u00edficas de la vista y contenido de componentes.<\/p>\n\n\n\n<p>Dado que normalmente se utiliza typescript en Angular para obtener el c\u00f3digo javascript final. Vamos a implementar estos m\u00e9todos utilizando la interfaz que le corresponde a cada uno. Todas estas interfaces est\u00e1n en el modulo <strong>@angular\/core<\/strong>.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter kg-card kg-image-card\"><img decoding=\"async\" src=\"\/wp-content\/uploads\/2017\/11\/angular-ts.png\" alt=\"\" class=\"wp-image-385\"\/><\/figure>\n\n\n\n<p>Por ejemplo, para implementar el m\u00e9todo <strong>ngOnInit<\/strong>, debemos importar la interfaz <strong>OnInit<\/strong>:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>import { Component, OnInit } from '@angular\/core';<\/code><\/pre>\n\n\n\n<p>El lenguaje de javascript no tiene interfaces, estas interfaces las agrega typescript para obtener un Javascript fuertemente tipeado y basado en clases. Aunque las ultimas versiones de javascript utilizan una sintaxis de clases casi id\u00e9ntica, por detr\u00e1s realmente son funciones y herencia prototipal.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Todos los hooks del ciclo de vida de un componente en acci\u00f3n<\/h2>\n\n\n\n<p>M\u00e1s abajo tenemos ejemplos de todos los hooks en acci\u00f3n y est\u00e1n basados en el c\u00f3digo de la documentaci\u00f3n oficial de Angular. Para ver mejor el c\u00f3digo y el funcionamiento en tiempo real, siempre puedes presionar este bot\u00f3n:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/www.pensemosweb.com\/wp-content\/uploads\/2021\/05\/image.png\" alt=\"\" class=\"wp-image-2147\"\/><\/figure>\n\n\n\n<p><iframe src=\"https:\/\/stackblitz.com\/github\/jaimeCervantes\/hooks-angular-all?ctl=1&amp;embed=1&amp;file=src\/app\/app.component.ts&amp;view=editor#full\"><\/iframe><\/p>\n\n\n\n<p>Existe un componente de tipo <em>ParentComponent<\/em> y otro <em>ChildComponent<\/em>. He <em>ParentComponent<\/em> se encarga de crear el <em>ChildComponent<\/em>, de esta manera ser\u00e1 m\u00e1s f\u00e1cil poder ver en acci\u00f3n los hooks. Tambi\u00e9n se encarga de bindear la propedad <code>name<\/code> y actualizarla para poder ver el hook <code>ngOnChanges<\/code>.<\/p>\n\n\n\n<p>Como te dar\u00e1s cuenta viendo el archivo <code>\/app\/all\/child.component.ts<\/code>, este componente implementa todas las interfaces de los hooks.<\/p>\n\n\n\n<p>Si presionas el bot\u00f3n <strong>Crear ChildComponent<\/strong>, el <strong>mensaje #1<\/strong> es en el <code>constructor<\/code> del componente, el constructor normalmente se utiliza para definir valores iniciales simples, nunca pongas mucha l\u00f3gica en el constructor. Adem\u00e1s podemos notar que la propiedad <code>name<\/code> en este punto, aun no esta definida.<\/p>\n\n\n\n<p>Despu\u00e9s tenemos el <strong>mensaje #2<\/strong>, este es del hook <code>ngOnChanges<\/code>, aqu\u00ed es cuando ocurre el enlazado de las propiedades con la nueva instancia de nuestro ChildComponent, en este punto la propiedad <code>name<\/code> ahora si esta definida.<\/p>\n\n\n\n<p>Luego tenemos la ejecuci\u00f3n de <strong>ngOnInit<\/strong>, <strong>ngDoCheck<\/strong>, <strong>ngAfterContentInit<\/strong>, <strong>ngAfterContentChecked<\/strong>, <strong>ngAfterViewInit<\/strong>, <strong>ngAfterViewChecked<\/strong> en ese orden.<\/p>\n\n\n\n<p>Ahora si presionas el bot\u00f3n <strong>Actualizar ChildComponent<\/strong>, se actualiza la propiedad <code>name<\/code> desde el <em>ParentComponent<\/em>, podemos ver como se ejecutan <code>ngDoCheck<\/code>, <code>ngAfterContentChecked<\/code>, <code>ngAfterViewChecked<\/code>, y otra vez <code>ngOnChanges<\/code>, <code>ngDoCheck<\/code>, <code>ngAfterContentChecked<\/code> y finalmente <code>ngAfterViewChecked<\/code>. Aqu\u00ed podemos afirmar dos cosas:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong><code>ngDoCheck<\/code>, <code>ngAfterContentChecked<\/code>, <code>ngAfterViewChecked<\/code><\/strong> se invocan en ese orden al detectar un cambio.<\/li>\n\n\n\n<li><strong>Tambi\u00e9n se ejecutan siempre tras un <code>ngOnChanges<\/code><\/strong> pues se volvieron a ejecutar en ese mismo orden<\/li>\n<\/ol>\n\n\n\n<p>Finalmente, si presionas el bot\u00f3n <strong>Destruir ChildComponent<\/strong>, los hooks <code>ngDoCheck<\/code>, <code>ngAfterContentChecked<\/code>, <code>ngAfterViewChecked<\/code> se vuelven a ejecutar, y adem\u00e1s antes de destruir el componente totalmente, se ejecuta el hook <code>ngOnDestroy<\/code>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"ngonchanges\">Hooks ngOnChanges<\/h2>\n\n\n\n<p>Cuando se crea un componente lo primero que se ejecuta es el constructor de la clase del componente. Ahora bien,  esto es totalmente normal en otros \u00e1mbitos. La creaci\u00f3n de una nueva instancia de clase, as\u00ed que realmente constructor no es un hook de angular.<\/p>\n\n\n\n<p><code>ngOnChanges<\/code> solo revisa los cambios de una <em>propiedad input<\/em>, esto es, todas las propiedades a las que se les aplica el decorador <code>@input([alias])<\/code>, que es la manera en que bindeamos o enlazamos propiedades de un componente padre a otro hijo usando esta sintaxis <code>[habilidad]=\"expresion\"<\/code>. Este patr\u00f3n, de padre a hijo, nos permite obtener un mejor rendimiento en la detecci\u00f3n de cambios entre componentes. Es por eso que en el c\u00f3digo de los ejemplos siempre se utiliza un componente padre y un componente hijo. Los cambios se actualizan de padre a hijo.<\/p>\n\n\n\n<p><iframe id=\"angular-ngOnChanges#full\" style=\"width: 100%;\" src=\"https:\/\/stackblitz.com\/github\/jaimeCervantes\/angular-hook-onChanges?embed=1&amp;ctl=1&amp;file=src\/app\/app.component.ts&amp;view=editor\" height=\"400px\"><\/iframe><\/p>\n\n\n\n<p>En el ejemplo tenemos dos propiedades enlazadas <code>[persona]=\"persona\"<\/code>and <code>[habilidad]=\"habilidad\"<\/code>, si cambiamos el valor de habilidad se dispara la ejecuci\u00f3n de <code>ngOnChanges<\/code> en el componente hijo, sin embargo la propiedad <code>persona.name<\/code> no dispara el hook, esto pasa porque la detecci\u00f3n de cambios comprueba la referencia de la propiedad persona y lo que se modifico fue la propiedad <code>persona.name<\/code>, por lo que la referencia al objeto persona nunca cambi\u00f3.<\/p>\n\n\n\n<p>Cada vez que se detecta un cambio, <code>ngOnChanges<\/code> recibe un objeto, el cual contiene todas las propiedades que cambiaron, y cada una de estas es de tipo <strong>SimpleChange<\/strong> conteniendo el valor anterior <code>previousValue<\/code> y el valor actual <code>currentValue<\/code>.<\/p>\n\n\n\n<p><code>ngOnChanges<\/code> puede detectar cambios en m\u00e1s de una propiedad <code>@Input()<\/code>, por lo que es muy \u00fatil para realizar m\u00faltiples operaciones en la informaci\u00f3n, como definir valores predeterminados, validar datos, transformarlos antes de ser utilizados por el componente y\/o antes de ser visualizados por el usuario.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"ngoninit-y-ngondestroy\">Hooks ngOnInit y ngOnDestroy<\/h2>\n\n\n\n<p><iframe id=\"angular-ngOnOnInit-ngOnDestroy#full\" style=\"width: 100%;\" src=\"https:\/\/stackblitz.com\/github\/jaimeCervantes\/angular-ngOnInit-ngOnDestroy?embed=1&amp;ctl=1&amp;file=src\/app\/app.component.ts&amp;view=editor\" height=\"400px\"><\/iframe><\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"ngoninit\">Hook ngOnInit<\/h3>\n\n\n\n<p>El hook <code>ngOnInit<\/code> se ejecuta una sola vez despu\u00e9s de <code>ngOnChanges<\/code> y no se vuelve a ejecutar en el resto de vida del componente. <\/p>\n\n\n\n<p>Una directiva puede tener hooks, esto se debe a que un componente es un tipo de directiva que tiene una plantilla html. Es decir, un componente es una directiva.<\/p>\n\n\n\n<p>Dado que <code>ngOnInit<\/code> se ejecuta una sola vez despu\u00e9s de ngOnChanges, es un buen lugar para:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Agregar inicializaciones complejas.\n<ol class=\"wp-block-list\">\n<li>Como alg\u00fan proceso as\u00edncrono<\/li>\n\n\n\n<li>Obtener de un servicio datos para uso en el componente<\/li>\n\n\n\n<li>Subscribirse a un objeto para ser notificado de cambios, como los observables de RxJs, escuchar eventos del DOM<\/li>\n\n\n\n<li>Etc\u00e9tera.<\/li>\n<\/ol>\n<\/li>\n\n\n\n<li>Configuraci\u00f3n de inicio debido a que ya se tienen los valores de las propiedades <code>@inputs()<\/code> gracias al hook <code>ngOnChanges<\/code>.<\/li>\n<\/ol>\n\n\n\n<p>Cada vez que se presiona el bot\u00f3n <strong>Agregar Persona<\/strong> el hook <code>ngOnInit<\/code> se ejecuta, y cuando presionas el bot\u00f3n <strong>Resetear<\/strong> se ejecuta el hook <code>ngOnDestroy<\/code> justo antes de destruir a las elementos personas.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"ngondestroy\">Hook ngOnDestroy<\/h3>\n\n\n\n<p>En este hook del ciclo de vida de un componente deber\u00eda de ir todo el c\u00f3digo de limpieza de un componente, justo antes de destruirlo.<\/p>\n\n\n\n<p>Tambi\u00e9n es un buen momento para notificar a otros componentes que va a ser destruido.<\/p>\n\n\n\n<p>Es un buen punto donde liberar memoria, darse de baja de los Observadores como RxJS y los eventos del DOM. Detener los timers, dar de baja todos los callbacks enlazados a servicios. En general todo lo que consuma memoria y tiempo de ejecuci\u00f3n.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"ngdocheck\">Hook ngDoCheck<\/h2>\n\n\n\n<p>Este Hook del ciclo de vida de un componente se ejecuta despu\u00e9s de cualquier ejecuci\u00f3n de <strong>ngOnChange<\/strong>, y despues de <strong>ngOnInit<\/strong>, pero tambi\u00e9n se ejecuta despu\u00e9s de eventos que pueden producir cambios, como por ejemplo el blur y focus de los inputs.<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p>Dado que se ejecuta demasiadas veces, es muy costoso utilizar este hook, as\u00ed que se debe usar con cuidado.<\/p>\n<\/blockquote>\n\n\n\n<p>Para crear este ejemplo simplemente se implement\u00f3 el m\u00e9todo <code>ngDoCheck<\/code> en el componente hijo del c\u00f3digo del hook <code>ngOnChanges<\/code>. Puedes probar cambiando datos y veras la ejecuciones de la funci\u00f3n <code>ngDoCheck<\/code>.<\/p>\n\n\n\n<p><iframe id=\"angular-ngDoCheck#full\" style=\"width: 100%;\" src=\"https:\/\/stackblitz.com\/github\/jaimeCervantes\/angular-ngDoCheck?embed=1&amp;ctl=1&amp;file=src\/app\/app.component.ts&amp;view=editor\" height=\"400px\"><\/iframe><\/p>\n\n\n\n<p><code>ngOnChanges<\/code> NO se ejecuta cuando modificamos una propiedad que no es un <code>@input()<\/code>, como pasa con la propiedad <code>name<\/code> of the object <code>person<\/code>, pero si se ejecuta el hook <code>ngDoCheck<\/code>. Puede ser \u00fatil para detectar cambios internos del componente, pero recuerda que tiene un costo alto de ejecuci\u00f3n si deseas detectar muchas propiedades <strong>NO <code>@inputs<\/code><\/strong>de tu componente.<\/p>\n\n\n\n<p>Tambi\u00e9n tenemos un elemento input dentro del componente hijo que esta enlazado a la propiedad <code>[habilidad]<\/code>, esta es un <code>@input<\/code>, pero el cambio se realiza dentro del componente hijo, el componente padre no se entera de este cambio, por lo que aunque <code>ngDoCheck<\/code> se ejecuta, <code>ngOnChanges<\/code> no lo hace. Recuerda, la detecci\u00f3n de cambios entre componentes se realiza de manera unidireccional, de padre a hijo.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"aftercontentinit-y-aftercontentchecked\">Hooks AfterContentInit y AfterContentChecked<\/h2>\n\n\n\n<p><code>ngAfterContentInit<\/code> se ejecuta una vez despu\u00e9s del primer <code>ngDoCheck<\/code> y no se vuelve a ejecutar en todo el resto de vida del componente. <code>ngAfterContentChecked<\/code> se ejecuta despu\u00e9s de cualquier ejecuci\u00f3n de <code>ngDoCheck<\/code> en todo la vida del componente. Ambos se ejecutan despu\u00e9s de que angular proyecta contenido externo en el componente. <\/p>\n\n\n\n<p>Este contenido externo es proporcionado por el usuario del componente, similar a lo que se hace con el <em>Light DOM<\/em> de los <a href=\"https:\/\/pensemosweb.com\/en\/category\/componentes-web\/\">componentes web nativos.<\/a><\/p>\n\n\n\n<p>A lo anterior Angular le llama Proyecci\u00f3n de contenido (Content projection), en AngularJS se conoce como transclusi\u00f3n. Para proyectar el contenido en el componente, se debe utilizar el tag <code>&lt;ng-content&gt;&lt;\/ng-content&gt;<\/code>, esta etiqueta ser\u00eda an\u00e1loga a la etiqueta <code>&lt;slot&gt;<\/code> de los componenes web nativos.<\/p>\n\n\n\n<p>Dentro del m\u00e9todo <code>ngAfterContentChecked<\/code> se debe poder acceder al modelo o variables del contenido proyectado, para esto se debe utilizar el decorador <code>@ContentChild([TipoDeHijo])<\/code>, lo puedes ver en el archivo <code>\/app\/after-content\/after-content-child.component.ts<\/code>.<\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#0F111A\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewbox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" data-code=\"\/\/ Para buscar contenido de tipo 'ChildComponent'(etiqueta lch-child)@ContentChild(ChildComponent) contentChild: ChildComponent;\" style=\"color:#babed8;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewbox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki material-theme-ocean\" style=\"background-color: #0F111A\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #464B5D; font-style: italic\">\/\/ Para buscar contenido de tipo &#39;ChildComponent&#39;(etiqueta lch-child)<\/span><\/span>\n<span class=\"line\"><span style=\"color: #89DDFF\">@<\/span><span style=\"color: #82AAFF\">ContentChild<\/span><span style=\"color: #BABED8\">(ChildComponent) <\/span><span style=\"color: #FFCB6B\">contentChild<\/span><span style=\"color: #89DDFF\">:<\/span><span style=\"color: #BABED8\"> ChildComponent<\/span><span style=\"color: #89DDFF\">;<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<p><iframe id=\"angular-ngAfterContentInit-ngAfterContentChecked#full\" style=\"width: 100%;\" src=\"https:\/\/stackblitz.com\/github\/jaimeCervantes\/angular-ngAfterContentInit-ngAfterContentChecked?embed=1&amp;ctl=1&amp;file=src\/app\/app.component.ts&amp;view=editor\" height=\"400px\"><\/iframe><\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"afterviewinit-y-afterviewchecked\">Hooks AfterViewInit y AfterViewChecked<\/h2>\n\n\n\n<p>Estos hooks son muy similares a <code>ngAfterContentInit<\/code> and <code>ngAfterContentChecked<\/code>, solo que se invocan despu\u00e9s de <code>ngAfterContentChecked<\/code>, siguiendo el mismo patron, <code><strong>ngAfterViewInit<\/strong><\/code> se invoca una sola vez despu\u00e9s del primer <code>ngAfterContentChecked<\/code>, y no se vuelve a invocar.<\/p>\n\n\n\n<p><strong><code>ngAfterViewChecked<\/code><\/strong>, se ejecuta despu\u00e9s de cualquier invocaci\u00f3n de <code>ngAfterContentChecked<\/code>, la diferencia entre <code>ngAfterContentChecked<\/code> es que estos hooks marcan el final de la composici\u00f3n de la vista de un componente y se define dentro del componente mismo, no desde el exterior, como vimos con <code>ngAfterContentChecked<\/code> and <code>ng-content<\/code>, por esta raz\u00f3n tiene similitud con el <em><a href=\"https:\/\/pensemosweb.com\/en\/como-crear-un-componente-web-template-y-shadow-dom\/\">Shadow DOM<\/a><\/em> de los <a href=\"https:\/\/pensemosweb.com\/en\/category\/componentes-web\/\">componentes web nativos.<\/a><\/p>\n\n\n\n<p>Si revisas el c\u00f3digo del <code>\/app\/after-view\/after-view-child.component.ts<\/code>, para acceder al modelo o variables de la vista interna (Vista de hijos o Child View), debemos utilizar el decorator <code>@ViewChild([TipoDeHijo])<\/code>:<\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#0F111A\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewbox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" data-code=\"\/\/ Para buscar view childs del tipo ChildComponent@ViewChild(ChildComponent) viewChild: ChildComponent;\" style=\"color:#babed8;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewbox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki material-theme-ocean\" style=\"background-color: #0F111A\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #464B5D; font-style: italic\">\/\/ Para buscar view childs del tipo ChildComponent<\/span><\/span>\n<span class=\"line\"><span style=\"color: #89DDFF\">@<\/span><span style=\"color: #82AAFF\">ViewChild<\/span><span style=\"color: #BABED8\">(ChildComponent) <\/span><span style=\"color: #FFCB6B\">viewChild<\/span><span style=\"color: #89DDFF\">:<\/span><span style=\"color: #BABED8\"> ChildComponent<\/span><span style=\"color: #89DDFF\">;<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<p><iframe id=\"angular-ngAfterViewInit-ngAfterViewChecked#full\" style=\"width: 100%;\" src=\"https:\/\/stackblitz.com\/github\/jaimeCervantes\/angular-ngAfterViewInit-ngAfterViewChecked?embed=1&amp;ctl=1&amp;file=src\/app\/app.component.ts&amp;view=editor\" height=\"400px\"><\/iframe><\/p>\n\n\n\n<p>Otra cosa distinta a <code>ngAfterContentChecked<\/code> es que en <strong><code>ngAfterViewChecked<\/code><\/strong> no podemos cambiar el valor de inmediato de la propiedad <code>comment<\/code> enlazada con la vista, si lo haces, te saldr\u00e1 un error como el siguiente:<\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#0F111A\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewbox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" data-code=\"Error: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: ''. Current value: 'Es un nombre muy grande'.\" style=\"color:#babed8;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewbox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki material-theme-ocean\" style=\"background-color: #0F111A\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #FFCB6B\">Mistake<\/span><span style=\"color: #89DDFF\">:<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #FFCB6B\">ExpressionChangedAfterItHasBeenCheckedError<\/span><span style=\"color: #89DDFF\">:<\/span><span style=\"color: #BABED8\"> Expression has changed after it was checked<\/span><span style=\"color: #89DDFF\">.<\/span><span style=\"color: #BABED8\"> Previous <\/span><span style=\"color: #FFCB6B\">value<\/span><span style=\"color: #89DDFF\">:<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #89DDFF\">&#39;&#39;<\/span><span style=\"color: #89DDFF\">.<\/span><span style=\"color: #BABED8\"> Current <\/span><span style=\"color: #FFCB6B\">value<\/span><span style=\"color: #89DDFF\">:<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #89DDFF\">&#39;<\/span><span style=\"color: #C3E88D\">Es un nombre muy grande<\/span><span style=\"color: #89DDFF\">&#39;<\/span><span style=\"color: #89DDFF\">.<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<p>El error se debe que est\u00e9 ultimo hook se ejecuta al final del ciclo de vida, entonces debe volver a pasar por <code>ngOnChanges<\/code> either <code>ngDocheck<\/code> para volver a renderizar la vista actualizada. La soluci\u00f3n es actualizar la propiedad <code>comment<\/code> en una futura iteraci\u00f3n del<a href=\"https:\/\/pensemosweb.com\/en\/javascript-event-loop-concurrencia-asincrono\/\"> loop de Javascript<\/a>. El setTimeout de <code>this.logger.thick_then<\/code> recibe una funci\u00f3n, la cual se agrega a la cola de callbacks de javascript para ser escogida en una futura <a href=\"https:\/\/pensemosweb.com\/en\/javascript-event-loop-concurrencia-asincrono\/\">iteraci\u00f3n del loop<\/a> y esto le da el tiempo suficiente a Angular para actualizar la vista correctamente.<\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-wp-embed is-provider-pensemos-web wp-block-embed-pensemos-web\"><div class=\"wp-block-embed__wrapper\">\nhttps:\/\/www.pensemosweb.com\/javascript-event-loop-concurrencia-asincrono\/\n<\/div><figcaption class=\"wp-element-caption\">Loop de Javascript<\/figcaption><\/figure>","protected":false},"excerpt":{"rendered":"<p>El t\u00e9rmino Hooking abarca una gama de t\u00e9cnicas utilizadas para alterar o aumentar el comportamiento de un sistema operativo, aplicaciones o de otros componentes de software interceptando llamadas de funci\u00f3n o mensajes o eventos pasados entre componentes de software.<\/p>","protected":false},"author":2,"featured_media":3766,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_et_pb_use_builder":"","_et_pb_old_content":"","_et_gb_content_width":"","footnotes":""},"categories":[23],"tags":[40,54,68],"class_list":["post-3544","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-angular","tag-angular","tag-javascript","tag-intermedio"],"_links":{"self":[{"href":"https:\/\/pensemosweb.com\/en\/wp-json\/wp\/v2\/posts\/3544","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/pensemosweb.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/pensemosweb.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/pensemosweb.com\/en\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/pensemosweb.com\/en\/wp-json\/wp\/v2\/comments?post=3544"}],"version-history":[{"count":3,"href":"https:\/\/pensemosweb.com\/en\/wp-json\/wp\/v2\/posts\/3544\/revisions"}],"predecessor-version":[{"id":3919,"href":"https:\/\/pensemosweb.com\/en\/wp-json\/wp\/v2\/posts\/3544\/revisions\/3919"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/pensemosweb.com\/en\/wp-json\/wp\/v2\/media\/3766"}],"wp:attachment":[{"href":"https:\/\/pensemosweb.com\/en\/wp-json\/wp\/v2\/media?parent=3544"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/pensemosweb.com\/en\/wp-json\/wp\/v2\/categories?post=3544"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/pensemosweb.com\/en\/wp-json\/wp\/v2\/tags?post=3544"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}