Angular esencial

Insertar y controlar Renderer 2

Prueba ahora LinkedIn Learning sin cargo y sin compromiso.

Prueba gratis Mostrar modalidades de suscripción
Render 2 es un nuevo módulo de Angular 4, es una versión totalmente renovada del módulo Renderer que permite controlar a fondo las propiedades de cualquier elemento en pantalla. En esta lección aprenderemos a importarlo y controlarlo desde un componente.
07:18

Transcripción

En esta lección, vamos a aprender cómo manipular los elementos del'dom' utilizando Angular 4. Acá estoy trabajando en una aplicación en la cual tengo algún código ya avanzado y estoy dentro del componente principal, donde he definido una variable llamada'países' que va a ser de tipo'array', en el cual inyecto elementos de tipo'object'. En el constructor, he asignado los valores que va a tener esta variable llamada'paises', donde se encuentra el'array' y los respectivos objetos que lo pueblan. También he ido a la plantilla, en este caso'app. component. html', y le he incluido una lista donde estoy definiendo a través de la directiva'ngFor' una iteración por cada uno de los elementos que se encuentran en esta lista, donde me está desplegando el nombre del país correspondiente. Finalmente, también he modificado los archivos'css' para desplegar algunas clases específicas de la lista o el componente'li' y también la etiqueta 'span'. Esto es únicamente para desplegar los elementos básicos de mi aplicación. Ahora vamos a ver el código cómo se está desplegando en este momento y cómo funciona en mi aplicación. Por ahora, yo tengo la lista que está desplegando los valores que tengo asignados dentro de la aplicación y vemos que dentro de cada uno de estos elementos en este caso la etiqueta'li' se están asignando las propiedades que yo ya he escrito dentro de mi archivo'css'. Ahora nosotros podemos, si quisiéramos modificar alguna parte de esta aplicación, podemos utilizar diferentes métodos y diferentes técnicas. Por ejemplo podemos utilizar las directivas'ngClass' o'ngStyle' para agregar propiedades de estilos. Sin embargo, estas dos directivas se nos quedan cortas, porque únicamente van a trabajar a nivel de'css'. Para hacer elementos un poco más complejos, Angular nos permite trabajar con un módulo especial llamado'renderer'. Te voy a mostrar cómo instalarlo. Vamos a buscar dentro de la aplicación el archivo que contiene el componente en el cual vamos a trabajar el'renderer'. Vamos a buscar dentro del'import' –generalmente vamos a tener el módulo'component'– y acá vamos a agregar el módulo'renderer', y específicamente vamos agregar el'renderer2'. En Angular 2, se introdujo el módulo'renderer', que nos va a permitir a nosotros modificar el'dom'o el Document Object Model. Básicamente, el contenido que se encuentra visible dentro del navegador. En Angular 4, se mejoró este'renderer' y, para no romper el código, se le asignó el nombre'renderer2'. Así que es importante que te asegures de que estás utilizando la versión 2 cuando trabajas con Angular 4. Una vez que lo incluimos, vamos a ir al constructor y vamos a asignar una variable privada. Dentro de los paréntesis, vamos a agregar 'private', en este caso le voy a poner el nombre'renderer', y vamos a definir que esta variable privada va a ser de tipo 'renderer2'. Ahora ya tenemos acceso a todos los métodos correspondientes a esta clase. Volvemos al código de la plantilla y en este caso yo le voy a asignar un evento 'click'. Por ejemplo, si yo quisiera que se muestre algún cambio cuando hacemos clic sobre este'li', le voy a asignar el elemento'click' entre paréntesis, y ponemos: igual a 'mostrarActivo', ponemos paréntesis, porque va a ser un método, y cierro acá con comillas. Listo. Ahora cada vez que yo haga clic sobre algún elemento de la lista, en mi aplicación vamos a llamar el método'mostrarActivo'. Voy a copiar este nombre y voy a crear el método correspondiente dentro de'component. ts', tenemos acá'mostrarActivo' y ahora ya está disponible el método. Ahora este método necesita aplicar el'renderer'que ya tenemos importado. Para poder aplicar el'renderer', nosotros vamos a necesitar tener acceso al'html' o específicamente al'dom'. Así que volvemos a la plantilla. Para tener acceso sobre cualquier elemento que tenemos en la plantilla, tenemos un método muy sencillo y es que, simplemente, podemos agregar el signo de gato o "michi" o "hastag", depende de cómo le digas. Podemos definir acá un ítem, en este caso le voy a poner esta variable privada, que se va a llamar 'mi Item'. Esto va a convertir este elemento completo o la instancia de él en una variable local y yo voy a tomar esta variable y la voy a inyectar dentro del método en el que estoy trabajando. Ahora voy a tener acceso a este nodo del'dom'. Volvemos otra vez al código, vamos a asignar una propiedad para el valor que estamos importando. Por ahora, yo le voy a llamar elemento y vamos a definir lo que sea de tipo 'HTML Element'. Ahora que tenemos un elemento de tipo'html', podemos controlarlo utilizando el'renderer'. Para mantener este ejemplo simple, yo lo que voy a hacer es que cada vez que haga clic en'mostrarActivo', yo voy a llamar a'this' punto 'renderer', que se encuentra acá como una variable privada, y le voy a asignar una propiedad, en este caso voy a asignarle'addClass', y voy a definir a quién le quiero asignar la clase. Voy a llamar a elemento y le voy a marcar la clase que quiero que tenga, en este caso va a ser 'destacado'. Guardamos y vamos a buscar dentro del'css' y vamos a asignar esta clase llamada'destacado'. Yo tengo algunas propiedades predefinidas y voy a agregar una clase llamada'destacado', que básicamente va a poner un color de fondo diferente y algunas propiedades extra. Revisamos ahora el código y vemos que, al hacer clic sobre alguno de estos elementos ya estoy asignando una clase. Esto es una de las formas que nosotros tenemos de manipular y acceder a los diferentes elementos del'dom'del documento que se encuentra visible dentro del navegador, a través de Angular en conjunto con el módulo'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.