Muchas gracias por todos tus cursos Juan, encontré trabajo básicamente gracias a tus cursos. Cuando tenga mi primer sueldo de programador quiero donarte algo por todo el esfuerzo, aunque sea el poquito que pueda aportar, te lo mereces
Había seguido anteriormente otros cursos de Angular, pero bajo mi perspectiva, este curso es el mas didáctico que he visto, me ha servido para aclarar conceptos y comprender mejor el funcionamiento del framework. Felicitaciones Juan por tu entrega, y no queda mas que ser paciente esperando que subas un nuevo video. Saludos desde Chile
En lugar de desactivar el modo estricto , creo que es mucho mejor y simple agregarle "?" en la declaración, estableciendo que la variable podría ser nula, así quedaría: @Input() empleados?: Empleado[];
Gracias !!! todo claro como el agua :) supongo que si entre las etiquetas de apertura y cierre del componente hijo se agrega lo que se agregó en la plantilla HTML para mostrar la información de cada empleado no haría falta pasar la información porque seguiría estando en el componente padre, pero claro, en esta aplicación tan sencilla no habría problema, pero no se estaría siguiendo los principios de reutilización y escalabilidad de la aplicación o del componente en cuestión. Muchas gracias !!! :) Otra cosa, la directiva *ngFor lo que hace es repetir la etiqueta donde se utiliza y su contenido, si visualizamos el código fuente al cargar la página veremos que en un principio el componente hijo se encuentra 4 veces (en mi caso) dentro del componente por defecto , esto es porque se ejecutó la directiva *ngFor 4 veces porque hay 4 elementos en el arreglo.
No lo veo como complicarse la vida, sino como mostrar como hacerlo... Tene en cuenta que basicamente, podes poner el listado en cualquier parte de la aplicacion, independientemente de si esta o no el formulario ahi.
hola juan, me encanta tu curso de angular y la forma en que lo explicas , pero no encuentro un video en donde expliques los cuando son objetos (observables) quedo pudiente a tu explicación gracias :D
En este caso al ser el forEach dentro de la etiqueta con la que se llama al contenedor, es el contenedor el que se duplica? Es la div mayor? O como va? por que no entiendo como solamente el div interno se multiplicaría sin indicarlo
¿Aún estamos muy lejos de ver peticiones Ajax? ¿Y consultas en bases de datos? Creo que estoy muy ansioso jajaj además de que @ pildorasinformaticas explica muy bien!
Hola Juan, gracias eternas ante todo. me gustaría saber como haces esas animaciones para explicar los componentes (cuadrados, cajitas, letras, etc...) a lo mejor ya lo has dicho, pero este es el cuarto curso que hago contigo y la verdad no me suena, si no es una molestia, gracias de antemano.
en que momento se hizo la vista como empezo este video... vi el otro video y no lo hiciste o no me fije bien... me siento perdido.. la suerte comprendo como hacerlo un poco
Hola Juan, una consulta, en el curso de html, hace un tiempo dijiste que estaba basado en un libro algo así como " el gran libro de html" este está basado también en algún libro? Cuál? No no ser así, podrías recomendar algún libro? Desde ya muchas gracias
Hola, gracias por tus cursos Juan, explicas muy bien! Tengo una duda...porque cambias el nombre de i a indice para pasar el atributo del componente padre al hijo? Podrían llamarse igual, no? Un saludo!
Gracias por el comentario Adrián. Efectivamente pueden llamarse igual. Les cambio el nombre por una cuestión didáctica. En todos los cursos, cuando les doy el mismo nombre a parámetros y argumentos en el uso de funciones, o como en este caso cuando paso atributos de un componente a otro, muchos alumnos (sobre todo los que comienzan a programar) creen que obligatoriamente se deben llamar igual lo que les lleva a pensar que se trata del mismo valor. Por este motivo siempre intento cambiar los nombres de parámetros y argumentos aunque por otro lado, aquellos que ya tienen ciertos conocimientos a veces me escriben para decirme que por qué les cambio el nombre si se pueden llamar igual... Bien visto por tu parte. Un saludo!
Buen día profesor cómo recomendaría llevar los cursos? Cuantos videos ver al día para aprender bien sin prisas y si es bueno ver varios lenguajes a la vez? Saludos es un crack
Muy agradecido por este curso profesor. Pero estoy siguiendo el curso desde la web de Pildoras Informaticas y veo que el último video que se puede seguir desde alli es el video 19;y sin embargo, en RUclips veo que hay más videos de este curso. ¿posible error no detectado en la Web?
Los vídeos salen primero en el canal de RUclips y cuando tengo tiempo libre los voy subiendo después a la página web. En unos días estarán todos en ambos sitios. ¡Un saludo!
Para no desactivar el modo estricto realicé: export class EmployeeComponentComponent { @Input() empleado?: Employee; @Input() empleadoID?: number; } y en la plantilla:
{{empleadoID? empleadoID+1 : 1}} {{empleado?.name}} {{empleado?.lastname}} {{empleado?.position}} {{empleado?.salary}} Lo comento para los que hayan tenido problemas y talvez pueda serles de ayuda
Tengo angular 17. No puedo evitar de ninguna manera que al pulsar el botón me recargue la página. Por lo que nunca se ve otra entrada en el array. 😢. En los foros pone que con form onsubmit="event.preventdefault" o = "return false" no se recarga la página y es cierto pero entonces el botón no funciona. No llama a la función agregaEmpleado ni hace nada. Una pena. No puedo arreglarlo
juan no se si esta mal lo que pienso , pero yo hubiese metido todo ese codigo y variables en el mismo ts del hijo y solo hubiese utilizado el componente hijo dentro del padre , es decir toda la funcionalidad del hijo en su componente , variables etc , obvio que no haria falta el @input pero esto a la vez me genera mnenos dependencia entre componentes , se usa el componenente hijo dentro del padre pero con solo eleminar el decorador ya deja de funcionar . teniendo asi separado codigo del hijo al componente del padre , no se si estara bien !!? pero bueno vos que opinas juan?? o gente que opinan?
@@pildorasinformaticas Ya no es necesario, lo empece desde 0 y los errores eran en el @Input, seguramente no use el intelisence y tambien el proyecto no reconocia el componente hijo, pero de todos modos muchas gracias estoy a prendiendo mucho
Hola, me descargo los videos y los veos borrosos. La visualización en youtube la tengo configurada en 1080p HD. ¿alguien me puede orientar de como solucionarlo?
cuando los descargues tenes que ver en que formato lo descargas , no tiene que ver el youtube sino en que formato lo bajas, si lo bajas en 400 se vera mal si lo queres ampliar , pero si lo bajas en 1080 se vera mejor , lo unico sii fijate el formato en que lo bajas porque si es mp4 pesa mas que otros sumado que 1080 es mas pesado a 780 ejemplo
Buen video, yo he pasado en lugar de empleado e index, he pasado empleados para matar dos pájaros y funciona. @Input() empleados: Empleado[] | undefined Por si alguien le sirve como idea diferente.
Creo que quedaría más "limpio" si el ngfor se hiciera en el hijo y se le pasaran todos los empleados. Además el índice quedaría "encapsulado" en el hijo. El hijo entonces se encargaría de hacer toda la parte del listado de empleados. Desde un punto de vista de diseño web con componentes tendría más lógica.
Yo también lo veo así en mi lógica, pero posiblemente lo haya hecho así por algún motivo, o para mostrar algo a posteriori, haya salido o no en este vídeo. A ver si nos enteramos 😅
Hola. ¿Se le ocurre a alguien cómo pasar el array al componente hijo sin hacerlo por el bucle? Tengo la lista en una tabla y si lo paso a través del bucle, como en el vídeo, me repite la cabecera en cada ítem. Así que intenté hacerlo así: [empleados]="empleados" o así: [empleados] = {empleados} para recogerlo desde el hijo y luego una vez en el hijo, hacer el bucle ahí, pero nada, no me deja. :D
solo pasa la varoable en el componente padre y en el componente hijo has la iteraccion, eso si utilizando en vez de empleados listaEmpleados ah y en el hijo componente .ts @Input() listaEmpleados:any;
HELP ME PILDORAS INFORMATICAS ALGUIEN SABE COMO HACER FUNCIONAR ESTO CON UNA TABLA MAS ELABORADA EN EL HIJO: COMPONENTE PADRE (IGUAL COMO ESTA EN PILDORAS INFORMATICAS):
Muchas gracias por todos tus cursos Juan, encontré trabajo básicamente gracias a tus cursos. Cuando tenga mi primer sueldo de programador quiero donarte algo por todo el esfuerzo, aunque sea el poquito que pueda aportar, te lo mereces
Yo también quiero hacer esto que dices, donar un poco, me parece lo mas justo despues de tanta ayuda
cómo le fué la vida?
Había seguido anteriormente otros cursos de Angular, pero bajo mi perspectiva, este curso es el mas didáctico que he visto, me ha servido para aclarar conceptos y comprender mejor el funcionamiento del framework. Felicitaciones Juan por tu entrega, y no queda mas que ser paciente esperando que subas un nuevo video. Saludos desde Chile
Gracias por tan buen curso. Me está ayudando mucho Juan, un gran abrazo, desde Argentina.
Dios, yo pague mucho dinero para tener los cursos de una plataforma pero con este curso entiendo todo mil veces mejor
En lugar de desactivar el modo estricto , creo que es mucho mejor y simple agregarle "?" en la declaración, estableciendo que la variable podría ser nula, así quedaría:
@Input() empleados?: Empleado[];
Este seria la mejor forma, en mi opinión: @Input() pacienteInfo:Paciente | undefined;
tambien se le puede colocar un signo de exclamacion "!", para no cambiar la configuracion de tsconfig.
@Input() empleadoDeLista!:Empleado;
Es cierto muchas gracias !!! también me di cuenta que se debe hacer lo mismo con el index @input() indice!:number;
Muchas gracias :D
gracias solucione el problema que tenia con tu video
Hola que tal...explicas muy bien ..muchas gracias...👍👍👍
Muchas gracias, quedo inmensamente agradecido
Una genialidad el tutotial! muchas gracias! !
Excelente vídeo maestro. Muchas gracias!
buen video, Juan!. Muchas gracias
Gracias !!! todo claro como el agua :) supongo que si entre las etiquetas de apertura y cierre del componente hijo se agrega lo que se agregó en la plantilla HTML para mostrar la información de cada empleado no haría falta pasar la información porque seguiría estando en el componente padre, pero claro, en esta aplicación tan sencilla no habría problema, pero no se estaría siguiendo los principios de reutilización y escalabilidad de la aplicación o del componente en cuestión. Muchas gracias !!! :) Otra cosa, la directiva *ngFor lo que hace es repetir la etiqueta donde se utiliza y su contenido, si visualizamos el código fuente al cargar la página veremos que en un principio el componente hijo se encuentra 4 veces (en mi caso) dentro del componente por defecto , esto es porque se ejecutó la directiva *ngFor 4 veces porque hay 4 elementos en el arreglo.
Deseando ver el siguiente vídeo
Muchas gracias Juan.
Que manera de complicarse la vida poner el formulario y la lista en componentes diferentes JSJSJAJAJAJA. Quedo muy clara la explicación
todo dependera de lo que quieras hacer
No lo veo como complicarse la vida, sino como mostrar como hacerlo... Tene en cuenta que basicamente, podes poner el listado en cualquier parte de la aplicacion, independientemente de si esta o no el formulario ahi.
Eso es verdad. Pero hay que recordar que esto es para mostrar la funcionalidad del @input, no para la integridad o funcionamiento optimo de la app
hola juan, me encanta tu curso de angular y la forma en que lo explicas , pero no encuentro un video en donde expliques los cuando son objetos (observables) quedo pudiente a tu explicación gracias :D
En este caso al ser el forEach dentro de la etiqueta con la que se llama al contenedor, es el contenedor el que se duplica? Es la div mayor? O como va? por que no entiendo como solamente el div interno se multiplicaría sin indicarlo
Un truco para crear componentes con VSC sin utilizar la consola. en app boton derecho "Generar componente" y darle el nombre del mismo
¿Aún estamos muy lejos de ver peticiones Ajax? ¿Y consultas en bases de datos?
Creo que estoy muy ansioso jajaj además de que @
pildorasinformaticas explica muy bien!
eso es facil aprender lo que el te ense;a ahora, te servira mucho
Buenas. Que extensión tienes instalada para que te salgan los errores en el html?
Hola Juan, gracias eternas ante todo. me gustaría saber como haces esas animaciones para explicar los componentes (cuadrados, cajitas, letras, etc...) a lo mejor ya lo has dicho, pero este es el cuarto curso que hago contigo y la verdad no me suena, si no es una molestia, gracias de antemano.
en que momento se hizo la vista como empezo este video... vi el otro video y no lo hiciste o no me fije bien... me siento perdido.. la suerte comprendo como hacerlo un poco
Buen video!!!
Hola, Muy buen curso, enhorabuena!!! el próximo video se sabe mas o menos cuando estará?? un saludo y gracias por el material.
y se puede de esta manera entre modulos?
Hola Juan, una consulta, en el curso de html, hace un tiempo dijiste que estaba basado en un libro algo así como " el gran libro de html" este está basado también en algún libro? Cuál? No no ser así, podrías recomendar algún libro? Desde ya muchas gracias
Hola, gracias por tus cursos Juan, explicas muy bien!
Tengo una duda...porque cambias el nombre de i a indice para pasar el atributo del componente padre al hijo? Podrían llamarse igual, no?
Un saludo!
Gracias por el comentario Adrián. Efectivamente pueden llamarse igual. Les cambio el nombre por una cuestión didáctica. En todos los cursos, cuando les doy el mismo nombre a parámetros y argumentos en el uso de funciones, o como en este caso cuando paso atributos de un componente a otro, muchos alumnos (sobre todo los que comienzan a programar) creen que obligatoriamente se deben llamar igual lo que les lleva a pensar que se trata del mismo valor. Por este motivo siempre intento cambiar los nombres de parámetros y argumentos aunque por otro lado, aquellos que ya tienen ciertos conocimientos a veces me escriben para decirme que por qué les cambio el nombre si se pueden llamar igual... Bien visto por tu parte. Un saludo!
Buen día profesor cómo recomendaría llevar los cursos? Cuantos videos ver al día para aprender bien sin prisas y si es bueno ver varios lenguajes a la vez? Saludos es un crack
🙏👍
Muy agradecido por este curso profesor. Pero estoy siguiendo el curso desde la web de Pildoras Informaticas y veo que el último video que se puede seguir desde alli es el video 19;y sin embargo, en RUclips veo que hay más videos de este curso. ¿posible error no detectado en la Web?
Los vídeos salen primero en el canal de RUclips y cuando tengo tiempo libre los voy subiendo después a la página web. En unos días estarán todos en ambos sitios. ¡Un saludo!
Para no desactivar el modo estricto realicé:
export class EmployeeComponentComponent {
@Input() empleado?: Employee;
@Input() empleadoID?: number;
}
y en la plantilla:
{{empleadoID? empleadoID+1 : 1}}
{{empleado?.name}}
{{empleado?.lastname}}
{{empleado?.position}}
{{empleado?.salary}}
Lo comento para los que hayan tenido problemas y talvez pueda serles de ayuda
Tengo angular 17. No puedo evitar de ninguna manera que al pulsar el botón me recargue la página. Por lo que nunca se ve otra entrada en el array. 😢.
En los foros pone que con form onsubmit="event.preventdefault" o = "return false" no se recarga la página y es cierto pero entonces el botón no funciona. No llama a la función agregaEmpleado ni hace nada. Una pena. No puedo arreglarlo
crack!!
Hola amifos, me sale este error: 'input()' accepts too few arguments to be used as a decorator here, que debe hacer??
juan no se si esta mal lo que pienso , pero yo hubiese metido todo ese codigo y variables en el mismo ts del hijo y solo hubiese utilizado el componente hijo dentro del padre , es decir toda la funcionalidad del hijo en su componente , variables etc , obvio que no haria falta el @input pero esto a la vez me genera mnenos dependencia entre componentes , se usa el componenente hijo dentro del padre pero con solo eleminar el decorador ya deja de funcionar . teniendo asi separado codigo del hijo al componente del padre , no se si estara bien !!? pero bueno vos que opinas juan??
o gente que opinan?
Eso es verdad. Pero hay que recordar que esto es para mostrar la funcionalidad del @input, no para la integridad o funcionamiento optimo de la app
No me sirve lo de quitarle el modo estricto, me sigue saliendo el error y no se como arreglaro
Copia y pega por aquí el código para ver si hay algún error de otro tipo. ¡Saludos!
@@pildorasinformaticas Ya no es necesario, lo empece desde 0 y los errores eran en el @Input, seguramente no use el intelisence y tambien el proyecto no reconocia el componente hijo, pero de todos modos muchas gracias estoy a prendiendo mucho
Quiero el curso de Angular completo, pero el pago!!!
Que habría dentro de empleado.model.ts?
Pues, el modelo... que es la representacion de los campos de tu base de dato(en esta parte del curso, hipotetica base de datos)
la clase Empleado, que tiene todos los atributos o propiedades de un empleado: nombre, apellido, etc
0:46 las muñequeas a las que se refiere se llaman matrioskas rusas.
Hola, me descargo los videos y los veos borrosos. La visualización en youtube la tengo configurada en 1080p HD. ¿alguien me puede orientar de como solucionarlo?
cuando los descargues tenes que ver en que formato lo descargas , no tiene que ver el youtube sino en que formato lo bajas, si lo bajas en 400 se vera mal si lo queres ampliar , pero si lo bajas en 1080 se vera mejor , lo unico sii fijate el formato en que lo bajas porque si es mp4 pesa mas que otros sumado que 1080 es mas pesado a 780 ejemplo
Buen video, yo he pasado en lugar de empleado e index, he pasado empleados para matar dos pájaros y funciona.
@Input() empleados: Empleado[] | undefined
Por si alguien le sirve como idea diferente.
Alguien más no lo hizo de la forma facil de solamente cambiar la configuracion???
Creo que quedaría más "limpio" si el ngfor se hiciera en el hijo y se le pasaran todos los empleados. Además el índice quedaría "encapsulado" en el hijo. El hijo entonces se encargaría de hacer toda la parte del listado de empleados. Desde un punto de vista de diseño web con componentes tendría más lógica.
Yo también lo veo así en mi lógica, pero posiblemente lo haya hecho así por algún motivo, o para mostrar algo a posteriori, haya salido o no en este vídeo. A ver si nos enteramos 😅
Concuerdo
Concuerdo, aunque creo que como ejemplo viene bien, pues de esta forma se puede ver como se itera el array y envía datos al hijo con cada iteración :)
Claro, ademas esta generando muchos divs y contenedores de mas... pero creo que es solo didactico
@@hugoantoniosegura3447 Por ese mismo motivo debería hacerlo como digo.
Gracias Juan, un poco enrevesado ..no sería mejor haber creado un nódulo
Hola. ¿Se le ocurre a alguien cómo pasar el array al componente hijo sin hacerlo por el bucle? Tengo la lista en una tabla y si lo paso a través del bucle, como en el vídeo, me repite la cabecera en cada ítem. Así que intenté hacerlo así: [empleados]="empleados" o así: [empleados] = {empleados} para recogerlo desde el hijo y luego una vez en el hijo, hacer el bucle ahí, pero nada, no me deja. :D
solo pasa la varoable en el componente padre
y en el componente hijo has la iteraccion, eso si utilizando en vez de empleados listaEmpleados
ah y en el hijo componente .ts
@Input() listaEmpleados:any;
Para cuando un curso de alfresco??
Hacelo con tipado estricto como debe ser. se lo quitaste por que no te salia?
Ya entiendo la razon del porque a los desarrolladores React no les gusta Angular jaja
porque cuenta cuenta :)
HELP ME PILDORAS INFORMATICAS
ALGUIEN SABE COMO HACER FUNCIONAR ESTO CON UNA TABLA MAS ELABORADA EN EL HIJO:
COMPONENTE PADRE (IGUAL COMO ESTA EN PILDORAS INFORMATICAS):
{{titulo}}
Nombre
Apellido
Cargo
Salario
COMPONENTE HIJO:
ID
Nombre
Apellido
Cargo
Salario
{{indice+1}}
{{empleadoLista.nombre}}
{{empleadoLista.apellido}}
{{empleadoLista.cargo}}
{{empleadoLista.salario}}
PREGUNTA: COMO HAGO PARA QUE NO SE ME REPITA EL THEAD (ID, NOMBRE, APELLIDO, CARGO, SALARIO) POR CADA REGISTRO. HE HECHO DE TODO Y NADA QUE LO LOGRO
Hola, yo lo hice de la siguiente manera:
*Componente Padre
*Componente Hijo
ID
Nombre
Apellido
Cargo
Salario
{{i+1}}
{{row.nombre}}
{{row.apellido}}
{{row.cargo}}
{{row.salario}}
*Componente Hijo TypeScript
@Input() empleadoLista:Empleado[];