Muchas veces el cliente te pide que muestres algún mensaje dependiendo de algún estado o lógica de negocio, te mostraré ciertas consideraciones antes de colocar un simple ngIf en el template.

Esta vez voy a ayudarme de un pequeño sitio ejemplo, para poder explicar los diversos puntos.

Necesidad

Trabajas en un banco, llegas un lunes todo facherito y tu cliente te pide que crees un formulario, donde el usuario pueda registrar el integrante de una empresa.

• El integrante de la empresa puede ser director, accionista o secretario.
• Si es director debes registrar el nombre y apellido.
• Si es secretario debes registrar el nombre y el apellido opcional.
• Si es accionista debes registrar el nombre, apellido (opcional) y sus acciones.

Pequeño Análisis

El único que tiene un campo de acciones es el rol de accionista, por lo tanto solo lo mostraré al seleccionar dicho rol. A partir de esto lo mejor es mostrar/ocultar ese campo dependiendo del rol seleccionado.

Para lograr esto utilizaré ngIf y detectaré el rol que tiene seleccionado el usuario en el momento.

Objetivo

Lo que voy a demostrar y mejorar es la eficiencia del uso de una variable en el template de Angular, responderé a las pregunta:

¿Cómo cambio el estado de una variable en tiempo de ejecución eficientemente?

Ejemplo #1

(Puede que no se vea en la versión para celular, te dejo el enlace)

Este puede ser un código legible y logra solucionar el problema, sobre todo en esta aplicación pequeña; ¿pero tienes idea de cuantas veces se ejecuta ese getter?

Revisa la consola y podrás ver la impresión del console.log que coloqué en el getter, son de 3 a 5 impresiones, imagina eso en una aplicación empresarial con múltiples condiciones.

Ejemplo #2

(Puede que no se vea en la versión para celular, te dejo el enlace)

Esta vez muestro como utilizar RxJS para mitigar el problema ejemplo anterior, utilizo un BehaviorSubject para escuchar/emitir el cambio del rol; puedes notar la diferencia en la consola.

Ejemplo #3

(Puede que no se vea en la versión para celular, te dejo el enlace)

Ya este último caso es aplicando ngxs, que podrías verlo como la forma avanzada del ejemplo anterior. Ngxs sigue el patrón CQRS que es muy similar a Redux, esto es perfecto si tienes una gran cantidad de estados variantes en tiempo de ejecución.

Ejemplo #4 (?

Hay otros casos en los cuales utilizas getters, trabajas con Input/Output y puedes detectar los cambios con ngOnChanges, les comparto un tweet:

Como menciona, deben ser utilizados con cuidado y si la necesidad surge.

Conclusión

Debes considerar el rendimiento de la aplicación al trabajar con estados que cambian en tiempo de ejecución, suelen ser un proceso muy costoso; ya que pueden provocar el renderizado constante de la pantalla.