Angular Material Tutorial

[@kevinolivella9769]

Amigo, eres el mejor. Entendí muy bien la creación de la aplicación. ¡¡¡UUUUUUUFFF!!! Me ayudó mucho para crear la mía, y en mi trabajo.

[@richievelastegui]

el mejor de todos, es que no tengo palabras enserio, justo acabo de terminar

[@miguelacatitla4145]

Muy buen trabajo. Se agradece tu aporte. Algo que note es que la fuente de la letra era muy pequeña, pero de ahi en fuera todo muy bien.

[@TomasRuizDiaz]

Hola Miguel, lo voy a tener en cuenta para futuros videos!

[@SrEquixs]

👍Salí de dudas con este vídeo explicativo, no había encontrado alguien que explicara tan bien, han sido solo dos de los vídeos que realmente he aprendido en todo youtube, este y otro que vi hace mas de un año.

[@TomasRuizDiaz]

Gracias HL por el comentario. Si hay muy buen material en YT 😊

[@SrEquixs]

@@TomasRuizDiaz Disculpa una pregunta. Repetí el ejercicio siguiendo los pasos como indicas pero cuando trato de invocar el componente dashboard desde la carga peresoza simplemente se traba y no me muestra el componente. Ni tampoco me lo muestra al dar la ruta en el navegador

[@SrEquixs]

@@TomasRuizDiaz Ya encontré el error que tenía. De todos modos valga la redundancia está muy bueno todo lo que explicaste. Gracias

[@santiagocardona3528]

EXCELENTEEEEEEEE VIDEO ni siquiera los profes de Udemy hacen una app tan bien explicada! Gracias me sirvió mucho!!!

[@KimetMX]

El mejor video de angular para principiantes en youtube =)

[@TomasRuizDiaz]

Gracias kimet por el cometario!

[@celestecolautti573]

Muchísimas gracias Tomás exc video! recomiendo a los que como yo les gusta o trabajan en backend pero obviamente debemos trabajar con un poco de front. Gracias bendiciones!

[@crcasallas]

excelente video ,muy educativo, aunque falto la función del botón editar, en general un excelente contenido.

[@luisfaridchairespasalagua7655]

1 año de esto y aún sigue ayudando, gracias por tan gran aporte y sencillo de entender

[@urielvtorrijos3314]

Excelente aporte, yo estoy iniciando con angular, pero me diste la introduccion de muchos elementos basicos y su funcion. Gacias....!!!!

[@fernandoalcaraz4755]

Aun no termino de verlo completo, pero gracias, esta muy bueno.

[@andresgarcia1979]

Groso Mannnn. Me hiciste más sencillo la tesis. Que tengas una excelente vida: Suscribo + like.

[@augustobritos1285]

1:15:15 esta de la nasa ese menú!!!!!!!!!!🚀🚀🚀

[@enriqueruiz320]

uffff por fin terminé el tuto... muchas gracias

[@TheZemarko]

Excelente, pero excelente video. Me ayudo muchisimo a entender un poco más de angular y de Material que no tenía idea. A favoritos!

[@brownie]

Tus videos son excelentes. No solo se explica como usar las tecnologias sino tambien la documentacion oficial.

[@marceloemanuelquiroga7768]

Excelente video, estoy incursionando como frontend y me pareció súper simple e entendible

[@carlosmoron2957]

muy bueno. Estoy iniciandome en Material y fue un gran pantallazo inicial

[@braco0000]

Lo pregunta mía es una sola.... ¿Por qué no tienes mas suscriptores? Tienes contenindo de alta calidad

[@enriqueruiz320]

Listo, ya compré tu curso de UDEMY SALUDOS, no vi lo de los cupones pero compré el curso en promoción 😉

[@mikelcovers1580]

me demore todo mi domingo en replicarlo punto por punto, muy buen aporte gracias.

[@alejandroaguero4351]

Tremendo aporte!! segui con videos como estes que son re utiles y explicas super bien y claro. Estoy comenzando con angular y la verdad aprendi un monton de cosas en dos horas de video

[@luisfernandodeolazabalsche3317]

Que alegría que pongas un nuevo video de angular, tengo varios cursos tuyos de Udemy y son de lo mejor ;-)

[@TomasRuizDiaz]

¡Gracias!

[@MiguelAngel180]

Tu contenido es de lo mejor 👌👍🏻 felicitaciones !! Gracias por tu aporte a la comunidad digital

[@leonardovillareal3871]

Este video vale oro, excelenteeeee

[@hugomartinez2880]

Buen aporte, seguía usando dataTables Js dentro de angular, ahora lo implementaré asi.

[@designanimation]

Excelente aporte de un vistazo general de Material Crack

[@monarcaShadow24]

gracias por excelente explicación

[@javiervillalba5867]

Excelente, muy muy bueno, el mejor que he visto

[@diegoalejandrohernandezlop4557]

Amigo, admiro tu trabajo. Nuevo suscriptor y tienes todo mi apoyo.

[@pablomateo9340]

Muy bueno el video, lo único, me quede esperando la funcionalidad de Editar y no esta, tendrás esto en otro video?.

[@alejandroingercher3020]

Videazo hermano. Muchas gracias

[@carlosvargasguzman9678]

Muchas gracias, muy buen video. Si podría agregar el componente para editar los usuarios seria genial.

[@seixasgo2002]

Excelente tutorial, muy bien explicado, gracias por compartir

[@JoseLuis-sr4xw]

Muchusimas gracias compañero, no sabia como hacerlo.

[@daniela98742]

Muy buena la explicación de angular, muchas gracias por la explicación

[@antonioluduenabereziuk7416]

Excelente aporte, me ayudo un montón ,

[@kyanamartin9734]

Master Class! Mil gracias!!!!

[@KeyserOficial]

Gracias por tan grandioso aporte

[@RaulGarcia-tg9xv]

Gran tutorial, gracias

[@mayamamaicez9327]

Buenas, 1:11:44 no me deja utilizar los Observables. Cuando intento importar rxjs me aparece subrayado en rojo y no me funciona. Como se puede solucionar esto?

[@petersonfreitas2061]

Thank you so much. It helped me a lot.

[@antoniodelacoba4046]

Gracias por el video, muy buena la presentación y la forma de explicarlo 👏🏻. Me gustaría saber como se podría hacer lo mismo pero con un template que ha sido comprada. Que me recomiendas para activar una plantilla comprada. Enhorabuena por tu canal y esperando mas videos de Angular, buen trabajo.

[@miguelCarrascoQ]

Buen video. Se agradece!

[@erickmonserrat4059]

Amigo, una pregunta. Como puedo retomar este sistema de diseño en Figma para que coincida con los elementos que estas retomando de angular

[@estibenruizdiaz1878]

Muchas gracias!

[@youssefelassaoui9111]

muchas gracias hermanito

[@KunShadows]

Hola, esta bueno el tuto, seria genial poder tener la explicacion de como hacer el login con el backend que puede ser .Net Core

[@TomasRuizDiaz]

Hola Kun, tengo pendiente subir uno con Angular Material, Net Core y JWT

[@KunShadows]

@@TomasRuizDiaz lo espero con ansias

[@NICODANE]

Hace un sort con fechas genio

[@casipatagonico]

Hola Tomas. Muchas gracias por el tutorial. Me sirve mucho. Tengo una duda. Hacia el final del video, 2:11:00, armas el objeto user leyendo el valor de cada uno de los formControls. ¿Hay algún problema en usar directamente: const user: Usuario = this.form.value? Saludos

[@TomasRuizDiaz]

Hola Rafael, si la interfaz/clase Usuario tiene exactamente los mismos nombres que las propiedades del fromGroup.. ningún problema!

[@jagc33]

Muy buen video, falto creo la parte de editar usuario, tienes algún video donde pueda encontrar esa parte?

[@Ismayil99]

Thanks for everything. But why you don't use "edit" and "view" buttons? Please continue this video with edit and view buttons

[@jerry10cr66]

Excelente, solo quería saber como hacer las tablas responsivas para móvil

[@pol_late]

Excelente el tuto! puede ser que falte la parte de editar?

[@TomasRuizDiaz]

Hola Pol, si la parte del editar no esta

[@yamiyura3791]

@@TomasRuizDiaz cuando la enseña 😀

[@ezecel9]

Excelente tutorial! Una consulta, si nuesto arreglo de la tabla tiene id, como hacemos para que el filtro no lo tenga en cuenta? Porque el filtro de la tabla de material toma todas las propiedades. Gracias

[@TomasRuizDiaz]

Gracias! Tenes que usar la propiedad filterPredicate del dataSource. Busca en la web que hay muchos ejemplos

[@richievelastegui]

Porfa bro has un tuto de spring consumiendo api rest externa para en front hacer inicio de sesion :cc

[@FuuwaaArtist]

Gracias me ayudaste mucho a entender esto de angular-material , pero el tutorial quedo mocho , falto usar el editar y el buscar.

[@juliangarciapaz7513]

buena tarde presento problemas con el paginado ... no me sirve no encuentro solucion a ello alguien que pueda darme algun consejo?

[@juanandresmancuello1084]

Tomas como se puede conectar esta mat-table que esta muy bueno a firebase firestore con angular 17 porque los ejemplos que hay ya no funcionan. Gracias

[@gustavosalerno7230]

Hola Tomas! Gracias por el tutorial, muy bien explicado y facil de comprender.. Por otro lado estoy trabado en la recta final, dado que el boton aceptar no esta funcionando, cuando le doy a aceptar no me imprime ni por consola lo que le estoy pidiendo( segui al pie de la letra el curso)

[@TomasRuizDiaz]

Hola Gustavo, gracias por el comentario! Algo te debe estar faltando.. acá tenes el repositorio podes comparar el componente y fijarte que es lo que te estaría faltando! github.com/truizdiaz/ang-material

[@gustavosalerno7230]

@@TomasRuizDiaz Muchas gracias por tu pronta respuesta, peron sabes que lo busque en el repositori, pero cuando entro a los archivos, no hay nada escrito más que las lineas de codigo como si no se ubiese modificado, es un archivo nuevo nada mas

[@gustavosalerno7230]

@@TomasRuizDiaz Tampoco estaria la carpeta con los archivos "crear-usuario"

[@crailos31]

hola a la hora de modificar el das.html y colocar el app-navbar me sale que verifique si es un componente de angular o que si hace parte de ese modulo alguna solución

[@jpablo120483]

A mí me sucedía lo mismo... en mi caso fue que escribí mal la ruta del módulo, yo estaba colocando en la carga perezosa (minuto 52:05) la línea { path: 'dashboard', loadChildren: () => import('./components/dashboard/dashboard-routing.module').then(x => x.DashboardRoutingModule) }, cuando lo correcto es: { path: 'dashboard', loadChildren: () => import('./components/dashboard/dashboard.module').then(x => x.DashboardModule) }. Lo corregí y me funcionó.

[@FernandoFernandez-dr6ru]

Tomas buenas tardes excelente el video y mas para mi que estoy empezando con angular. Una duda como se podría hace lo mismo con la conexión a un base de datos mysql. Saludos cordiales

[@TomasRuizDiaz]

Hola Fernando! deberías elegir alguna tecnología de backend para poder conectarte a la base de datos. Te dejo el siguiente link donde nos conectamos a MySQL utilizando .Net Core! kzbin.info/www/bejne/b5XZmZRma9GVnaM

[@FernandoFernandez-dr6ru]

@@TomasRuizDiaz Muchas gracias, lo miraré

[@pabloserranomanzarbeitia1203]

¿Qué extensiones de VSCode utilizas para Angular?

[@TomasRuizDiaz]

vscode-icons y prettier, pero hay millones que te pueden ser utiles!

[@miguelangelhilariogarcia6052]

Buenas excelente Tomss , ayudas porfa estoy con angular 13 , no me sale la importación de material de imput , me sale al poner el maus y presionar el efecto pero no se ve ningún botón tengo que tantiar, vi a detalle tu video igual lo hice , cual seri el problema . te agradezco tu respuesta ante mano

[@miguelangelhilariogarcia6052]

alguien que me apoye porfavor, en login en formulario usuario y contraseña , no puedo viaulizarlo pero si esta al pasar el cursor encima , utilizo angular 13

[@juanluis3681]

Una maravilla si señor, quedo la parte de Editar pero vamos, simple curiosidad por como montabas la logica ¿Crearias un nuevo componente reutilizando practicamente todo el de crear-usuario o harias algun tipo de comprobacion en el de crear usuario para no crear un nuevo componente y editarlo en ese mismo formulario?

[@TomasRuizDiaz]

Hola Juan, gracias por el comentario, en este caso lo mas optimo seria reutilizar el componente tanto para agregar o editar un registro. Tengo dos ejemplos mas en el canal donde agregamos y editamos (usando material). Angular Material + Node kzbin.info/www/bejne/aJu1iqurqrx6fKs. Angular Material + .Net Core: kzbin.info/www/bejne/qKbFqGuCa62kb6M

[@sandrae.mejiaf.8735]

tengo un problema en el minuto 27:30 (Se declara "fb" pero su valor no se lee nunca. ts(6133))

[@eduardoarturogonzalezmunoz295]

Hola, excelente video muchas gracias. Solo una pequeña duda, ¿Qué tan recomendable es implementar el menú dinámico, o cual es su propósito en entornos reales? Gracias y un saludo!

[@TomasRuizDiaz]

Hola Eduardo, por ejemplo, según el rol de una persona podes mostrar un menú u otro. Y mejor si lo consumís de la base de datos

[@cesarquinones6753]

@@TomasRuizDiaz Buenas noches amigo muy bueno tu video de angular material estado realizando los pasos que has estado explcando. me sale un error. Compiled with problems: ERROR src/app/components/login/login.component.ts:43:10 - error TS4111: Property '_snackBar' comes from an index signature, so it must be accessed with ['_snackBar']. 43 this._snackBar( 'usuario o contraseña ingresado son invalidos', '', { ~~~~~~~~~

[@fronce88]

Gracias por el video tiene mi like, sin embargo no esta la explicacion del editar............es posible que lo adiciones?

[@jampoolgarcia9969]

Buen video... una pregunta si agrego rutas absolutas no afectaría cuando este usando mi proyecto en prod. por que en prod la ruta cambia y los archivos compilados tienen diferentes ruta?

[@jampoolgarcia9969]

perdón la pregunta era para las rutas relativas...

[@TomasRuizDiaz]

No deberia, te tiene que funcionar de la misma manera si usas rutas absolutas o relativas, porque la ruta raiz siempre es la 'src'

[@cesararamayo1224]

Buenas Tomas la verdad que muy bueno el video lo seguí a la par como a tu curso de Udemy , muy bien explicado , quería hacer una consulta puede ser que a este video le falte la parte donde editas el usuario??? Saludos!!!

[@TomasRuizDiaz]

Hola Cesar, si falta el edit. Chequea los otros videos del canal que si tienen el edit, solamente deberías seguir la misma linea!

[@ManuelCastillo-kq3xy]

Una consulta Tomás: es posible que en Dashboard, Usuarios y Reportes, existan submenús? Algo asi: Usuario: Agregar, Editar, Buscar? Gracias por tu respuesta.

[@hectorhernandez-wk8jc]

Si, lo haces con

[@yovanies2798]

Excelente tutorial, siempre veo tus videos Tomás. quería hacerte una consulta el repositorio está incompleto verdad, ya que no hallo el de CREAR USUARIO. Y mi otra consulta es si puedo realizar el proyecto con angular version 13

[@TomasRuizDiaz]

Hola Yovani, si puedes hacerlo con la versión 13, y respecto al repo voy a ver si lo puedo subir de vuelta

[@omargalindez7420]

a mi por los momnetos no me agarra ni las animaciones. ni el paginado :S podrían ayudarme?

[@brunolaviano]

Excelente material! Combinado con el video .Net Core + Angular 11 ( kzbin.info/www/bejne/n6KrfIOZZa6grKc ) en el cual incluye backend + frontend es de mucha utilidad si utilizas un poco la imaginación! Muchas gracias por el aporte!

[@ricardob8032]

Hola una pregunta como hago que la tabla sea reponsive si le pongo muchos datos y si la pantalla es muy pequeña se ve mal

[@diegoolivareslastra4510]

excelente video amigo pero la parte de editar usuario no esta y también necesitaba para guiarme de eso :(

[@elizabalort]

hola!! oye estoy iniciando con angular y estoy viendo el video sigo paso por paso y al momento de ingresar usuario y contrasena a mi no me carga la pagina de dashboard se queda en spinner, me podrias auxiliar, excelente video, saludos

[@manokaranmanivasakan5141]

Great job

[@TomasRuizDiaz]

Thanks!

[@LeslieSolorzanov]

Como consigo el mismo autocompletar para HTML en vscode?

[@TomasRuizDiaz]

escribís por ejemplo la palabra 'div' y le das a la tecla enter y te crea las etiquetas . Lo mismo si por ejemplo pones div.text-center, te crea la etiqueta

[@iDelgao]

Tengo un problema con el ejemplo. Al agregar un usuario me lo muestra por consola, pero no añade los datos al array y no me lo muestra en la tabla.

[@jamito58]

Por que será que se demora para mostrar el formulario me toca varias veces darke click al botón para registrar

[@dante85warrior41]

bro tienes algun video con angular donde le mandes en el formulario la fecha como un jcalendar en asp viene incluido pero en angular como implementarias eso y asi guardar una fecha inicial sin tener que escribirla sino solo seccionandola

[@TomasRuizDiaz]

Probaste con el datapicker de angular material?? material.angular.io/components/datepicker/overview

[@dantedeo5447]

Hola Tomas, excelente tutorial! Queria hacerte una consulta, cuando creamos el modulo y lo colocamos en la carpeta shared. ¿Se coloca shared por algun motivo o podría colocar de nombre "modules"?

[@TomasRuizDiaz]

Hola dante, le podes poner el nombre que vos quieras, pero 'modules' (solo) suena un poco mal

[@ziggys.9768]

Si se quisiera hacer responsive para la vista de mobile, que se deberia emplear? Que herramienta seria correcta para que no se rompa el estilo cuando se cambia la resolucion?

[@TomasRuizDiaz]

Podrías usar flexbox. También en muchos proyectos usan bootstrap y angular material

[@JessaC2023]

Much better if with English sub ☺️

[@angel92Sand]

Utilizo angular material y estoy usando el componente tabla expandible pero quiero que al expandirse dentro quiero agregar otra tabla

[@stuardquirozc8021]

tambien quiero saber eso

[@sebastiancampos509]

Hola, alguien sabe como se puede solucionar este error : 'Can't bind to 'dataSource' since it isn't a known property of 'table' gracias

[@ashlyanahi3196]

¿Pueden orientarme para realizar la parte de editar?):

[@iDelgao]

Encontraste como hacerlo? Es lo que le falta a este video. Y de lo más importante.

[@jsonnyramosq.1479]

hola soy nuevo en angular, me ayudarian a como hacer una pagina responsiva con angular material

[@TomasRuizDiaz]

Hola con el framewokr bootstrap lo podes hacer de una manera muy simple, y lo podes combinar sin problemas con Angular Material

[@luisormeno9101]

Hola, buen video y bien explicado, pero recomiendo que la fuente de texto del codigo sea mas grande porque dificulta la lectura, eso pone en duda adquirir el curso completo xq tengo que estar con el zoom

[@TomasRuizDiaz]

Hola Luis, lo voy a tener en cuenta!

[@freezersantos1172]

Saludos Cordiales Tomas... Por favor le hago una pregunta … Yo tengo un Sistema Administrativo Contable de ESCRITORIO hecho en Visual Basic 6.0, Crystal Reports 8.5 y SQL 2012 es un Sistema BIEN GRANDE … Y obviamente quisiera volverlo a desarrollar en las nuevos lenguajes de programación y que sea FULL WEB …. En que lenguajes me recomiendas que lo haga …. ? …. Gracias

[@TomasRuizDiaz]

Hola Freezer, en el front end los framewokrs mas utilizados a la fecha son Angular, React, y Vue.. Cual es el mejor?? es un gran debate! Seguramente vas a tener éxito con cualquiera de los 3 que elijas!.. y por parte del back end, en el mercado se usa mucho NodeJS, Net Core, Java, Ruby, PHP

[@juliangarciapaz7513]

CUANDO SE REALIZA EL FILTRO DIRECTAMENTE DESDE UNA API NO FUNCIONA ..... YA QUE EN EL TUTORIAL MUESTRAN CON INFORMACION DIRECTAMENTE ESCRITA EN EL CODIGO MAS NO TRAYENDOLA DESDE UN ENDPOINT .... SI ALGUIEN HA PODIDO CON ESTE TEMA SERIA DE MUCHA AYUDA COMPARTIR LA SOLUCION

[@nachobaez2052]

Amigo ya pudiste solucionar eso por qué tengo el mismo problema

[@ramiromoreno9581]

sabes como podria poner mas campos que venga de Element_Data ? agrego uno mas y no he tenido respuesta

[@TomasRuizDiaz]

Hola Ramiro tienes que agregar una columna mas en el archivo HTML y TS

[@jamito58]

Si ya esta instalado el paquete y si mostrando el error que sera Can't bind to 'pageSizeOptions' since it isn't a known property of 'mat-paginator' me pueden ayudar

[@TomasRuizDiaz]

Hola Jaimito, te falta importar MatPaginatorModule

[@jamito58]

@@TomasRuizDiaz tomas ya se lo había puesto en la app.modal y a un si botando error

[@jamito58]

buena tardes quiero implementar firstformgroup donde puedo encontrar informacion

[@TomasRuizDiaz]

Hola Jaimito, este video implementamos los formularios con la clase FormGroup

[@jamito58]

@@TomasRuizDiaz ok no he podido ver el el video todo completo en el trabajo me tienen ocupado y necesito eso para mi proyecto de grado

[@augustobritos1285]

Hola Tomás ¿qué versión de Angular usas tú? El lazyload y otras cosas no me funcionan en Angular 14

[@TomasRuizDiaz]

Hola Augusto, acabo de revisar la documentación oficial y nada cambio. Te debe estar faltando algo. angular.io/guide/lazy-loading-ngmodules

[@augustobritos1285]

@@TomasRuizDiaz Muchas gracias por tu respuesta, de paso aprovecho para agradecerte por este material excelente y decirte que explicas muy bien sigue asi!!!

[@TomasRuizDiaz]

@@augustobritos1285 Gracias!

[@fronce88]

Una pequela consulta por q me puede estar saliendo este error Can't bind to 'FormGroup' since it isn't a known property of 'form'

[@TomasRuizDiaz]

Hola Daniel, fijate si estas importando el modulo ReactiveFormsModule

[@sebasbermeo]

Hola, al momento de ejecutar el servidor me sale el siguiente error: opensslErrorStack: [ 'error:03000086:digital envelope routines::initialization error' ], library: 'digital envelope routines', reason: 'unsupported', code: 'ERR_OSSL_EVP_UNSUPPORTED' } ya intenté instalando openssl y demás cosas, pero nada me funciona, me podrías ayudar por favor?

[@mochellalle3524]

reinstala el angular CLI

[@josedroguett6276]

Estimado Tomas tengo un problema, cuando reemplazo lso datos de usuario por una API de laravel, deja de funcionar el sort y el paginator, ya intente de todo, por favor tu ayuda! el mensaje que me sale es: ERROR TypeError: Cannot set property 'paginator' of undefined

[@TomasRuizDiaz]

Hola Jose, cuando luego de hacer la petición HTTP y setearlo al MatTableDataSource, agrega estas dos lineas this.dataSource.paginator = this.paginator;

[@josedroguett6276]

Tomas, comentarte que hice lo que me dijiste la buena noticia es que el paginator ya funciona a la perfección la mala es que el sort sigue sin funcionar :’(

[@TomasRuizDiaz]

*Agrega también this.dataSource.sort = this.sort; Ahí te debería funcionar

[@josedroguett6276]

@@TomasRuizDiaz estimado Tomas te comento que puse la línea del sort donde indicas, sin embargo sigue sin funcionar, lo extraño es que en la ventana de inspección no lanza ningún error como lo hacía el paginator, simplemente no funciona, qué podrá ser ?