Angular Material Tutorial
Вставка
- Опубліковано 26 лип 2024
- Actualización del video en ingles 2024: • Angular Material Tutor...
Canal en ingles: / @tomiruizdiaz1
✅ Cupones cursos Udemy:
truizdiaz.github.io/cupones/
Angular Material + Node: • Angular Material - No...
Angular Material + .Net Core: • .NET Core 6 y Angular ...
En este video veremos:
- Como configurar Angular Material
- Formularios Reactivos y Validaciones
- Lazy loading
- Rutas hijas
- Carga de un menú dinámico
Repositorio: github.com/truizdiaz/ang-mate...
00:00:00 - Qué vamos a hacer?
00:01:37 - Creación del Proyecto
00:08:22 - Login
00:43:14 - Shared Module
00:46:38 - Dashboard
00:55:38 - Rutas hijas
01:07:20 - Carga menú dinámico
01:17:37 - Tabla - Filtro, ordenamiento y paginación
01:37:43 - Eliminar usuario
01:47:43 - Agregar usuario
02:04:15 - Editar usuario
Te quedaste corto??
Curso Angular + Net Core - Aplicación de Preguntas y Respuestas: bit.ly/32YtkkS
Curso Angular - La Guía Completa + 15 Proyectos: bit.ly/32YtkkS
Curso Angular - Firebase: bit.ly/32YtkkS
#AngularMaterial #Angular
Que alegría que pongas un nuevo video de angular, tengo varios cursos tuyos de Udemy y son de lo mejor ;-)
Tu contenido es de lo mejor 👌👍🏻 felicitaciones !! Gracias por tu aporte a la comunidad digital
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
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!
1 año de esto y aún sigue ayudando, gracias por tan gran aporte y sencillo de entender
Tus videos son excelentes. No solo se explica como usar las tecnologias sino tambien la documentacion oficial.
muy bueno. Estoy iniciandome en Material y fue un gran pantallazo inicial
Amigo, admiro tu trabajo. Nuevo suscriptor y tienes todo mi apoyo.
Excelente aporte, yo estoy iniciando con angular, pero me diste la introduccion de muchos elementos basicos y su funcion. Gacias....!!!!
Buen aporte, seguía usando dataTables Js dentro de angular, ahora lo implementaré asi.
Aun no termino de verlo completo, pero gracias, esta muy bueno.
Excelente video, estoy incursionando como frontend y me pareció súper simple e entendible
me demore todo mi domingo en replicarlo punto por punto, muy buen aporte gracias.
Muy buena la explicación de angular, muchas gracias por la explicación
Excelente, muy muy bueno, el mejor que he visto
Master Class! Mil gracias!!!!
Excelente aporte, me ayudo un montón ,
El mejor video de angular para principiantes en youtube =)
Gracias kimet por el cometario!
uffff por fin terminé el tuto... muchas gracias
Excelente tutorial, muy bien explicado, gracias por compartir
Muchusimas gracias compañero, no sabia como hacerlo.
Este video vale oro, excelenteeeee
el mejor de todos, es que no tengo palabras enserio, justo acabo de terminar
Videazo hermano. Muchas gracias
EXCELENTEEEEEEEE VIDEO ni siquiera los profes de Udemy hacen una app tan bien explicada! Gracias me sirvió mucho!!!
Excelente aporte de un vistazo general de Material Crack
excelente video ,muy educativo, aunque falto la función del botón editar, en general un excelente contenido.
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!
Gracias por tan grandioso aporte
Thank you so much. It helped me a lot.
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.
Hola Miguel, lo voy a tener en cuenta para futuros videos!
Buen video. Se agradece!
👍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.
Gracias HL por el comentario. Si hay muy buen material en YT 😊
@@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
@@TomasRuizDiaz Ya encontré el error que tenía. De todos modos valga la redundancia está muy bueno todo lo que explicaste. Gracias
Gran tutorial, gracias
gracias por excelente explicación
Muchas gracias, muy buen video. Si podría agregar el componente para editar los usuarios seria genial.
Groso Mannnn. Me hiciste más sencillo la tesis. Que tengas una excelente vida: Suscribo + like.
Listo, ya compré tu curso de UDEMY SALUDOS, no vi lo de los cupones pero compré el curso en promoción 😉
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.
Muchas gracias!
muchas gracias hermanito
Lo pregunta mía es una sola.... ¿Por qué no tienes mas suscriptores? Tienes contenindo de alta calidad
¡Gracias!
Muy bueno el video, lo único, me quede esperando la funcionalidad de Editar y no esta, tendrás esto en otro video?.
Great job
Thanks!
1:15:15 esta de la nasa ese menú!!!!!!!!!!🚀🚀🚀
Hace un sort con fechas genio
Thanks for everything. But why you don't use "edit" and "view" buttons? Please continue this video with edit and view buttons
Muy buen video, falto creo la parte de editar usuario, tienes algún video donde pueda encontrar esa parte?
Excelente, solo quería saber como hacer las tablas responsivas para móvil
buena tarde presento problemas con el paginado ... no me sirve no encuentro solucion a ello alguien que pueda darme algun consejo?
Hola, esta bueno el tuto, seria genial poder tener la explicacion de como hacer el login con el backend que puede ser .Net Core
Hola Kun, tengo pendiente subir uno con Angular Material, Net Core y JWT
@@TomasRuizDiaz lo espero con ansias
Excelente material! Combinado con el video .Net Core + Angular 11 ( ua-cam.com/video/iqHKPc0ImvE/v-deo.html ) en el cual incluye backend + frontend es de mucha utilidad si utilizas un poco la imaginación! Muchas gracias por el aporte!
a mi por los momnetos no me agarra ni las animaciones. ni el paginado :S podrían ayudarme?
Gracias me ayudaste mucho a entender esto de angular-material , pero el tutorial quedo mocho , falto usar el editar y el buscar.
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?
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"?
Hola dante, le podes poner el nombre que vos quieras, pero 'modules' (solo) suena un poco mal
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!
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
@@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', '', {
~~~~~~~~~
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
Hola Yovani, si puedes hacerlo con la versión 13, y respecto al repo voy a ver si lo puedo subir de vuelta
Porfa bro has un tuto de spring consumiendo api rest externa para en front hacer inicio de sesion :cc
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?
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 ua-cam.com/video/2jRYxuuWGFI/v-deo.html. Angular Material + .Net Core: ua-cam.com/video/rubw8L6Hq9A/v-deo.html
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
Gracias! Tenes que usar la propiedad filterPredicate del dataSource. Busca en la web que hay muchos ejemplos
👽👽😍😍😍😍
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!!!
Hola Cesar, si falta el edit. Chequea los otros videos del canal que si tienen el edit, solamente deberías seguir la misma linea!
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
Hola Rafael, si la interfaz/clase Usuario tiene exactamente los mismos nombres que las propiedades del fromGroup.. ningún problema!
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
excelente video amigo pero la parte de editar usuario no esta y también necesitaba para guiarme de eso :(
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
Hola, alguien sabe como se puede solucionar este error : 'Can't bind to 'dataSource' since it isn't a known property of 'table' gracias
Amigo, una pregunta. Como puedo retomar este sistema de diseño en Figma para que coincida con los elementos que estas retomando de angular
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
Gracias por el video tiene mi like, sin embargo no esta la explicacion del editar............es posible que lo adiciones?
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
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! ua-cam.com/video/9dvha06lbgA/v-deo.html
@@TomasRuizDiaz Muchas gracias, lo miraré
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?
perdón la pregunta era para las rutas relativas...
No deberia, te tiene que funcionar de la misma manera si usas rutas absolutas o relativas, porque la ruta raiz siempre es la 'src'
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.
Si, lo haces con
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.
¿Qué extensiones de VSCode utilizas para Angular?
vscode-icons y prettier, pero hay millones que te pueden ser utiles!
Utilizo angular material y estoy usando el componente tabla expandible pero quiero que al expandirse dentro quiero agregar otra tabla
tambien quiero saber eso
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
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
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
Probaste con el datapicker de angular material?? material.angular.io/components/datepicker/overview
Como consigo el mismo autocompletar para HTML en vscode?
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
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?
Podrías usar flexbox. También en muchos proyectos usan bootstrap y angular material
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)
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
@@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
@@TomasRuizDiaz Tampoco estaria la carpeta con los archivos "crear-usuario"
Much better if with English sub ☺️
Excelente el tuto! puede ser que falte la parte de editar?
Hola Pol, si la parte del editar no esta
@@TomasRuizDiaz cuando la enseña 😀
Falta la parte de cómo editar un usuario
hola soy nuevo en angular, me ayudarian a como hacer una pagina responsiva con angular material
Hola con el framewokr bootstrap lo podes hacer de una manera muy simple, y lo podes combinar sin problemas con Angular Material
¿Pueden orientarme para realizar la parte de editar?):
Encontraste como hacerlo? Es lo que le falta a este video. Y de lo más importante.
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
Amigo ya pudiste solucionar eso por qué tengo el mismo problema
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
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ó.
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
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
Por que será que se demora para mostrar el formulario me toca varias veces darke click al botón para registrar
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?
sabes como podria poner mas campos que venga de Element_Data ? agrego uno mas y no he tenido respuesta
Hola Ramiro tienes que agregar una columna mas en el archivo HTML y TS
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'
Hola Daniel, fijate si estas importando el modulo ReactiveFormsModule
amigo una pregunta trabajar con formularios en angular material, tambien se importa el FormsModule? o el MatFormFieldModule reemplaza a FormsModule
Hola Jonathan, deberías importar los dos
@@TomasRuizDiaz gracias
tengo un problema en el minuto 27:30 (Se declara "fb" pero su valor no se lee nunca. ts(6133))
buena tardes quiero implementar firstformgroup donde puedo encontrar informacion
Hola Jaimito, este video implementamos los formularios con la clase FormGroup
@@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
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
Hola Jaimito, te falta importar MatPaginatorModule
@@TomasRuizDiaz tomas ya se lo había puesto en la app.modal y a un si botando error
no se xq pero el navbar no me da y me sale error xq?