Resumen: utilizar el componente MatDialog de Angular Material para mostrar un diálogo de confirmación, y de la misma manera ejemplificar cómo usar diálogos en Angular utilizando componentes y plantillas personalizadas. Al final vamos a tener un ejemplo de un diálogo de confirmación con Material Design en donde podremos saber si el usuario hizo click en Sí o en No. Mira el resultado final aquí. ...
Los servicios en Angular sirven para varias cosas y son muy parecidos a los servicios de AngularJS. Un servicio es un servicio, ¿no? sirve para algo y de acuerdo a varios autores debería hacer solo una cosa y debería hacerla bien. Los servicios sirven para varias cosas, al menos yo los he usado para: Encerrar funciones útiles Obtener cálculos con fórmulas definidas Invocar a servidor HTTP para consumir API Un servicio en Angular es un paradigma, una forma de pensar y una forma de organizar el código, nada más. Aunque físicamente es un service, pero bien podríamos evitarlos, solo que no se recomienda. ...
Resumen: mostrar cómo crear un menú de navegación con Angular Material; es decir, implementar un navigation drawer con el menú a la izquierda (que se puede ocultar y mostrar con un botón) y el contenido a la derecha. Para implementar un navigation drawer o cajón de navegación en Angular Material vamos a usar combinar algunos componentes. Entre ellos: Mat Toolbar: la barra que estará en la parte superior y tendrá el título de la app de Angular así como un botón para mostrar/ocultar el cajón de navegación Mat Sidenav Container: el contenedor de lo que veremos a continuación Mat Sidenav: el menú con los enlaces, es decir, el cajón de navegación Mat Sidenav Content: el contenido que se irá mostrando e inyectando dependiendo de la sección Nota: recuerda que para esto debes tener un proyecto de Angular y haberle agregado Angular Material. Si quieres ver el ejemplo terminado haz click aquí. ...
En este post te muestro cómo agregar y utilizar los estilos de Material Design o Angular Material a una aplicación de Angular. Vamos a ver cómo: Agregar @angular/material a proyecto Utilizar un tema presideñado Configurar componente contenedor Usar algunos componentes Nota: para esto necesitas un proyecto existente. Si no lo tienes, mira aquí cómo comenzar con Angular. ...
Resumen: mostrar cómo usar Angular Router con un tutorial y ejemplo para las rutas en Angular. Recuerdo que el buen AngularJS introdujo buenas cosas como las SPA que son aplicaciones de una sola página en donde los controladores se iban montando en un contenedor conforme se navegaba. Angular 2 (o 4, 5, 8, 10, 50 o la versión que sea cuando leas este post) también tiene un Router muy eficaz y fácil de configurar. Justamente veremos eso hoy: una introducción al modo de uso del enrutador de angular. Nota: si quieres puedes ver y editar el resultado final aquí. ...
Resumen: crear proyecto básico de Angular usando la CLI, es decir, hacer un hola mundo con Angular o mejor dicho, Hola angular. En este post veremos cómo comenzar un proyecto de Angular, cómo modificarlo y finalmente cómo “compilarlo” para tener una versión lista para producción. Recuerda que el desarrollo de Angular se hace con la angular CLI; si no cuentas con ella mira aquí cómo se instala. ...
Resumen: instalar CLI de Angular en Windows paso a paso. Para crear aplicaciones web de Angular necesitamos instalar la CLI de Angular, que nos permitirá crear aplicaciones de Angular, agregar componentes y compilar, todo en un comando (con ng). En este post veremos cómo instalar la CLI de Angular. ...