Angular Material In Depth (Angular 22)
In-depth guided tour to the Angular Material component library (in Angular 22)
Así estudias: curso autodidacta
- Autodidacta y 100% en línea: contenido disponible 24/7.
- Avanzas a tu ritmo: la plataforma guarda tu progreso.
- Sin tutor ni clases en vivo: el curso está diseñado para estudiarse por tu cuenta.
- Te evalúas con actividades automáticas, sin entregas a un tutor.
Lo que serás capaz de hacer
This course covers in detail the Angular Material component library, and comes with a running Github repo. This Course in a Nutshell Angular is an amazing framework that does a lot of the work for us, but one thing that the core modules don't do by themselves is provide you with commonly used user interface components . Imagine what it would be like to use Angular, but have to develop all your dropdown boxes, date pickers, menus, and all those commonly needed and very standard components every time that you need to develop an application. This would be not only impractical, but in most cases impossible as some of these components might take weeks to months to develop and test given their complexity! Also, how about styling and theming your application and make sure that everything looks neat and professional ? Imagine what it would like to have to style your whole application from scratch, from a completely empty page. This is a huge amount of work and custom development that most companies prefer to avoid. And so this is where Angular Material comes in! :-) Angular Material is an amazing component suite for Angular which is based on Material Design (a UI development standard from Google). With Angular Material, you can quickly give your applications that typical Android-like Material Design look and feel, just by adding a few components and styles to your application. Also, you will never have to develop your own date picker and many other commonly needed components, everything is already available from the beginning of your project. These are very high quality components that have been extensively tested in thousands of applications, including for usability, user-friendliness and responsiveness. These components, developed by Google themselves are some of the highest quality UI components that you can choose to build your application, and they are ready to be used from day one in your project. Course Overview In this course we are going to build a sample Angular application from scratch using Angular Material. We are going to first set up the menu structure of the application, and then we are going to display some data on the screen using commonly used container components like tab containers, and we will apply some Material Design principles. We will then learn how to use some of the most commonly needed form controls, like inputs and text areas, date pickers, dropdowns, radio buttons and checkboxes, and other commonly used form components. We will build a complex form using Angular Material, and show how to properly display form control errors. We will then learn how to use Material data table component to display tabulated data, including how to credit in-place editable tables and expandable table rows. We will show how to paginate the data in the data table, and we will display a loading indicator to the user while the data gets loaded. We will also cover in detail a very commonly used feature which are dialogs, and discuss when to use them and when not to use them and talk about some useful best practices. We will then cover some of the most advanced components in the Angular Material suite, including it's powerful drag and drop features, the responsive design capabilities of Angular Material, and we will cover also in detail how to use the material tree component. We will learn how to handle large amounts of data using virtual scrolling, and we will finish the course by learning how to create your own custom themes. Table of Contents This course will go over the following topics: Set up Angular Material from scratch navigation and containers, side menu, tab container display data with cards, use some buttons commonly used form controls and buttons - create course form inputs and text areas radio buttons, checkboxes, tooltips date picker, date/time formatting Displaying form errors Angular Data Table in depth Editable in-line table Expandable table rows pagination and loading indicator Overlays, best practices to use them Drag and Drop Responsive design with mat-grid-list Responsive breakpoint observers Tree component Virtual scrolling - handling large amounts of data Custom Themes Switching themes at runtime What Will You Learn In this Course? At the end of this course, you will feel very comfortable using the Angular Material library to build and style your applications You will know how to add Angular Material to an existing Angular application, and you will be familiar with most of its more commonly used components, as well as with many of the most advanced components Have a look at the course free lessons below, and please enjoy the course
- Code in Github repository with downloadable ZIP files per section
- Learn how to use the Angular Material Library
- Learn how to design responsive applications with Angular Material
- Learn how to setup the Navigation Menu of your Angular Material Application
- Learn how to use the most commonly needed Angular Material Form Widgets
- Master the Angular Material Data Table, learn server-side Pagination, Sorting and Filtering
Temario
UNIDAD 1 - Introduction · 5 leccionesUNIDAD 1 - Introduction
UNIDAD 1 - Introduction
- IMPORTANT
- Angular Material In Depth - Helicopter View
- How to Take this Course - Set Up Your Local Development
- What is Angular Material?
- How to Add Angular Material to Your Project
UNIDAD 2 - Angular Material Navigation and Container Components · 22 leccionesUNIDAD 2 - Angular Material Navigation and Container Components
UNIDAD 2 - Angular Material Navigation and Container Components
- Setting Up a Complete Navigation System With Angular Material
- Angular Material Dropdown Menus
- Angular Material Tab Groups
- Angular Material Cards - How to Use Them?
- Angular Material Stepper - Multi-Step Forms
- Angular Material Input Field: Lots Of Useful Options
- Angular Material Radio Button
- Angular Material Select Box
- Angular Material Date Picker
- Angular Material Date Picker - Highlighting a Calendar Date
- Angular Material Check Box
- Angular Material Text Area
- Angular Material Tooltip - Several Useful Options
- Angular Material Data Table - Complete Example With Simplified DataSource
- How To Style The Columns of an Angular Material Data Table
- Angular Material Data Table - Loading Data From the Backend
- Angular Material Loading Indicator
- Angular Material Data Table Paginator
- Angular Material Data Table - Sorting Data
- Angular Material Data Table - Multi-Template Data Rows and Expandable Rows
- Angular Material Data Table Data Selection
- Angular Material Data Table - Sticky Header and Sticky Columns
UNIDAD 3 - Angular Material Dialogs · 3 leccionesUNIDAD 3 - Angular Material Dialogs
UNIDAD 3 - Angular Material Dialogs
- Angular Material Dialogs - How To Create a Dialog
- Angular Material Dialog - Final Implementation and Demo
- Angular Material Dialog - Best Practices, Patterns and Anti-Patterns
UNIDAD 4 - Angular Material Advanced Features · 2 leccionesUNIDAD 4 - Angular Material Advanced Features
UNIDAD 4 - Angular Material Advanced Features
- Angular Material Drag and Drop - Complete Step-by-Step Example
- Angular Material Drag and Drop Between Different Lists
UNIDAD 5 - Responsive Design With Angular Material · 5 leccionesUNIDAD 5 - Responsive Design With Angular Material
UNIDAD 5 - Responsive Design With Angular Material
- Introduction To Responsive Design With Angular Material
- The Angular Material mat-grid-list Component
- The Angular Material Responsive Breakpoint Observer Service
- Writing Responsive CSS for Angular Material Components
- Angular Material Responsive Dialogs
UNIDAD 6 - Angular Material Tree Component · 3 leccionesUNIDAD 6 - Angular Material Tree Component
UNIDAD 6 - Angular Material Tree Component
- Introduction to The Angular Material Tree Component
- Angular Material Nested Tree - Step-by-Step Example
- Angular Material Flat Trees
UNIDAD 7 - Virtual Scrolling and Custom Themes · 2 leccionesUNIDAD 7 - Virtual Scrolling and Custom Themes
UNIDAD 7 - Virtual Scrolling and Custom Themes
- Angular Material Virtual Scrolling
- Angular Material Custom Theme
UNIDAD 8 - Conclusion · 2 leccionesUNIDAD 8 - Conclusion
UNIDAD 8 - Conclusion
- Bonus Lecture (Updated October 2026)
- Angular Material In Depth - Conclusions & Key Takeaways
Certificado con validez SEP: lo emite la SEP, no solo una plataforma
Al demostrar la competencia recibes un certificado emitido por la Secretaría de Educación Pública a través del Gobierno del Estado de México: un documento oficial que puedes presentar con confianza ante cualquier empleador o institución.
Tu certificado con INEC
- Lo emite la Secretaría de Educación Pública (SEP), a través del Gobierno del Estado de México
- Documento oficial con folio verificable en línea
- Lo otorga la Universidad Tecnológica Fidel Velázquez
Otras plataformas en línea
- Constancia privada emitida por la misma plataforma
- Solo acredita horas cursadas o asistencia
- Sin respaldo de una autoridad educativa
Tu itinerario, de la inscripción al certificado
- 1
Inscripción con pago único
Pagas $2,800 MXN una sola vez y entras de inmediato al curso.
- 2
Estudias a tu ritmo
8 unidades con videos, lecturas y actividades, disponibles 24/7 durante 12 meses.
- 3
Cuestionarios por unidad
Cuestionarios para comprobar lo aprendido.
- 4
Certificado
Emitido por la SEP a través del Gobierno del Estado de México, con folio verificable.
Un certificado oficial de la SEP
- Emitido por la Secretaría de Educación Pública (SEP), a través del Gobierno del Estado de México. No es una constancia privada: es un documento oficial, y ese respaldo marca la diferencia frente a otras plataformas en línea.
- Contenido impartido por Angular University.
- Folio y QR verificables para compartirlo con quien te contrate.
Empieza hoy, a tu ritmo
Un solo pago y acceso inmediato al curso completo durante 12 meses.
- 8 unidades · 44 lecciones · 40 h
- 12 meses de acceso
- Certificado emitido por la SEP (Gob. del Estado de México) con folio verificable
Sobre tu inscripción
¿Cómo es el pago?
Un solo pago de $2,800 MXN. No hay mensualidades ni cargos recurrentes.
¿Cuánto tiempo tengo acceso?
12 meses desde tu inscripción, 24/7, para avanzar a tu ritmo.
¿Quién imparte el contenido?
El curso es impartido por Angular University; INEC gestiona tu inscripción, evaluación y certificado.
¿Qué pasa cuando vence mi acceso?
Puedes renovar tu cuenta tú mismo desde la plataforma, sin trámites ni esperas.
¿El curso tiene validez SEP?
Sí. Al completar el curso recibes un certificado emitido por la SEP a través del Gobierno del Estado de México, con folio verificable.
¿El curso tiene tutor o clases en vivo?
No. Es un curso autodidacta: estudias por tu cuenta, a tu ritmo, sin tutor ni sesiones en vivo.
¿Cómo se evalúa?
Te evalúas con actividades automáticas, sin entregas a un tutor.
Cursos relacionados
Incluido en la Membresía Educativa
Este curso forma parte de los 647 cursos autodidactas con certificado que incluye la membresía, por un solo pago anual.
Membresía Educativa: cursos en línea con validez SEP

