Componentes en Angular - nivel PRO (Angular 2/4/5/6/7+)

Name: Componentes en Angular - nivel PRO (Angular 2/4/5/6/7+)
Rating: 4.4 (939 reviews)

Domina los componentes de Angular como un PRO y crea componentes técnicamente brillantes

Created byEnrique Oriol

Last updated 8/2019

Spanish

Spanish [Auto],

What you'll learn

Crear componentes en Angular de la misma calidad que los de frameworks angular como Ionic o Angular Material
Organizar correctamente y de forma escalable los compoentes de tu aplicación

Course content

4 sections • 38 lectures • 2h 50m total length

Introducción1:59
Bienvenido a Componentes en Angular - nivel PRO. A lo largo de este curso vas a aprender a usar los componentes de Angular 2 / 4 como un profesional.

Inputs, Outputs, EventEmitters, template reference variables, ciclos de vida, estilos, transclusión, componentes dinámicos, arquitectura de componentes, estrategias de detección de cambios…
En los próximos vídeos aprenderás todos estos conceptos y muchos 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 - Creando un 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

Componentes stateful VS stateless2:28
Código fuente e instalación0:31
Componentes presentacionales (stateless)5:07
Contenedores (componentes stateful)4:24
Moviendo lógica a un servicio (Single Responsibility Principle)5:54
Providers a nivel de componente o de módulo2:47
Observables & Subjects: Emitiendo eventos desde un servicio6:57
BehaviourSubject & AsyncPipe4:34
Buenas prácticas - Getters, o como evitar lógica en los templates4:04
Estrategia de detección de cambios por defecto1:29
Estrategia de detección de cambios onPush5:00
Encapsulado de estilos del componente (shadow DOM)8:35

Proyección de contenido con ng-content4:33
ng-content y los projection slots5:32
ng-content, estrategias Don't Repeat Yourself (DRY)4:33
Inyección del componente padre8:32
@ContentChild: accediendo al contenido proyectado7:56
@ContentChildren & QueryLists: accediendo al contenido proyectado7:37
@ViewChild: accediendo al componente hijo6:09
@ViewChildren & QueryLists: accediendo a los hijos7:28
ElementRef y Native element5:41
Renderer: Renderizado "platform agnostic"3:50
ng-container, agrupando elementos sin añadir un wrapper2:00
ng-template, repitiendo contenido en el DOM5:46
Creando componentes dinámicos7:50
Componentes dinámicos: inputs y outputs4:38
Componentes dinámicos: creación y destrucción3:40
Notas finales0:45

Requirements

Conocimientos básicos de Angular (angular 2 o 4): haber hecho un par de tutoriales
Conocimientos básicos de TypeScript (lo que habrás aprendido con Angular)
Conocimientos básicos de Javascript ES6 (clases y arrow functions)
Conocimientos básicos de HTML
Conocimientos básicos de CSS
Conocimientos elementales de GIT

Description

¡Únete al curso más avanzado de Udemy sobre componentes en Angular y empieza YA a mejorar tus habilidades!

Este curso te llevará a través de toda la complejidad de los componentes de Angular, comenzando por el nivel más básico, y llegando a los casos más avanzados.

Desde el uso de Inputs y Outputs, hasta la comunicación entre componentes transcluídos o la generación dinámica de componentes. Este curso cubre todos los aspectos relacionados con los componentes que necesitas aprender para dominar Angular como profesional.

Algunos de los temas que vas a aprender en este curso son:

Ciclos de vida de Angular
Comunicación entre componentes padres e hijos en todas las direcciones
Template Reference Variables
Arquitectura de componentes
Observables y AsyncPipe
Encapsulación de estilos del componente
Estrategias de detección de cambios
Proyección de contenido (transclusión)
Renderizado "platform agnostic"
Componentes dinámicos

Además, si te quedas atascado, te beneficiarás de un soporte amigable y rápido, vía comunicación directa y a través del foro ;)

Angular es uno de los frameworks frontend modernos más potentes y eficientes que puedes aprender actualmente. Te permite construir webs complejas con facilidad y obteniendo unos resultados increíbles. Aprende ahora todo lo que necesitas para desarrollar webs potentes en Angular con todas las garantías.

Estas son algunas de las opiniones de mis alumnos en otros cursos:

- Excelente todo

- 100% Recomendado, material didáctico muy bien explicado, si realmente quieres hacer app profesionales con este framework y este curso lo puedes lograr.

- Porque es la primera vez que veo un curso que explica cada cosa en profundidad.

- Excelente!!

- Explica de forma simple, concreta y precisa los fundamentos de Ionic. Y eso permite la comprensión de los conceptos de esta herramienta y su aprovechamiento futuro.

- Me encanta este curso, los conceptos están explicados muy claros y en todo momento sabes para que vas a usar cada cosa.

- El tutor se hace entender muy fácilmente, y el curso lo esta llevando muy bien

- Muy bien explicado, con detalles.

- muy claro y buenos lo ejemplos

Who this course is for:

Cualquiera que tenga una idea básica de Angular y quiera profundizar

Componentes en Angular - nivel PRO (Angular 2/4/5/6/7+)

What you'll learn

Explore related topics

Course content

Introducción2 lectures • 2min

Nivel básico8 lectures • 30min

Nivel intermedio12 lectures • 52min

Nivel Avanzado16 lectures • 1hr 27min

Requirements

Description

Who this course is for: