Componentes en Angular - 101 (principiantes)

Intro a los componentes de Angular (2/4/5+) por learning-by-doing: aprende bindings, eventos, template ref. variables...

Created byEnrique Oriol

Last updated 11/2017

Spanish

What you'll learn

Crear componentes con mayor facilidad
Añadir inputs a los componentes
Añadir outputs (eventos) a los componentes
Personalizar los estilos del propio componente
Aprovechar el ciclo de vida de los componentes
Llamar a métodos de componentes hijos
Entender que son las "template reference variables"

Course content

2 sections • 11 lectures • 31m total length

Introducción0:53
Bienvenido a Componentes en Angular 101. A lo largo de este curso vas a aprender a usar los elementos básicos que conforman los componentes en Angular.

Decoradores @Input y @Output, Event emitters, ciclo de vida del componente, como añadir estilos al propio componente… En los próximos vídeos aprenderás todos estos conceptos, y alguno más ;)
Código fuente e instalación0:30

1 - Decorador component2:42
Repasarás brevemente la estructura de una app en Angular 2 / 4 y aprenderás qué es el decorador @Component de Angular y la estructura que tienen los componentes en esta plataforma.
2 - Nuevo componente2:10
Crearás tu primer componente en Angular, al más puro estilo "hello world".
3 - Progress bar component: Estilo del componente (:host)2:28
Crearás un componente que será una barra de progreso.

Además, en el camino aprenderás a aplicar estilos a tu propio componente sin necesidad de envolverlo en otro elemento, gracias al selector :host.
4 - Decorador @Input y property bindings2:00
Completarás tu componente "progress bar" aprendiendo a recibir valores de entrada (inputs) desde fuera, gracias al decorador @Input.

También aprenderás como asociar esos inputs de los componentes a datos variables, para que que el input se actualice de forma automática al actualizar la variable. Esto es lo que se conoce como property binding.
5 - Countdown component: ciclo de vida OnInit5:36
Crearás otro componente Angular que será capaz de realizar una cuenta atrás.

También aprenderás como funcionan los eventos de ciclo de vida de los componentes Angular, como en evento ngOnInit, que se llama tras iniciar el componente.
6 - Decorador @Output, EventEmitter e event bindings5:14
Aprenderás a sacar valores desde un componente hacia afuera, emitiendo eventos, lo que en Angular se conoce como event binding.

En el proceso, conocerás cómo funciona el decorador @Output y aprenderás a usar la clase EventEmitter.
7 - Usando métodos de componentes hijos vía template ref. variable4:34
Aprenderás cómo llamar a métodos y propiedades de un componente hijo desde el padre gracias a las template reference variables.
8 - Lifecycle hooks: ngOnChange y ngOnDestroy4:48
Conocerás nuevos eventos de ciclo de vida de los componentes en Angular:

ngOnChange, para detectar cuando han cambiado los valores de entrada
ngOnDestroy, para detectar cuando se destruye el componente
9 - Notas finales0:33
Sugerencias finales.

Si quieres dominar los componentes de Angular (Angular 2 y Angular 4) como un profesional, organizarlos correctamente y de forma escalable y ser capaz de enfrentarte a cualquier reto que te presenten tus componentes, te recomiendo encarecidamente que sigas mi curso: https://www.udemy.com/componentes-angular-pro/

Requirements

Conocimientos básicos de Angular 2 o 4 (haber hecho uno o dos tutoriales)
Conocimientos básicos de Javascript ES6 (clases y arrow functions)
Conocimientos básicos de TypeScript
Conocimientos básicos de programación web (HTML, CSS y JS)
Uso básico de GIT

Description

Ponte al día con los componentes de Angular (Angular v4, válido también para Angular v2).

Refresca los conceptos básicos creando 2 componentes desde cero. En pocos vídeos te pondrás al día para enfrentarte a una entrevista de trabajo o para poder afrontar cursos más avanzados.

Este microcurso está orientado a repasar los fundamentos de los componentes de Angular. A través de los vídeos y siguiendo una metodología learning-by-doing, aprenderás a usar:

El Decorador Component
El Decorador Input y property binding
El Decorador Output
Los EventEmitter y los Event Bindings
Cómo aplicar estilos a tu componente (selector de pseudo-clase :host)
Cómo llamar métodos de componentes hijos
Cómo usar las Template Reference Variables
Entender los eventos del ciclo de vida del componente

Este curso te servirá como punto de partida para entender mejor el funcionamiento de una de las piezas fundamentales de Angular: los componentes. A partir de aquí te será más fácil profundizar en el aprendizaje a través de otros cursos o material online disponible.

Los requisitos para tomar este curso es que tengas unas nociones básicas de Angular (Angular 2 o Angular), dado que hay conceptos muy básicos que se dan por entendidos. Eso incluye también nociones elementales de ES6, Typescript, HTML y CSS.

Si has hecho un par de tutoriales en Angular 2, deberías estar preparado para hacer este curso.

Who this course is for:

Principiantes en Angular que quieran entender los principios de los componentes

Componentes en Angular - 101 (principiantes)

What you'll learn

Explore related topics

Course content

Intro2 lectures • 1min

Componentes Angular 1019 lectures • 30min

Requirements

Description

Who this course is for: