Conociendo las directivas

Curso de Angular 17: Creación de Aplicaciones Web

Introducción a Angular y Fundamentos

Aprende Angular 17

Creando tu primer proyecto en Angular

Implementando estilos

Mostrando elementos

Property Binding en Angular

Event Binding: click y doble click

Event binding: keydown

Modelo de reactividad con Signals

Creando un Signal en Angular

Estructuras de control en Angular

Directivas de control

Uso de ngFor

ngFor para objetos

Update Tasks

Uso de ngIf

Uso de ngSwitch y ngSwitchDefault

Controlando un input

Manejo de formularios en Angular

Alistando tu aplicación para producción

Estilos al modo Angular

Clases en Angular

Editing mode

Estados compuestos con computed

Usando effect para localStorage

Uso de ngbuild

Despliegue con Firebase Hosting

Nueva sintaxis en Angular

Directivas @For, @switch

Migrando a la nueva sintaxis de Angular v17

Componentes Reutilizables y Comunicación

Construyendo un e-commerce en Angular

Componentes en Angular

Mostrando los componentes

Angular DevTools

Uso de Inputs en Angular

Uso de Outputs en Angular

Componentes para Producto

Ciclo de vida de los componentes

Ciclo de vida de componentes

Ciclo de vida de componentes: ngOnChanges

Ciclo de vida de componentes: ngOnInit

Detectando cambios en los inputs

Evitando memory leaks con ngDestroy

Audio player con ngAfterViewInit

Creando la página "about us" o "conócenos"

Mejorando la interfaz del producto

Creando componente de productos

Creando el Header

Creando el carrito de compras

Comunicación padre e hijo

Calculando el total con ngOnChanges

El problema del prop drilling

Reactividad con signals en servicios

Entendiendo la inyección de dependencias

Integración y Datos

Obteniendo datos una REST API

Importaciones cortas en Typescript

Pipes en Angular

Construyendo tu propio pipe

Utilizando librerías de JavaScript en Angular

Conociendo las directivas

Deployando un proyecto en Vercel

Enrutamiento y Navegación

Ruta 404

Uso del RouterLink

Vistas anidadas

Uso del RouterLinkActive

Detalle de cada producto

Obteniendo datos del producto

Galería de imagenes

Detalle de la galería

Perfeccionando tu e-commerce

Mostrando categorias desde la API

Url Params

LazyLoading y Code Splitting

Aplicando LazyLoading

Prefetching

Usando la nueva sintaxis de Angular 17

Lanzando tu aplicación a producción

No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

Si ya tienes una cuenta,

Recursos

Aportes 5

Preguntas 0

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

hace 7 meses

Un ejemplo practico de directiva puede ser una validación de campos de acuerdo al uso de los validators de los formcontrol y en esta directiva mapear los diferentes tipos de validaciones que podemos tener, es decir: required, max-lenght, min-lenght, email, etc. Y en la directiva enviarle a los inputs que tengan un formcontrol y cumpla con laguno de los errores le agregué a ese input un span, un p, o un small, con el mensaje que sea de acuerdo al error tipado por el usuario.

Luis Angel Castillo Vega

hace 9 meses

hoja que lo explicara con algo que de verdad se ocupe y tenga una funcion en esta app. asi solo para mostrar que se pinta de rojo pues no le encuentro sentido...

ANDRES ALFONSO MIRA MEJIA

hace 10 meses

✅

Manuel Alberto Goicochea Medina

hace 10 meses

gracias

Alejandro Benítez

hace 9 horas

Las directivas son una de las características fundamentales de Angular que nos permiten extender el HTML y crear componentes personalizados. Estas instrucciones le indican al navegador cómo debe modificar el DOM (Document Object Model) para lograr un comportamiento específico. Angular tiene 3 diferentes tipos de directivas y las clasifica en tres categorías principales: 1\. Directivas de Atributo: Se aplican como atributos a elementos HTML: Esto significa que se añaden directamente al elemento al que queremos aplicar la directiva. Modifican el comportamiento de un elemento existente: Pueden cambiar la apariencia, el comportamiento o la respuesta a eventos de un elemento. Ejemplos comunes: ngIf: Muestra o oculta un elemento basado en una condición. ngFor: Repite un template para cada elemento de un arreglo. ngClass: Asigna clases CSS a un elemento dinámicamente. ngStyle: Asigna estilos CSS a un elemento dinámicamente. 2\. Directivas de Estructura: Modifican el DOM añadiendo o eliminando elementos: Pueden crear nuevos elementos, mover elementos existentes o eliminar elementos del DOM. Se utilizan para controlar el flujo del template: Son esenciales para crear componentes complejos con múltiples elementos anidados. Ejemplos comunes: ngSwitch: Implementa un switch case en el template. ngContent: Proyecta contenido de un componente hijo dentro de un componente padre. 3\. Componentes: Son directivas de estructura con un template propio: Esto significa que pueden contener su propia lógica y vista. Son la unidad fundamental de construcción en Angular: Cada componente encapsula una parte de la interfaz de usuario y su comportamiento asociado. Ejemplos: Un formulario de login. Una lista de productos. Un componente de navegación.