- Видео 45
- Просмотров 158 271
akotech
Испания
Добавлен 30 ноя 2020
Tutoriales y cursos de programación de desarrollo web, centrados mayoritariamente en el ecosistema de Angular y RxJs.
Angular 17 - Nuevo Control de Flujo Integrado. (@if , @for, @switch, @else, @empty)
En este video hablamos de la nueva sintaxis de control de flujo integrada en los templates, la cual nos permite definir el contenido condicional o repetitivo de nuestras aplicaciones de una manera más sencilla e intuitiva sin necesidad de usar directivas estructurales.
Lista de contenido
00:00 Intro
01:19 @if
02:51 @switch.
04:43 @for
06:45 Migración automática.
07:23 Outro
Comando de la CLI.
- ng generate @angular/core:control-flow
💲 Si deseas apoyar la creación de más contenido de este tipo, puedes hacerlo a través de:
▶ Paypal: www.paypal.com/donate/?hosted_button_id=QNDKCWXFPYU3U
▶ El botón [♥ Gracias] situado cerca del botón de 👍en el video.
---
X: _akotech
github: github.com/ako-tech
Lista de contenido
00:00 Intro
01:19 @if
02:51 @switch.
04:43 @for
06:45 Migración automática.
07:23 Outro
Comando de la CLI.
- ng generate @angular/core:control-flow
💲 Si deseas apoyar la creación de más contenido de este tipo, puedes hacerlo a través de:
▶ Paypal: www.paypal.com/donate/?hosted_button_id=QNDKCWXFPYU3U
▶ El botón [♥ Gracias] situado cerca del botón de 👍en el video.
---
X: _akotech
github: github.com/ako-tech
Просмотров: 778
Видео
Transforma los valores de los @Input antes de asignarlos en la propiedad (Angular 16.1+)
Просмотров 4649 месяцев назад
En este video hablamos de la nueva opción transform de los @Input, disponible desde Angular 16.1 . Esta nos permite transformar los valores recibidos desde el componente padre antes de asignarlos en la propiedad asociada con el input. Lista de contenido 00:00 Intro 00:08 Limitación si el @Input no es string. 01:53 Nueva Opción transform. 02:19 booleanAttribute & numberAttribute y problema poten...
Obtener parámetros de la URL usando @Input (Angular 16+)
Просмотров 7929 месяцев назад
En este video hablamos en profundidad del nuevo procedimiento simplificado que tenemos disponible a partir de Angular 16 para obtener los parámetros de ruta, parámetros de consulta y data de las rutas directamente desde un componente simplemente agregando un @Input. Lista de contenido 00:00 Intro 00:07 Tipos principales de datos dinámicos en las rutas. 00:22 Procedimiento tradicional para extra...
Cómo prevenir la pérdida accidental de información en tus rutas de Angular gracias a canDeactivate.
Просмотров 1,5 тыс.Год назад
En este video vemos cómo utilizar la guarda canDeactivate del Router de Angular para prevenir la posible perdida accidental de información que se puede producir al abandonar una ruta. Para ello utilizaremos una aplicación con un formulario en la que usaremos la guarda para solicitar una confirmación en el caso de que haya cambios sin guardar. Lista de contenido 00:00 Intro. 00:23 Qué es y para ...
La forma más fácil de implementar una lógica de reintento en tus observables - Operador retry (Rxjs)
Просмотров 973Год назад
En este video vemos como este operador nos permite reintentar la ejecución de un observable en caso de que se produzca un error en el mismo. Explicamos su funcionamiento detalladamente con diagramas y ejemplos prácticos. Lista de contenido 00:00 Intro. 00:04 Descripción y Funcionamiento. 00:35 Ejemplo Básico 01:36 Límite Básico de Reintentos 02:15 Configuración Avanzada 04:15 Reintento para un ...
Cómo Deshabilitar Controles en los Formularios Reactivos de Angular.
Просмотров 3,2 тыс.Год назад
En este video veremos un par de alternativas que tenemos a la hora de habilitar/deshabilitar controles en los formularios reactivos. Lista de contenido 00:00 Intro. 00:12 Opciones Básicas. 00:45 Usando valueChanges. 03:05 Creando una directiva. 05:54 Deshabilitar FormGroup o FormArray. 06:58 Alternativa [attr.disabled] y porque no me convence. 08:59 Outro. Comandos usados en el video ▶ ng gener...
Operador race de Rxjs.
Просмотров 706Год назад
En este video vemos como este operador nos permite subscribirnos simultáneamente a múltiples observables y quedarnos únicamente con aquel observable que sea el primero en emitir una notificación. Explicamos su funcionamiento detalladamente con diagramas y ejemplos prácticos. Lista de contenido 00:00 Intro. 00:04 Descripción y Funcionamiento. 01:08 Ejemplo de como añadir un timeout a una Petició...
Todo lo que necesitas saber sobre los nuevos Componentes Autónomos (standalone) de Angular.
Просмотров 1,2 тыс.2 года назад
Todo lo que necesitas saber sobre los nuevos Componentes Autónomos (standalone) de Angular.
NgRx Entity - Maneja todas las colecciones de entidades de tu Store de manera uniforme.
Просмотров 1,7 тыс.2 года назад
NgRx Entity - Maneja todas las colecciones de entidades de tu Store de manera uniforme.
Cómo usar la Proyección de Contenido en Angular para pasar contenido HTML entre componentes.
Просмотров 2,7 тыс.2 года назад
Cómo usar la Proyección de Contenido en Angular para pasar contenido HTML entre componentes.
3 Opciones para manejar Formularios Anidados en Angular.
Просмотров 4,9 тыс.2 года назад
3 Opciones para manejar Formularios Anidados en Angular.
Control de Acceso Basado en Roles(RBAC) en Angular, usando Guardas y Directivas Estructurales.
Просмотров 19 тыс.2 года назад
Control de Acceso Basado en Roles(RBAC) en Angular, usando Guardas y Directivas Estructurales.
Cómo crear Controles de Formulario Personalizados en Angular usando la Interfaz ControlValueAccessor
Просмотров 3,2 тыс.2 года назад
Cómo crear Controles de Formulario Personalizados en Angular usando la Interfaz ControlValueAccessor
NgRx Effects - Aprende a conectar la Store con efectos secundarios de tu aplicación.
Просмотров 3,3 тыс.2 года назад
NgRx Effects - Aprende a conectar la Store con efectos secundarios de tu aplicación.
NgRx Store - La librería de referencia para el manejo del estado global en Angular.
Просмотров 9 тыс.2 года назад
NgRx Store - La librería de referencia para el manejo del estado global en Angular.
Operadores switchMap, mergeMap, concatMap y exhaustMap de Rxjs.
Просмотров 6 тыс.2 года назад
Operadores switchMap, mergeMap, concatMap y exhaustMap de Rxjs.
Operadores debounceTime, throttleTime y auditTime de RxJS.
Просмотров 2 тыс.2 года назад
Operadores debounceTime, throttleTime y auditTime de RxJS.
Cómo usar @ViewChild y @ContentChild en Angular.
Просмотров 4,2 тыс.2 года назад
Cómo usar @ViewChild y @ContentChild en Angular.
Estrategia de Reutilización de Rutas (RouteReuseStrategy) del Router de Angular.
Просмотров 2,2 тыс.3 года назад
Estrategia de Reutilización de Rutas (RouteReuseStrategy) del Router de Angular.
Deshacer/Rehacer en Angular usando el patrón Comando (Undo/Redo).
Просмотров 1 тыс.3 года назад
Deshacer/Rehacer en Angular usando el patrón Comando (Undo/Redo).
Cómo crear fácilmente una interfaz de Drag & Drop usando Angular CDK.
Просмотров 5 тыс.3 года назад
Cómo crear fácilmente una interfaz de Drag & Drop usando Angular CDK.
Angular Basics - Formularios (Reactivos y Dirigidos por Plantilla)
Просмотров 9 тыс.3 года назад
Angular Basics - Formularios (Reactivos y Dirigidos por Plantilla)
Angular Basics - Enrutamiento (Routing)
Просмотров 6 тыс.3 года назад
Angular Basics - Enrutamiento (Routing)
¿Qué significa cancelar una subscripción? Porque en el primer ejemplo del mergeMap cuando se "cancela" mata a todas las demás subscripciones, pero en el último ejemplo cuando tiene 4 como maxConcurrency, ahí no termina las demás subscripciones cuando una se completa. Así que: ¿qué es o cómo se cancela una subscripción exactamente?
Cancelar la subscripción es simplemente detener la ejecución de ese observable. En estos ejemplos hay que diferenciar, eso si, entre el observable externo y los internos. - Al observable externo lo podemos considerar una especie de coordinador o director del flujo principal. Por tanto cuando se cancela la subscripción de este observable externo, usando cualquiera de estos operadores, siempre se cancelan automáticamente todos los observables internos. - Los observables internos por otro lado podemos decir que son totalmente independientes. Desde su punto de vista no conocen de la existencia de otros observables internos, ni siquiera de la existencia del observable externo o jefe. Cuando les llega la orden de ejecutarse se ejecutan y si les llega la orden de parar, paran. Por tanto, en el ejemplo que dices del "maxConcurrency 4", cuando un observable interno se completa, lo únicos que tienen conocimiento de esto, son el propio observable que se ha completado y el observable externo a través del operador mergeMap, que utilizará esta notificación para subscribirse al siguiente observable interno que haya en cola, si lo hubiera. Espero haberte solucionado la duda un saludo y gracias por tu comentario 😉
Gran video, muchas gracias. Una duda, siempre el sub formulario tiene que ser un formgroup en el componente, no puenten ser simplemente un conjunto de controles sin formGoup? Un saludo
Una vez pasas la referencia al viewproviders del contenedor padre, ya puedes usar en el subformulario lo que quieras. Lo único que tienes que tener en cuenta es que si no envuelves los controles del subformulario en un formgroup, no vas a poder utilizar ese subformulario más de una vez en un mismo formulario padre. Ya que al tener esos controles internos los mismos nombres, se vincularían todos a un mismo control en el formulario padre. Por ejemplo, si hubiéramos hecho esto en el ejemplo del video, al introducir una dirección de entrega, la información se guardaría correctamente en el formulario padre. Pero si a continuación introdujéramos una dirección de facturación, los datos ahí introducidos sobrescribirían la información anterior. un saludo y gracias por tu comentario 😉
@@akotech Si llevas toda la razón del mundo al contenerlo en un formGroup, es mucho más útil ¿Por otra parte piensas sacar en el futuro algún vídeo con alguna nueva característica de las últlimas versiones del Angular?
Intención de hacerlos sí tengo. Cuando podré? no lo se.
@@akotech Gracias por el esfuerzo, la verdad es que con tantos cambios de las nuevas versiones uno no sabe por donde tirar, sobre todo el tema de quitar zoneless, el tema también de como quedaría una buena arquitectura standalone components y las nuevas funcionalidades de resources, etc. Un saludo
Hermano, amigo, estos videos valen oro. Aprecio los videos de los hindues, pero tener alguien que lo explique en español y con tanta calidad es como encontrar agua en el desierto 😭😭😭
Muchas gracias por tus palabras 😊 un saludo
Muy bueno, necesito implementar algo parecido con el select de angular material, solo que necesito agregar un search filter. El tema es que el select se usa en varios lados de la aplicación y pues estar llenando los componentes padres con variables de configuración o demás cosas que deberían ser propias del componente select no es lo mejor. Muchas gracias
Este es el mejor canal de angular en español. Cada que veo tus vídeos me dan ganas de programar, todo es muy dinámico y muy bien explicado, gracias por estos valiosos aportes en forma de vídeo!
Muchísimas gracias por tus palabras 😊. un saludo y felices fiestas!
Hola ako, aunque ya pasaron varias versiones de angular sigo usando tus videos para repasar cuando se me olvida algo. Espero que sigas bien y pronto nos sorprendas con un curso en alguna plataforma. Un abrazo.
Si si todo bien Damian, la razón principal del parón de contenido es la falta de tiempo. Intentaremos volver lo antes posible. Gracias por preguntar y felices fiestas. un saludo 😉
@akotech buenisimo! Me alegra que estes bien y felices fiestas! 🥳
Perfectamente explicado, gracias por compartir!
Gracias a ti por tus palabras! un saludo 😉
Muchas gracias, haces que todo sea muy claro y conciso, excelente contenido, fue una muy buena explicación, graaaacias
Es demasiado claro, enserio, te lo agradezco de todo corazón, muchas gracias por este vídeo tan bien explicado y bien estructurado, definitivamente magnífico
Gracias a ti por tus palabras. 😊 un saludo
muy completo el video
No me puedo imaginar lo que ha de ser un video de akotech explicando signals. Después de 3 años el video sigue siendo buenísimo!
dios mio
PEDAZO de aporte a la comunidad, muchas gracias.
Nunca habia visto alguien con una forma tan facil y clara de explicar y ejemplificar, muchas gracias!
Muchas gracias a ti por tus palabras Santiago. 😊 un saludo
Hola amigo. Unos tutoriales geniales 😮. Lo mejor que he visto de angular. Que programa usan para la edición del vídeo?
Muchas gracias. Los videos están mayormente hecho con after effects. un saludo
Guapísimo loco
me suscribo, tremenda edicion, lo hace todo muy ameno, saludos!
Muchas gracias y bienvenido. un saludo 😉
Muchas gracias por ser tan conciso y grafico en tus videos, de casualidad ¿no enseñas cursos de back?
Muchas gracias. No, de momento no tengo nada de back sorry. un saludo
Excelente aporte gracias por ayudar a la comunidad
gracias a ti por tu palabras un saludo.
Tengo una consulta, ya que yo tengo un form, que dentro del form tengo un formArray que tiene un formGroup, los formGroup son dinamicos, en un caso asi se puede utilizar controlValueAccessor? porque estoy intentando desacoplar el componente de form que tiene mucha logica. Lo que tengo actualmente es algo asi: this.shipmentForm = this.fb.group({ shipmentId: [{ value: '', disabled: true }], shipmentDate: [{ value: '' }], tradingPartnerId: [{ value: '', disabled: true }], ofiIc: [{ value: '', disabled: true }], ofiIcDate: [{ value: '', disabled: true }], fobIc: [{ value: '', disabled: true }], paymentBalance: [{ value: '', disabled: true }], responsibleTesoreria: [''], responsibleSpoke: [{ value: '', disabled: true }], invoices: this.fb.array([]), installments: this.fb.array([]), }); me gustaria que los invoices esten manejados en otro componente (donde se van a poder agregar/ eliminar los invoices)
Genial!
como se hace el UNDO y REDO para el drag and drop?
Tienes el enlace al vídeo en la descripción. Pero te lo dejo por aquí también: ruclips.net/video/dM0h3-oK5ug/видео.html un saludo y gracias por tu comentario 😉
Impresionante
interesante el video, tengo una consulta, si los roles los tengo en una base de datos y este lo obtengo mediante una api, cómo puedo implementarlo sin necesidad de colocar los roles en el código, solo necesito que me obtenga los roles de la base de datos?
Sin ver la implementación específica es difícil darte una respuesta concreta. Pero si no quieres hardcodear los roles en el código necesitarás crear algún tipo de diccionario con esos datos que obtengas de la bd del tipo {[accion/seccion]: rolesPermitidos[] } para poder validar si el rol del usuario le permite acceder a dicha sección o realizar una acción específica. un saludo y gracias por tu comentario
Es excelente como explicas. Gracias por compartir tu conocimiento ❤
Muchas gracias Gustavo. un saludo 😉
me parecen bestiales estos videos de verdad, hay super poco contenido así de gente de España, así que me suscribo y espero que subas mas video
Muchas gracias por tus palabras y bienvenido! Y tranquilo que con mayor o menor frecuencia seguiremos trabajando en ello. un saludo 😉
¡Gracias!
Muchas gracias a ti por tu apoyo Andrés! 😊 un saludo
Muy buen video
Muchas gracias Diego. 😉 un saludo
Por qué funciona aún sin usar forwardRef?
Error mío, sorry. 😔 En este caso no es necesario su uso. Porque aunque usemos la referencia a la clase en el decorador antes de su declaración, a la hora de transpilar el código del decorador queda posterior al de la declaración de la clase, por lo que como digo no es necesario. un saludo
¡Gracias!
Muchísimas gracias a ti por tu apoyo Enrique! 😊 un saludo
en caso de tener formularios donde es necesario incluir un formArray dentro de otro formArray para llegar al campo editable según la estructura del requerimiento, es un array de tablas, y en cada tabla hay un input.
lo siento Ian, pero no entiendo bien cual es tu duda. Podrías por favor reformularla. un saludo y muchas gracias por tu comentario
@@akotech me surgió un problema donde la estructura es un array de arrays, varios datatable iguales con formularios internos. Cómo podría manejar estos formularios anidados ?
@@themusikislive Sin ver el caso concreto es difícil darte una respuesta precisa. - Pero si como dices tienes un array de arrays, donde digamos cada celda es independiente, en principio no te haría falta anidar nada. Con transformar la data recibida en un FormArray<FormArray<FormControl>>> sería suficiente. Y luego en el template un par de for loops para renderizar las celdas con los inputs. - Por otro lado, si lo que representa ese array de arrays es un listado de entidades, donde cada fila es una entidad, tendrías un ejemplo similar al del video. Ahí si puedes crear un componente que maneje cada una de esas filas por separado (utilizando la opción del sub-form o del controlValueaccesor) y luego otro componente padre que se encargue del manejo general del conjunto. De todas formas si puedes reproducir esta parte de la aplicación en un stackblitz o similar, estaría encantado de echarle un vistazo en cuanto pueda para darte una mejor respuesta. un saludo
Buena información, tienes algún curso sobre NgRx?, es muy difícil encontrar buenas explicaciones como las tuyas
Quitando los videos que hay en el canal sobre ngrx, no he hecho nada más acerca del tema. un saludo y gracias por tus palabras 😉
Uff!! lo necesitaba, mi dosis diaria de Angular, directo a la vena 🤪
jajaj
Genial el contenido
gracias 😊
Muy buen video gracias por compartir
Muchas gracias a ti por tu comentario. un saludo 😉
Primero
🤩
Impresionante la calidad de este video. Si haces haces algun curso de pago sin duda pagaría
Bueno es saberlo. Muchas gracias por tu comentario 😉 un saludo
👏👏👏
😱
Primero 😁
😁
excelente explicacion, son unos crack. gracias
Muchas gracias Flavio 😊 un saludo
Thanks!
Muchísimas gracias por tu apoyo 😊
Que gran acierto, recuerdo cuando estaba aprendiendo lo difícil que era entender la sintaxis compleja del switch case. Gracias por tomarte el tiempo de explicarlo detenidamente y mostrando ejemplos de las versiones anteriores Gracias nuevamente por tu contenido, saludos!
Gracias a ti por tus palabras 😉 un saludo
No conocía el último comando. Lo tengo que probar, mil gracias!!
Muchísimas gracias una vez más Damián. 😊 un saludo
Como siempre: sencillo, al grano y súper bien explicado
Muchas gracias Oscar 😉
Sencillito 😊 ❤
Gracias 😊
😶 😲 😱 🤯 🥴 😋
😁
Akotech haz un tutorial para implementar la i18n en angular 17
apuntado queda 😉