Vamos a actualizar nuestra Política de privacidad próximamente. Te recomendamos consultar el avance.

Angular esencial

Controlar el DOM con Renderer 2

¡Prueba gratis durante 10 días

nuestros 1288 cursos !

Prueba gratis Mostrar modalidades de suscripción
En esta lección vamos a administrar propiedades gráficas dentro de un componente utilizando el módulo Renderer 2 para seleccionar y modificar los valores del atributo class de un nodo HTML a través del evento clic en una lista de Angular.
11:22

Transcripción

En esta lección, vamos a aprender cómo controlar el Document Object Model utilizando el módulo'renderer2'. Acá estoy trabajando en una aplicación que está utilizando este módulo y básicamente estoy asignando una clase al hacer un clic sobre cualquiera de los elementos que aparecen acá en pantalla. Por ejemplo, al hacer clic sobre cualquier elemento, me va a asignar una clase que tiene una animación y una propiedad gráfica. Vamos a revisar el código y vamos a ver que dentro de esta aplicación tenemos acá en el componente donde estamos utilizando, estamos importando primero que todo 'renderer2', estamos definiéndolo dentro del constructor como una variable privada y, en este caso, estamos acá, dentro de la lista, y al hacer clic estamos llamando un método llamado'mostrarActivo' donde estamos insertando acá un valor. Este valor es básicamente una variable local que estamos igualando a cada uno de los ítems, unas instancias que están generando dentro de nuestra lista, lo que significa que el elemento de lista lo estamos inyectando acá y dentro de nuestro componente lo estamos recibiendo acá con el nombre'elemento' de tipo'HTML'. Esto es un tipo de dato que básicamente nos permite manipular este elemento como si fuera un elemento'html', tal como lo es. Y en este caso estamos asignando o eliminando una clase, en este caso llamada'antigua'. Vamos a llevar este ejemplo un poco más lejos y vamos a trabajar con el'dom'. Veamos primero qué es el'dom'. Revisemos el documento en el que estamos trabajando y vemos que cada uno de estos elementos se está desplegando en pantalla. Pero si examinamos a través de clic derecho, Inspect –o Inspeccionar, dependiendo del navegador en el que estés–, vamos a examinar cada uno de estos elementos. Vemos que tenemos acá una lista con una etiqueta 'li'. Y si revisamos acá, vemos las propiedades en'css', pero también tenemos acceso a examinar algunos elementos adicionales. Por ejemplo, podemos revisar las propiedades. Y aquí es donde se vuelve un poco más complejo el'html'. Recordemos que'html'no es solamente el texto que nosotros generamos dentro del editor, sino que dentro del navegador se convierte en una serie de diferentes propiedades. El Document Object Model es básicamente el conjunto de todos estos nodos alineados dentro de, hablemos de un árbol donde se encuentran todos los elementos interconectados. Cada uno de estos elementos está asignado con diferentes propiedades. Por ejemplo, si examinamos este'li', vamos a ver que tenemos acá una serie de diferentes propiedades. Por ejemplo, si examinamos este elemento, vamos a ver que tenemos una propiedad llamada'innerHTML' en la cual se define el texto HTML que se está desplegando en pantalla. Tenemos una serie de diferentes propiedades, incluso tenemos acá los diferentes eventos que asignan y que interactúan con este nodo que se encuentra dentro del'html'. Esto es el Document Object Model y el de sus propiedades. Ahora, nosotros podemos modificarlas. Por ejemplo, acá nosotros tenemos una clase, pero yo no sólo puedo asignar clases, puedo asignar muchas más cosas. Por ejemplo, acá en el código, voy a venir dentro de mi código y le voy a asignar dentro de'this' punto'renderer', que es el módulo que va a tener acceso a mi elemento'htm, en este caso le voy a asignar una propiedad llamada'setAttribute' y voy a crear un atributo dentro del elemento que estoy recibiendo acá, en este caso'elemento'. Y les voy a decir que cuando hagamos clic y le asignemos una clase, le insertemos también un elemento. El elemento lo voy a crear en este momento y se va a llamar 'data'guion 'seleccionado'. Puede ser cualquier atributo que nosotros queramos insertar dentro de este nodo, y en este caso le voy a asignar que valor sea'true'. Voy a guardar, vamos a ver el resultado, que aunque no va a ser visible, sí va a estar dentro del Documento Object Model. Vamos a ver que al hacer clic, en este caso, por ejemplo, sobre México, vamos a ver que aparece la clase'destacado', pero también le he asignado un atributo llamado'data-seleccionado' con el valor'true'. Ahora este elemento permanece dentro de mi nodo y se vuelve parte del'html'. ¿Qué podemos hacer con esto? Bueno, podemos, por ejemplo, asignar valores. Podemos crear condicionales dentro de esto o, para hacerlo un poco más sencillo, dentro del'css'también podemos trabajar un poco sobre esto. Y en este caso, yo voy a crear acá una clase de'css'donde digo que a cualquier'li' que tenga la propiedad'data- seleccionado'igual a'true'y que no sea en este momento con la clase'destacado', que es la que se está asignando al hacer clic, entonces que en este caso le ponga un color de fondo gris, y vamos a ver qué es lo que sucede. Vemos que al hacer clic, nosotros le estamos asignando la clase'destacado' y que permanece este atributo'data-seleccionado'. Si nos vamos a otra parte, vamos a ver que permanece'data-seleccionado', se elimina la clase y podemos asignar incluso un'css'. Esto, como te digo, es simplemente una de las propiedades que nos permite hacer este'renderer 2', pero podemos hacer mucho más. Por ejemplo, puedo agregar el elemento de'html'o modificar el texto de diferentes nodos que se encuentran ahí. Tengo control total sobre el'html'. Vamos a seguir modificando un poco este ejercicio. Por ejemplo, yo voy a crear acá una nueva variable, en este caso la voy a llamar'nuevoElemento'. En este'nuevoElemento', voy a utilizar a'renderer' y voy a crear de la nada una etiqueta 'span'. Esta etiqueta'span', yo voy a asignarle una propiedad, en este caso voy a utilizar a'this. renderer. setProperty', tal como utilicé antes'setAttribute'. En este caso, 'setProperty'agrega una propiedad o la modifica. Y voy a decirle que a este nuevo elemento le modifique la propiedad'innerHTML', como te la acabo de mostrar hace unos minutos, y en este caso voy a asignarle un "emoji" que va a ser el de "check" o de visto. Ahora, una vez que ya haya asignado un valor a esta etiqueta que se encuentra todavía disponible en memoria, yo la voy a asignar dentro de mi html. Esto lo voy a hacer con'this'punto 'renderer' punto 'appendChild'. Y en este caso, esto lo que va a hacer es que va a agregar un elemento, elemento que vamos a agregar, que es el que acabamos de crear. Así que vamos a buscar en donde estamos trabajando, que en este caso es el elemento html, y le vamos a agregar'nuevo Elemento', que es la nueva etiqueta 'span'. Esto va a ocurrir cuando hagamos clic. Vamos a ver el resultado que, ahora, cuando hacemos clic, segrega una nueva etiqueta. Si vuelvo a hacer clic, se vuelve a agregar y también permanece con la propiedad que yo le acabo de asignar, que también le está, a través de los'css', asignando un color, en este caso gris. Vamos a hacer una última variación dentro del código y vemos que acá tenemos un botón. Veamos este código que está generando este botón y vemos que este botón es un'input'de tipo botón. En este caso, tiene la propiedad'disabled', que lo va a deshabilitar, no se puede hacer clic ahí. Y tengo un valor que dice "No puedes viajar aún". Yo voy a interactuar con este elemento que se encuentra en pantalla para enviarlo dentro de este botón y que al hacer clic en él, cuando tengamos un valor almacenado dentro de nuestra lista, nos permita viajar cuando seleccionemos cualquiera de los países que se encuentran en la lista. Lo primero que necesito hacer es definir una variable local para este elemento, en este caso vamos a definirlo como'viajeBoton'. Y ahora esta variable va a encapsular por completo este elemento de'html'. Lo vamos a insertar como un parámetro dentro de este método. Y ahora, al hacer clic, vamos a inyectar este elemento de lista, pero también el botón, y vamos a poderlo procesar. Para procesarlo, yo voy a necesitar también definir, dentro de mi método, un botón, así que vamos a definir que el botón sea de tipo 'HTM L Element'. Vamos a definir acá 'HTMLElement' y tenemos, entonces, que 'boton' se va a comportar exactamente igual a'elemento', pero en este caso vamos a estar asignando el botón de'html'que tenemos en nuestra plantilla. Ahora, una vez que ya tenemos control sobre este elemento, le podemos asignar propiedades. Por ejemplo, en este caso vamos a utilizar acá 'this'punto'renderer' y le vamos a asignar un'set Attribute'. Y vamos a definir un atributo, en este caso se lo vamos a definir a 'boton'. Y vamos a asignar que el atributo'value' sea igual a un texto, que en este caso me va a decir que ya puedo viajar. Listo. Guardamos y vamos a ver que dentro del html, dentro del nodo de botón tenemos también una propiedad dentro del'input', tenemos una propiedad llamada 'value' que dice "No puedes viajar aun". Y al hacer clic sobre cualquier elemento, la estamos controlando y dice que ya podemos viajar. Sin embargo, todavía estamos asignando la propiedad llamada'disabled', que no nos permite trabajar con ese botón. La última parte de nuestro ejercicio es modificar esto. Esto lo vamos a hacer también llamando a'this renderer' y en este caso vamos a definir la propiedad'removeAttribute', dentro de'boton' la propiedad'disabled'. Esto va a eliminar la propiedad'disabled'y vamos a poder hacer clic sobre ese botón al hacer clic sobre cualquiera de los elementos de la lista. Como ves, ya puedo hacer clic sobre este botón y así yo estoy interactuando con los diferentes elementos del documento dentro del modelo del'dom' a través de'renderer2'.

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.