ch12.md

Capítulo 12 Angular Material

Instalación

Ejecute con los valores propuestos por defecto:

ng add @angular/material

Todos los ficheros de configuración se actualizan para configurar Angular Material.

Adición de componentes

Los componentes de Angular Material también se pueden usar importando su módulo respectivo, como MatButtonModule para botones. Sin embargo, se recomienda importar los componentes directamente, ya que ayuda a mantener la coherencia con los patrones modernos de Angular. No obstante, se observará que algunas características requieren la importación de demasiados componentes. En esos casos, es aceptable importar el módulo directamente.

Integración de componentes de UI

Angular Material contiene muchos componentes de UI organizados en categorías en https://material.angular.io/components/categories. En este capítulo, se explora un subconjunto de la colección anterior que se puede agrupar en las siguientes categorías:

• Controles de formulario: Se pueden usar dentro de un formulario Angular, como autocompletar, input y lista desplegable.
• Navegación: Proporcionan capacidades de navegación, como un encabezado y un pie de página.
• Diseño (Layout): Definen cómo se representan los datos, como una tarjeta o una tabla.
• Ventanas emergentes y superposiciones (Popups y overlays): Son ventanas superpuestas que muestran información y pueden bloquear cualquier interacción del usuario hasta que se cierran de alguna manera.

Form controls

En el Capítulo 10 se aprendió que los controles de formulario se utilizan para recopilar datos de input de diferentes maneras y realizar acciones adicionales, como enviar datos a una API de backend a través de HTTP. Existen bastantes controles de formulario en la biblioteca de Angular Material de varios tipos, a saber, los siguientes:

• Autocomplete: Permite al usuario comenzar a escribir en un campo de input y que se le presenten sugerencias mientras escribe. Ayuda a reducir los posibles valores que puede tomar el input.
• Checkbox: Una casilla de verificación clásica que representa un estado marcado o desmarcado.
• Date picker: Permite al usuario seleccionar una fecha en un calendario.
• Input: Un control de input clásico mejorado con animaciones significativas mientras se escribe.
• Radio button: Un botón de radio clásico mejorado con animaciones y transiciones mientras se edita para crear una mejor experiencia de usuario.
• Select: Un control desplegable que le pide al usuario que seleccione uno o más elementos de una lista.
• Slider: Permite al usuario aumentar o disminuir un valor tirando de un botón deslizador hacia la derecha o hacia la izquierda.
• Slide toggle: Un interruptor que el usuario puede deslizar para activar o desactivar.
• Chips: Una lista que muestra, selecciona y filtra elementos.

Input El componente input se adjunta normalmente a un elemento HTML <input>. También se puede añadir la capacidad de mostrar errores en el campo de input.

Select El componente select funciona de forma similar al elemento HTML nativo <select>. Muestra un elemento desplegable con una lista de opciones para los usuarios.

Chips El componente chips se utiliza a menudo para mostrar información agrupada por una propiedad específica. También puede proporcionar capacidades de filtrado y selección de datos. Se pueden usar chips en nuestra aplicación para mostrar la categoría en el componente de detalles del producto. Nuestros productos solo tienen una categoría, pero los chips tendrían más sentido si tuviéramos categorías adicionales asignadas a nuestros productos.

Navegación

Existen diferentes formas de navegar en una aplicación Angular, como hacer clic en un enlace o en un elemento de menú. Angular Material ofrece los siguientes componentes para este tipo de interacción:

• Menu: Una lista emergente donde se puede elegir entre un conjunto predefinido de opciones.
• Sidenav: Un componente que actúa como un menú acoplado a la izquierda o a la derecha de la página. Puede presentarse como una superposición sobre la aplicación mientras atenúa el contenido de la aplicación.
• Toolbar: Una barra de herramientas estándar que permite al usuario acceder a acciones de uso común.

Layout

Cuando nos referimos al layout, hablamos de cómo se coloca el contenido en las template. Angular Material proporciona diferentes componentes para este propósito:

• List: Visualiza el contenido como una lista de elementos. Puede enriquecerse con enlaces e iconos, e incluso ser de varias líneas.
• Grid list: Ayuda a organizar el contenido en bloques. Solo se necesita definir el número de columnas; el componente llenará el espacio visual.
• Card: Envuelve el contenido y añade una sombra de caja. También se puede definir un encabezado para este.
• Tabs: Divide el contenido en diferentes pestañas.
• Stepper: Divide el contenido en pasos tipo asistente.
• Expansion panel: Permite colocar el contenido en forma de lista con un título para cada elemento. Los elementos solo pueden expandirse uno a la vez.
• Table: Representa los data en un formato tabular con filas y columnas.

Card

Un componente card de Angular Material consta de un encabezado, indicado por el elemento HTML <mat-card-header>. El componente de encabezado contiene un elemento HTML <mat-card-title-group> que alinea el título de la tarjeta, el subtítulo y la imagen en una sola sección. El título de la tarjeta, indicado por el elemento HTML <mat-card-title>, muestra el título del producto. El subtítulo de la tarjeta, indicado por el elemento HTML <mat-card-subtitle>, muestra la categoría del producto. Finalmente, la imagen del producto se muestra adjuntando la directiva mat-card-sm-image a un elemento HTML <img>. La palabra clave sm en la directiva indica que se desea renderizar la imagen en un tamaño pequeño. Angular Material también soporta md y lg para tamaños medianos y grandes, respectivamente.

El componente card de Angular Material se compone de muchos otros componentes y directivas. Se opta por importar el módulo completo de Angular porque no sería conveniente importarlos todos individualmente.

Puede explorar más opciones para el componente card navegando a https://material.angular.io/components/card/overview.

Datatable

El componente table de la librería Angular Material permite mostrar los datos en columnas y filas. Para crear una tabla, se debe importar la clase MatTableModule del namespace @angular/material/table. La datatable de Angular Material consta de muchos otros componentes y directivas. Se opta por importar el módulo completo de Angular porque no sería conveniente importarlos todos individualmente.

Una tabla de Angular Material es un elemento HTML <table> estándar con la directiva mat-table adjunta. La propiedad dataSource de la directiva mat-table define los datos que se quieren mostrar en la tabla. Puede ser cualquier dato que se pueda enumerar, como un array. En este caso, se vincula a la variable de referencia de template products.

El elemento <ng-container> es un elemento de propósito único que agrupa elementos con funcionalidad similar. No interfiere con el estilo de los elementos hijos, ni se renderiza en la pantalla. El elemento <ng-container> utiliza la directiva matColumnDef para establecer el nombre de la columna específica. El valor de la directiva matColumnDef debe coincidir con un valor de la propiedad del componente columnNames; de lo contrario, la aplicación arrojará un error indicando que no puede encontrar el nombre de la columna definida.

Contiene un elemento HTML <th> con una directiva mat-header-cell que indica el encabezado de la celda y un elemento HTML <td> con una directiva mat-cell para los datos de la celda. El elemento HTML <td> utiliza la directiva matCellDef para crear una variable de template local para los datos de la fila actual que se pueden usar posteriormente.

Popups and overlays

Existen diferentes formas de captar la atención del usuario en una aplicación web. Una de ellas es mostrar un cuadro de diálogo emergente sobre el contenido de la página y solicitar al usuario que actúe en consecuencia. Otra forma es mostrar información como una notificación en diferentes partes de la página. Angular Material ofrece tres componentes diferentes para manejar estos casos:

• Dialog: Un cuadro de diálogo modal emergente que se muestra encima del contenido de la página.
• Badge: Una pequeña indicación circular para actualizar el estado de un elemento de la interfaz de usuario.
• Snackbar: Un mensaje informativo que se muestra en la parte inferior de una página y es visible brevemente. Su propósito es notificar al usuario el resultado de una acción, como guardar un formulario.

Confirmation dialog

ng generate component checkout

Se utiliza el servicio MatDialog para mostrar el componente de pago. El servicio MatDialog acepta como parámetro el tipo de clase del componente que representa el diálogo.

El método open del servicio MatDialog devuelve una propiedad observable afterClosed, que notifica cuando el diálogo se cierra. El observable emite cualquier valor que se envíe desde el diálogo.

Más adelante en el capítulo, se aprenderá cómo devolver un valor booleano desde el componente de diálogo que coincida con el tipo devuelto por la función CanDeactivateFn.

Mostrar notificaciones al usuario La biblioteca Angular Material impone patrones y comportamientos que mejoran la experiencia de usuario de la aplicación. Un aspecto de la experiencia de usuario de la aplicación se refiere a proporcionar notificaciones a los usuarios sobre acciones específicas. Angular Material proporciona los componentes badge y snackbar que se pueden usar en este caso.

Aplicar un snackbar Otro buen patrón de experiencia de usuario cuando se trabaja con aplicaciones CRUD es mostrar una notificación cuando una acción se ha completado. Se puede aplicar este patrón mostrando una notificación cuando se añade un producto al carrito de compras.

Se utiliza el método open del servicio MatSnackBar para mostrar un snackbar. El método open acepta tres parámetros: el mensaje que se desea mostrar, cualquier acción que se desee realizar cuando se cierre el snackbar y un objeto de configuración. El objeto de configuración permite establecer varias opciones, como la duración en milisegundos durante la cual el snackbar estará visible.

No se pasa un parámetro para la acción porque no se desea reaccionar cuando el snackbar se cierra.