¿Cómo usar Expresiones en Enlazado de Eventos (Event Binding) de Angular?

¿Cómo usar Expresiones en Enlazado de Eventos (Event Binding) de Angular?

En contraparte con las expresiones de plantillasque se usan en las interpolaciones y Property Binding, una Expresiónof Enlazado de eventos (Event Binding)tiene un efecto colateral, este efecto sin embargo, es deseado, es el objetivo de un evento, modificar el estado de la aplicación a través de las acciones del usuario.

Por la explicación anterior, se les llama también expresiones de estado, En el siguiente ejemplo podemos ver la invocación a un método, la sintaxis para Event Bindingis (evento)="expresión":

<button (click)="cambiarNombre()">Voltear nombre</button>

La sintaxis para las expresiones en Enlazado de eventos como las expresiones de plantillases parecida a las expresiones de Javascript normales, pero tiene ciertas limitaciones. No está permitido:

  • The operator new
  • Los operadores ++and --
  • Los operadores de asignacion (+=,-=, *=, etc), OJO: el operador =SI está permitido.
  • Los operadores a nivel de bits |and &
  • Los operadores de expresiones de plantillas:  Operador de Tuberia |Operador de Guardia contra valores null o indefinidos, muy util en acceso a datos, ?.Operador para vereficar referencia NO Nulla, ! 

A diferencia de las expresiones de plantillas que se utilizan en interpolación y Property Binding, las expresiones de estado aceptan:

  • El operador de asignacion =
  • Expresiones consecutivas como operacion = operacion + 1;resultado = operacion * 2

Aquí esta un ejemplo en acción, revisa el archivo src/app/app.component.ts, puedes dar click en los botones azules botheither previewpara ver el código en acción.

¿De dónde se obtienen los valores de las expresiones de enlazado de eventos?

Al igual que las expresiones de plantillas, las expresiones de estado normalmente obtienen sus valores de los miembros de la clase del componente. Por ejemplo, las propiedades nameand resultadoen el ejemplo anterior.

Y al igual que las expresiones de plantilla, se pueden usar las propiedades o variables de plantillasen el contexto de la plantilla misma.

Variables de input y de referencia

<p *ngfor="let persona of gente">
 <input #nombre [value]="persona.nombre" (input)="persona.nombre = $event.target.value"/>
 {{persona.nombre}}
 <button (click)="eliminar(nombre.value, $event)">Eliminar</button>
</p>

Aquí se utiliza la variable de input personque es un objeto y se accede a su propiedad nameen la Expresión de Estado (input)="persona.nombre = $event.target.value"

También tenemos la variable de referencia #nombrela cual se utiliza en la expresión de estado (click)="eliminar(nombre.value, $event)".

En ambos casos vemos la propiedad de plantilla $event, la cual contiene la referencia al evento y elemento relacionado. Se accedió al valor de los input a través de $event.target.value.

También mandamos todo el objeto $eventen la expresión de estado para eliminar a una persona (click)="eliminar(nombre.value, $event)", y el método eliminar de la clase del componente imprime el tipo de evento en un alerta.

Ejemplo en acción:

¿Cómo enlazar propiedades entre componentes? Property Binding Angular

How to bind properties between components? Angular Property Binding

Property Binding is a quick and easy way to define a property to a component of an Angular application and update this property if a change in the origin of the information is detected.

Property binding can be defined to a native HMTL element, a component or a directive. To define a property, use Template expressionsI recommend that you read this post. How to use Expressions in Angular Interpolation and Property Binding?.

One of the simplest examples is property binding src, in the section Secure contentFrom this post you can see the example in action with plunker:

<img [src]="persona.photoURL">

The label imgalso has an attribute src, but here it is worth pointing out that the properties and attributes of an element are not the same. Property Binding applies to the properties themselves, not the attributes.

Attributes are sometimes used to reflect the state of an element or component, but an attribute is useful for declaring initial element information in HTML code, a property is part of the element instance.

To prove that they are different, if you want to obtain the value of an attribute, use element.getAttribute(attributeName), to obtain the value of a property we use element.property.

To define an attribute, use element.setAttribute(attributeName, value), to define a property we use element.property = value.

Attributes are stored in a property element.attributesof the element or component instance. To understand this about attributes and properties, I recommend the section synchronization of attributes and properties.

Now let's see how we can enable and disable a <input>through property disabled:

<input [disabled]="isDisabled" value="Hola"/>

There is another notation to link properties, bind-property="expression":

<input bind-disabled="isDisabled" value="Hola"/>

Another interesting example is defining the value classof an element through the directive ngClass:

<p [ngclass]="clases"></p>

Here the question is, How does angular know that ngClassIs it a directive and not a property?

In another publication we will see how to create a directive, for the moment just take into account that the way in which directives are created allows Angular to check whether it is a directive or not. Angular before trying to do a property binding checks if a property exists ngClassin the directive or in the element that is being applied. In the above case, the native elements do not have the property ngClass, html elements have the property classNameand classList, but in this case we can say that [ngClass]It is a directive.

Secure content

Angular does its job in keeping your code secure, here is an example using property binding:

caution: string = '  ';

Communication between components

The binding of properties is very useful in the communication from Parent to child of components, let's see a concrete example, we have the parent component pb-person-list, which contains a list of child components of type pb-person.

  • Parent component:
    • src/app/pb-person-list/pb-person-list.component.ts
    • src/app/pb-person-list/pb-person-list.component.html
  • Child component:
    • src/app/pb-person-list/pb-person.component.ts
    • src/app/pb-person-list/pb-person.component.html

The parent component contains an array of people, this array is bound through the directive *ngForand Property Bindingwith the property personof the child component.

Here is something very important, so that the child component can perform the Property Linking, the property is defined personwith the decorator @Input('alias'), to himself the property personinside the component it is used as person, but from the outside it is bound with [person]="expression"', this is because of the alias that we defined in @Input('person) person: Object. The alias is optional, if it does not have it, then it is bound with [person]="expression"

¿Cómo usar Expresiones en Interpolación y Property Binding de Angular?

How to use Expressions in Angular Interpolation and Property Binding?

Es importante saber que son las expresiones de plantillas, estas se utilizan en las interpolaciones y en el Enlazado de propiedades (Property Binding).

Cuando creas un componente, se utiliza HTML para crear su plantilla, esto es bueno, no tienes que aprender mucho de otra sintaxis para plantillas, aun así angular incorpora una pequeña sintaxis, que, aunque pueda ser nueva, es de gran utilidad y en esta publicación veremos expresiones de Javascript, interpolación y property binding en las plantillas de angular.

En las plantillas de angular cualquier elemento HTML es valido, a excepción de elementos como <html>, <head>, <base>, los cuales no tiene que estar en una plantilla de angular porque las plantillas de angular se “dibujan”dentro de la etiqueta <body>.

Otra excepción de suma importancia es la etiqueta <script>, esta etiqueta no se debe usar en las plantillas por el riesgo que se corre a ataques de XSS. Afortunadamente Angular previene XSS a través de sanitización, esta técnica convierte texto potencialmente ejecutable (código no deseado) a texto totalmente seguro.

¿Qué son las expresiones de plantillas?

Las expresiones de plantillas no son más que expresiones de Javascript normales con ciertas limitaciones. Veamos dos ejemplos:

En Interpolación se utiliza la sintaxis {{expresion}}:

<h3>2 + 2 es igual a {{2 + 2}}</h3>

El resultado es:

<h3>2 + 2 es igual a 4</h3>

En enlazado de propiedades se utiliza la sintaxis [propiedad]="expresion":

<h2 [hidden]="oculto">Ejemplo Enlazado of propiedades</h2>
<input [hidden]="oculto" value="Este es un input oculto">

En el ejemplo, debido que la propiedad ocultoes un boleano igual a true, el h2y el inputpermanecen ocultos. El mismo resultado se obtiene si usamos el comparador de igualdad:

<h2 [hidden]="oculto === true">Ejemplo Enlazado of propiedades</h2>
<input [hidden]="oculto === true" value="Este es un input oculto">

Vemos que dentro de la sintaxis de doble llaves existe una operación de suma y usamos el operador de igualdad en oculto === true, es decir, podemos utilizar Expresiones de Javascripten nuestras plantillas, aunque podemos utilizar expresiones de Javascript, no todo está permitido.

Las expresiones Javascript que producen efectos colaterales no se deben utilizar y NO están permitidas:

  • Las asignaciones (=,+=,-=, *=, etc)
  • El operator new
  • Las Expresiones consecutivas con ;either ,. Ejemplo {{1+1;2+2}}
  • Los operadores ++and --
  • Los operadores a nivel de bits |and &

Una característica importante en las expresiones de plantillas y que es distinta de las expresiones Javascript normales es que se pueden utilizar los siguientes operadores, pero ojo, no son operadores a nivel de bits:

  • Operador de Tuberia |
  • Operador de Guardia contra valores null o indefinidos, muy util en acceso a datos, ?.
  • Operador para vereficar referencia NO Nulla, !

Estos tres últimos operadores los veremos a detalle en otra publicación.

Interpolación

La interpolación nos permite obtener información en una aplicación, genera un enlacecon el origen de la información, es decir, si los datos de origen cambian, la interpolación actualiza ese cambio en la vista. En otras palabras, reacciona al cambio de datos.

Ejemplo, contenido de src/app/app.component.html:

<div>
  <h2>Hola {{name}}</h2>
  <h2>{{"cadena".split('').reverse().join('')}}</h2>
  <h2>{{false ? 'SI' : 'NO'}}</h2>
  <img src="{{logo}}">
  <h3>2 + 2 es igual a {{2 + 2}}</h3>
  <h2 [hidden]="oculto">Ejemplo Enlazado of propiedades</h2>
  <input [hidden]="oculto" value="Este es un input oculto">
  <h2 [hidden]="oculto === true">Ejemplo Enlazado of propiedades</h2>
  <input [hidden]="oculto === true" value="Este es un input oculto">
  <button (click)="cambiarNombre()">Voltear nombre</button>
</div>

Ejemplo en acción, revisa el archivo src/app/app.component.ts:

En el ejemplo tenemos un componente llamado my-appdefinido en el archivo src/app/app.component.ts, la plantilla del componente está definida en la propiedad templateUrldel decorador @component, carga un arhivo html externo.

Podemos ver que cuando damos clic en el botón Voltear textola propiedad namees cambiada invirtiendo los caracteres, se invierte los caracteres a través del método cambiarNombre. Y la reacción a este cambio esta enlazado con la interpolación {{nombre}}.

También se puede utilizar interpolación en atributos, en el ejemplo anterior para mostrar la imagen se utilizó:

<img src="{{logo}}">

Otro ejemplo:

<h3>2 + 2 es igual a {{2 + 2}}</h3>

¿De dónde se obtienen los valores de las expresiones de plantilla?

Normalmente los valores estan definidos en el componente como vimos en el anterior ejemplo, nameand logoestán definidos como miembros de la clase y en el constructor se les define su valor.

Pero también se puede definir propiedades en el contexto de la plantilla llamadas variables de plantillas, existen dos tipos de estas variables:

  1. Variables de input
  2. Variables de referencia

Variables de input

<div *ngFor="let person of gente">
  <h3>{{persona.nombre}}</h3>
</div>

persones la variable de input usada en la directiva *ngFor

Variables de referencia

<input #varReferencia value="Hola">
{{varReferencia.value}}

En este otro caso se ocupa el carácter #y luego el nombre de la variable de referencia que deseas crear. Con esto se puede utilizar la variable en interpolación como se ve en {{varReferencia.value}}.

La jerarquía o prioridad del valor final obtenido en las expresiones de plantillas es así:

  1. Variables en plantilla, input y de referencia.
  2. Directivas
  3. Componentes

Para ilustrar la prioridad, veamos el ejemplo, en la parte donde se utiliza la directiva *ngForpara recorrer el arreglo gente, ahí se define una variable de input person, y después se accede a la propiedad nombre de cada persona, podemos notar que debido a la jerarquía arriba listada se tomo primero en cuenta la variable de plantilla personantes que el miembro persondel componente. El miembro persones un string “soy otra persona”y nunca se imprime dentro de la lista de personas.

Cuando uses una expresión de plantilla, sigue estos consejos:

  1. Tu expresión debe ser rápida de ejecutar porque no va a ser la única en toda tu plantilla. Si es necesario, considera guardar los resultados de las expresiones que se van a utilizar varias veces en la plantilla y asi la expresion no se ejecuta varias veces.
  2. Utiliza el principio de mantener todo estúpidamente simple, no uses complejas expresiones porque genera mucho ruido en la plantilla, para expresiones más complejas utiliza la clase del componente, y aún ahí considera el principio KISS (Keep It Simple, Stupid).
  3. Investiga el funcionamiento de detección de cambios de angular para mantener tus expresiones lo más eficientes posibles, en una futura publicación explicaré la detección de cambios y como nos ayuda a mejorar el rendimiento de nuestro aplicación.
¿Cómo implementar angular material design en 5 minutos?

¿Cómo implementar angular material design en 5 minutos?

En este post explicaré como crear la estructura básica del diseño de una aplicación con Angular y Angular material design. Angular material design es una colección de componentes visuales optimizados para una mejor experiencia de usuario y creación de interfaces gráficas.

Utilizarlo nos ahorra mucho tiempo creando y diseñando nuestros propios componentes, por lo que es una buena opción para acelerar las creación de aplicaciones web.

Primero vamos a crear una nueva aplicación con **angular-cli:

$ ng new basic-angular-material

Luego ejecutamos nuestra aplicación con ng serve:

cd basic-angular-material && ng serve

Nuestra aplicación se debería de ver así:

Ahora instalamos el paquete de Angular material:

npm install --save @angular/material @angular/cdk

Si te das cuenta, ademas de instalar el paquete de @angular/material, también instalamos el paquete @angular/cdk, este ultimo en versiones anteriores formaba parte del paquete de @angular/material, pero es tan útil en la creación de componentes que ahora es independiente y al serlo permite que otros desarrolladores se beneficien para crear sus propios componentes al mero estilo de angular material.

Como muchos componentes de angular material realizan animaciones para una mejor experiencia de usuario, si queremos que nuestros componentes tengan animaciones debemos instalar el paquete @angular/animationse importar el modulo BrowserAnimationModuleen nuestra aplicación.

npm install --save @angular/animations

En el archivo src/app/app.module.tsimporta el modulo de animaciones, lineas 7 y 16, en el código de ejemplo:

Ahora debemos incluir un tema para nuestra app, es requerido para la correcta visualización de la mayoría de los componentes. Debemos incluir la siguiente linea de código en el archivo /src/styles.css.

@import “~@angular/material/prebuilt-themes/indigo-pink.css”;

Para que los componentes reaccionen bien a eventos de touch en pantallas, necesitamos de la librería HammerJS, varios componentes utilizan HammerJS así que lo podemos instalar con el siguiente comando:

npm install --save hammerjs

En el archivo /src/main.tsimportamos la librería en la linea 8.

Importamos los módulos de Angular Material que vayamos a utilizar. Vamos a modificar el archivo src/app/app.module.tspara que quede como el código de abajo. Otra opción es crear un modulo nuevo donde importemos los componentes de angular material que vayamos a utilizar. En este ejemplo importamos los componentes en la linea 9.

Con todo lo anterior listo, podemos empezar a utilizar los componentes, vamos a modificar el contenido por defecto del template del componente principal que nos genera la herramienta de linea de comandos de angular-cli.

Versión final:

Nuestra app debe verse así:

Y cuando damos click(o touch) en el menú:

Para que tu app se vea de esta manera, sin espacios en blanco a los lados y la barra lateral a toda la altura del navegador web, tu archivo src/styles.cssdebe ser así:

Demo de interfaz gráfica para creación de encuestas. Angular 5 y Angular material design 5:

Angular: Hooks del ciclo de vida de un componente

Angular: Hooks del ciclo de vida de un componente

Introducción a los hooks de angular

Antes de empezar a describir los Hooks del ciclo de vida de un componente en angular quiero citar la definición de Hooking de wikipedia:

El término Hooking abarca una gama de técnicas utilizadas para alterar o aumentar el comportamiento de un sistema operativo, aplicaciones o de otros componentes de software interceptando llamadas de función o mensajes o eventos pasados entre componentes de software. El código que maneja tales llamadas de función, eventos o mensajes interceptados se le llama un Hook.

En angular tenemos estos hooks, que son funciones ejecutadas en puntos claves del ciclo de vida de un componente.

Tanto los componentes y las directivas pueden ejecutar estas funciones. Pero las directivas no ejecutan las funciones de color azul, las cuales son específicas de la vista y contenido de componentes.

Dado que normalmente se utiliza typescript en Angular para obtener el código javascript final. Vamos a implementar estos métodos utilizando la interfaz que le corresponde a cada uno. Todas estas interfaces están en el modulo @angular/core.

Por ejemplo, para implementar el método ngOnInit, debemos importar la interfaz OnInit:

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

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éntica, por detrás realmente son funciones y herencia prototipal.

Todos los hooks del ciclo de vida de un componente en acción

Más abajo tenemos ejemplos de todos los hooks en acción y están basados en el código de la documentación oficial de Angular. Para ver mejor el código y el funcionamiento en tiempo real, siempre puedes presionar este botón:

Existe un componente de tipo ParentComponent y otro ChildComponent. He ParentComponent se encarga de crear el ChildComponent, de esta manera será más fácil poder ver en acción los hooks. También se encarga de bindear la propedad name y actualizarla para poder ver el hook ngOnChanges.

Como te darás cuenta viendo el archivo /app/all/child.component.ts, este componente implementa todas las interfaces de los hooks.

Si presionas el botón Crear ChildComponent, el mensaje #1 es en el constructor del componente, el constructor normalmente se utiliza para definir valores iniciales simples, nunca pongas mucha lógica en el constructor. Además podemos notar que la propiedad name en este punto, aun no esta definida.

Después tenemos el mensaje #2, este es del hook ngOnChanges, aquí es cuando ocurre el enlazado de las propiedades con la nueva instancia de nuestro ChildComponent, en este punto la propiedad name ahora si esta definida.

Luego tenemos la ejecución de ngOnInit, ngDoCheck, ngAfterContentInit, ngAfterContentChecked, ngAfterViewInit, ngAfterViewChecked en ese orden.

Ahora si presionas el botón Actualizar ChildComponent, se actualiza la propiedad name desde el ParentComponent, podemos ver como se ejecutan ngDoCheck, ngAfterContentChecked, ngAfterViewChecked, y otra vez ngOnChanges, ngDoCheck, ngAfterContentChecked y finalmente ngAfterViewChecked. Aquí podemos afirmar dos cosas:

  1. ngDoCheck, ngAfterContentChecked, ngAfterViewChecked se invocan en ese orden al detectar un cambio.
  2. También se ejecutan siempre tras un ngOnChanges pues se volvieron a ejecutar en ese mismo orden

Finalmente, si presionas el botón Destruir ChildComponent, los hooks ngDoCheck, ngAfterContentChecked, ngAfterViewChecked se vuelven a ejecutar, y además antes de destruir el componente totalmente, se ejecuta el hook ngOnDestroy.

Hooks ngOnChanges

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 ámbitos. La creación de una nueva instancia de clase, así que realmente constructor no es un hook de angular.

ngOnChanges solo revisa los cambios de una propiedad input, esto es, todas las propiedades a las que se les aplica el decorador @input([alias]), que es la manera en que bindeamos o enlazamos propiedades de un componente padre a otro hijo usando esta sintaxis [habilidad]="expresion". Este patrón, de padre a hijo, nos permite obtener un mejor rendimiento en la detección de cambios entre componentes. Es por eso que en el código de los ejemplos siempre se utiliza un componente padre y un componente hijo. Los cambios se actualizan de padre a hijo.

En el ejemplo tenemos dos propiedades enlazadas [persona]="persona"and [habilidad]="habilidad", si cambiamos el valor de habilidad se dispara la ejecución de ngOnChanges en el componente hijo, sin embargo la propiedad persona.name no dispara el hook, esto pasa porque la detección de cambios comprueba la referencia de la propiedad persona y lo que se modifico fue la propiedad persona.name, por lo que la referencia al objeto persona nunca cambió.

Cada vez que se detecta un cambio, ngOnChanges recibe un objeto, el cual contiene todas las propiedades que cambiaron, y cada una de estas es de tipo SimpleChange conteniendo el valor anterior previousValue y el valor actual currentValue.

ngOnChanges puede detectar cambios en más de una propiedad @Input(), por lo que es muy útil para realizar múltiples operaciones en la información, como definir valores predeterminados, validar datos, transformarlos antes de ser utilizados por el componente y/o antes de ser visualizados por el usuario.

Hooks ngOnInit y ngOnDestroy

Hook ngOnInit

El hook ngOnInit se ejecuta una sola vez después de ngOnChanges y no se vuelve a ejecutar en el resto de vida del componente.

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.

Dado que ngOnInit se ejecuta una sola vez después de ngOnChanges, es un buen lugar para:

  1. Agregar inicializaciones complejas.
    1. Como algún proceso asíncrono
    2. Obtener de un servicio datos para uso en el componente
    3. Subscribirse a un objeto para ser notificado de cambios, como los observables de RxJs, escuchar eventos del DOM
    4. Etcétera.
  2. Configuración de inicio debido a que ya se tienen los valores de las propiedades @inputs() gracias al hook ngOnChanges.

Cada vez que se presiona el botón Agregar Persona el hook ngOnInit se ejecuta, y cuando presionas el botón Resetear se ejecuta el hook ngOnDestroy justo antes de destruir a las elementos personas.

Hook ngOnDestroy

En este hook del ciclo de vida de un componente debería de ir todo el código de limpieza de un componente, justo antes de destruirlo.

También es un buen momento para notificar a otros componentes que va a ser destruido.

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ón.

Hook ngDoCheck

Este Hook del ciclo de vida de un componente se ejecuta después de cualquier ejecución de ngOnChange, y despues de ngOnInit, pero también se ejecuta después de eventos que pueden producir cambios, como por ejemplo el blur y focus de los inputs.

Dado que se ejecuta demasiadas veces, es muy costoso utilizar este hook, así que se debe usar con cuidado.

Para crear este ejemplo simplemente se implementó el método ngDoCheck en el componente hijo del código del hook ngOnChanges. Puedes probar cambiando datos y veras la ejecuciones de la función ngDoCheck.

ngOnChanges NO se ejecuta cuando modificamos una propiedad que no es un @input(), como pasa con la propiedad name of the object person, pero si se ejecuta el hook ngDoCheck. Puede ser útil para detectar cambios internos del componente, pero recuerda que tiene un costo alto de ejecución si deseas detectar muchas propiedades NO @inputsde tu componente.

También tenemos un elemento input dentro del componente hijo que esta enlazado a la propiedad [habilidad], esta es un @input, pero el cambio se realiza dentro del componente hijo, el componente padre no se entera de este cambio, por lo que aunque ngDoCheck se ejecuta, ngOnChanges no lo hace. Recuerda, la detección de cambios entre componentes se realiza de manera unidireccional, de padre a hijo.

Hooks AfterContentInit y AfterContentChecked

ngAfterContentInit se ejecuta una vez después del primer ngDoCheck y no se vuelve a ejecutar en todo el resto de vida del componente. ngAfterContentChecked se ejecuta después de cualquier ejecución de ngDoCheck en todo la vida del componente. Ambos se ejecutan después de que angular proyecta contenido externo en el componente.

Este contenido externo es proporcionado por el usuario del componente, similar a lo que se hace con el Light DOM de los componentes web nativos.

A lo anterior Angular le llama Proyección de contenido (Content projection), en AngularJS se conoce como transclusión. Para proyectar el contenido en el componente, se debe utilizar el tag <ng-content></ng-content>, esta etiqueta sería análoga a la etiqueta <slot> de los componenes web nativos.

Dentro del método ngAfterContentChecked se debe poder acceder al modelo o variables del contenido proyectado, para esto se debe utilizar el decorador @ContentChild([TipoDeHijo]), lo puedes ver en el archivo /app/after-content/after-content-child.component.ts.

// Para buscar contenido de tipo 'ChildComponent'(etiqueta lch-child)
@ContentChild(ChildComponent) contentChild: ChildComponent;

Hooks AfterViewInit y AfterViewChecked

Estos hooks son muy similares a ngAfterContentInit and ngAfterContentChecked, solo que se invocan después de ngAfterContentChecked, siguiendo el mismo patron, ngAfterViewInit se invoca una sola vez después del primer ngAfterContentChecked, y no se vuelve a invocar.

ngAfterViewChecked, se ejecuta después de cualquier invocación de ngAfterContentChecked, la diferencia entre ngAfterContentChecked es que estos hooks marcan el final de la composición de la vista de un componente y se define dentro del componente mismo, no desde el exterior, como vimos con ngAfterContentChecked and ng-content, por esta razón tiene similitud con el Shadow DOM de los componentes web nativos.

Si revisas el código del /app/after-view/after-view-child.component.ts, para acceder al modelo o variables de la vista interna (Vista de hijos o Child View), debemos utilizar el decorator @ViewChild([TipoDeHijo]):

// Para buscar view childs del tipo ChildComponent
@ViewChild(ChildComponent) viewChild: ChildComponent;

Otra cosa distinta a ngAfterContentChecked es que en ngAfterViewChecked no podemos cambiar el valor de inmediato de la propiedad comment enlazada con la vista, si lo haces, te saldrá un error como el siguiente:

Mistake: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: ''. Current value: 'Es un nombre muy grande'.

El error se debe que esté ultimo hook se ejecuta al final del ciclo de vida, entonces debe volver a pasar por ngOnChanges either ngDocheck para volver a renderizar la vista actualizada. La solución es actualizar la propiedad comment en una futura iteración del loop de Javascript. El setTimeout de this.logger.thick_then recibe una función, la cual se agrega a la cola de callbacks de javascript para ser escogida en una futura iteración del loop y esto le da el tiempo suficiente a Angular para actualizar la vista correctamente.

https://www.pensemosweb.com/javascript-event-loop-concurrencia-asincrono/
Loop de Javascript
en_USEN