Angular esencial

Controlar las propiedades gráficas con Renderer 2

Prueba ahora LinkedIn Learning sin cargo y sin compromiso.

Prueba gratis Mostrar modalidades de suscripción
En esta lección vamos a ir más allá de los elementos visuales de Renderer 2 y explotaremos al máximo su verdadero potencial para controlar el DOM de un documento sin afectar el encapsulamiento de los componentes de Angular.
05:17

Transcripción

En esta lección, vamos a explorar la interacción de los elementos del'dom'con elementos y acciones de Angular a través del módulo'renderer2'. Yo acá estoy trabajando una aplicación que está utilizando una implementación básica de'renderer2' y lo que estoy haciendo es que, básicamente, estoy asignando una clase cada vez que hago clic sobre alguno de los ítems de una lista. Vamos a revisar el código para explicarte cómo está sucediendo esto. Dentro de la plantilla de mi aplicación, yo estoy utilizando un evento'click' para activar el método 'mostrarActivo'. Acá estoy enviando un valor que es básicamente una variable local en la cual estoy trabajando a través de la sintaxis "gato" o "hashtag" o "pound" dentro de Angular, para asignar una variable local que va a capturar todas las propiedades del nodo activo, en este caso el'li', que despliega el nombre de un país y lo estamos inyectando dentro de mi método. Vamos a ver el código y vemos que, en este caso, el método'mostrarActivo' recibe esa propiedad y, como podemos notar, es un elemento de'html' y, en este caso, estamos llamando al módulo'renderer' para que le agregue una clase. El módulo'renderer'ya lo hemos instalado previamente, primero importándolo desde el "core" o el núcleo central de Angular y también declarándolo como una variable privada en el constructor de nuestro componente. En este caso, solo estamos utilizando una propiedad básica, que es'addClass', y'addClass'básicamente lo que hace es que agrega una clase, pero nosotros tenemos acceso total al elemento que estamos inyectando aquí. Eso significa que podemos modificar todas y cada una de sus propiedades de'html'. Por ejemplo, podemos agregar texto, podemos modificar sus propiedades, como escuchar eventos, agregarle atributos de'html', modificar el contenido, agregar nuevos nodos. Cualquier elemento que podamos realizar a través de una operación del'dom' de JavaScript lo podemos hacer con el módulo'renderer'. ¿Por qué lo hacemos así y no utilizando, por ejemplo, la sintaxis'document' punto 'getElementeById' y invocando un elemento a través de su identificador? Esto nos daría un resultado similar a lo que estamos trabajando con'renderer', sin embargo, estaremos rompiendo el encapsulamiento que tenemos dentro de Angular. Al trabajar únicamente con'renderer' e inyectar directamente los elementos según los vamos necesitando, estamos trabajando dentro de la estructura de Angular y también mantenemos el encapsulamiento de cada uno de los elementos de un componente. Así que, dicho eso, vamos a modificar nuestra aplicación para que tengamos un poco más de control sobre los elementos destacados. Por ejemplo, yo ahora quiero que en vez de asignar únicamente la clase'destacado', muestre solamente un elemento que tenga esa clase y si otra clase ya lo tiene, que lo remueva. Esto lo voy a hacer primero agregando una nueva propiedad. Voy a ir acá, al inicio de mi componente, y le voy a agregar un valor, que va a ser en este caso'antiguo', que va a ser de tipo'HTMLElement'. Vamos a ir a mi código, al método'mostrar Activo', y voy a ejecutar una validación. Voy a revisar que exista la propiedad 'this' punto'antiguo' que acabo de declarar y, en caso de que este valor exista, lo que voy a hacer es que voy a tomar –vamos a mejorar acá la sintaxis, vamos a poner un'if'– y vamos a evaluar que exista'this. antiguo'. Y en caso de que exista, yo voy a llamar al'renderer' y le voy a decir que tome ese valor'antiguo' y le elimine la clase'destacado'. Ahora vamos a asignar también el valor de'antiguo' y una vez que hayamos terminado todo el proceso de nuestro método, vamos a decir que'this. antiguo' es igual al elemento que estamos recibiendo. Básicamente, la lógica es que una vez que recibamos un elemento vamos a asignarle la clase y vamos a guardarlo dentro de una variable. La siguiente vez que lleguemos, vamos a evaluar si ese elemento ya existe, y que lo dejamos guardado en nuestra memoria, y le vamos a eliminar la clase para que solo exista uno con esa clase. Vamos a revisar este proceso dentro de mi aplicación y vemos que solamente se está ahora seleccionando un elemento. Y antes todos los que yo le hacía clic iban a mantener la clase 'destacado', pero ahora solamente el elemento que está activo va a mostrar esta clase.

Angular esencial

Aprende a crear aplicaciones con Angular y avanza poco a poco en su uso, empezando por la instalación, configuración y arquitectura hasta la publicación final de una aplicación.

4:27 horas (35 Videos)
Actualmente no hay comentarios.
 
Software:
Fecha de publicación:29/06/2017

Este curso video2brain está disponible como descarga y para ser visualizado online. ¡Pero no hace falta que decidas entre las dos opciones! Al comprar el curso, disfrutarás de ambas posibilidades.

La descarga te permite ver las lecciones sin estar conectado/a a internet y supone una navegación fácil y ágil entre capítulo y capítulo. Si vas a trabajar en diferentes ordenadores o si no quieres descargarte el curso completo, entra en la web con tus datos de acceso y disfruta directamente de tus vídeos online. Te deseamos que disfrutes de este curso y te resulte de mucha utilidad.

Estamos a tu disposición si tienes cualquier tipo de duda o pregunta.