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

Angular esencial

Métodos, propiedades y plantillas

¡Prueba gratis durante 10 días

nuestros 1290 cursos !

Prueba gratis Mostrar modalidades de suscripción
Un componente envía, procesa y recibe información que puede desplegarse gráficamente en el navegador, para lo cual utilizamos diferentes elementos de uso común. En esta lección aprenderemos las partes fundamentales para comunicar una aplicación con sus componentes
05:58

Transcripción

Vamos ahora a aprender cómo interactuar entre los componentes, las plantillas y trabajar con propiedades y métodos. Yo acá estoy trabajando en un proyecto que acabo de crear utilizando la línea de comando de Angular. Voy a buscar la carpeta'Src' y dentro de ella voy a buscar el componente principal llamado'app . component. ts'. Este es el componente raíz a partir del cual vamos a seguir creando toda nuestra aplicación. En este caso, quiero que notes que aparece una propiedad llamada'title' y aparece un valor llamado'app works! ' Esta información se está desplegando dentro de una plantilla. Podemos localizar la plantilla a partir del valor que aparece entre la propia'templateUrl', en este caso'component. html'. Vamos a abrirlo. En este caso lo vamos a abrir dentro del editor para que podamos ver ambos archivos y vemos que esta propiedad se está desplegando a través de unas llaves. En Angular, nosotros utilizamos esta sintaxis para desplegar valores. Por ejemplo, si yo creo acá un valor llamado'color' y le asigno la propiedad'red' –y ya que estoy trabajando en Typescript, lo ideal sería que además le incluya el tipo de dato, que en este caso es'String', una cadena de texto–, vamos a guardar y yo voy a desplegar ese valor. Para hacerlo, simplemente llamo: dos llaves e incluyo el valor, en este caso 'color'. Vamos a guardar y yo acá estoy trabajando con el servidor de Angular. En este caso ya lo he ejecutado utilizando el comando'ng serve' y cualquier cambio que yo haga se va a desplegar en el navegador. Vamos a examinar el navegador y vemos que me aparece el mensaje original y el valor que yo acabo de incluir. Ahora, nosotros podemos incluir valores para texto, pero no solamente esto, podemos utilizarlo prácticamente para cualquier cosa. Por ejemplo, voy a volver acá a la aplicación y en vez de desplegar este mensaje como texto, lo vamos a desplegar dentro de una directiva. Esta directiva va a ser 'ng Style' En este caso, yo voy a utilizar la directiva'ngStyle'. Quiero que notes la sintaxis que estoy trabajando acá, que es entre paréntesis cuadrados, incluyo la directiva'ngStyle' y acá me está haciendo el autocompletado de código. Mi editor, que en este caso es Visual Studio Code, me está mostrando acá las propiedades. En este caso, yo voy a poner'back ground', que es una propiedad de CSS, y le voy a incluir el valor 'color'. Voy a borrar las otras dos propiedades que aparecen acá y vamos a cerrar acá con comillas. Vamos a revisar que la sintaxis esté correcta. Parece que todo está bien y vamos a observar cuál es el cambio. En este caso deberíamos tener un titular de color rojo que está desplegándose gracias a que 'ngStyle'está inyectando un CSS y me lo está mostrando acá gracias a que he definido la propiedad'bakcground color'y en este caso 'rojo'. Ahora podemos hacer un poco más avanzado este componente y le vamos a agregar un método. En este caso, yo voy a utilizar el método llamado 'generar Random', que me va a devolver una cadena de texto, en este caso va a ser de tipo 'String'. Y en este caso vamos a incluir un'return' que va a ser una fórmula de JavaScript donde vamos a utilizar'Math. floor', que nos va a devolver un entero a partir del cálculo que vamos a hacer de'random' que nos muestra un número aleatorio. Y en este caso estoy poniendo 255, que es un valor que nos va a permitir a nosotros mostrar un rango de colores hasta 255 para trabajar con colores hexadecimales –ya te voy a mostrar por qué– y en este caso estoy convirtiéndolo a este formato hexadecimal. Esto me va a devolver un valor'random'que puede ser entre números del 1 al 6 y letras de la A a la F. Ahora, teniendo eso, también yo voy a crear –para ser más rápido, este ejemplo lo voy a copiar directamente–, voy a crear otro método que se va a llamar 'colorHex'. En este caso también me va a devolver una cadena de texto y lo que voy a hacer es que le voy a agregar el signo de "gato" o "hastag" o "michi", como le digan en tu país, y le voy a agregar tres veces este valor 'random'. En este caso, estoy agregando un valor hexadecimal y básicamente lo que voy a crear es un color hexadecimal aleatorio. Vamos a copiar el nombre de este método, que en este caso es'colorHex', y le voy a reemplazar acá. Ahora, en vez de mostrar el valor estático'color', que en este caso era'red'o'rojo', voy a mostrar un valor hexadecimal, aleatorio, que cada vez que se despliegue mi aplicación me va a mostrar un color diferente. Vamos a ver el resultado final. Podemos observar acá que cada vez que yo refresco, me aparece un valor distinto. Lo que está pasando es que Angular está inyectando estilos. Y si revisamos acá, dentro del resultado final, vemos que se está generando un color RGB completamente aleatorio gracias al método que yo estoy invocando desde mi componente. Esta es la forma en que nosotros podemos interactuar entre los componentes y las plantillas y podemos ir generando una cantidad indefinida de métodos y propiedades para que interactúen con nuestros componentes y de esta forma ir generando nuestras aplicaciones.

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:
Formadores:
Fecha de publicación:29/06/2017
Duración:4:27 horas (35 Videos)

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.