Cómo crear e implementar una aplicación de material angular

 

 

 

  • Patrones de diseño de interfaces inteligentes, vídeo de 10h + formación UX
  • Implemente rápidamente. Implementar inteligentemente

  • Índice
    1. Empezando
    2. Simulacros y planificación
    3. Creando un nuevo proyecto angular
    4. Agregar biblioteca de materiales angulares
    5. Agregar página de inicio
      1. Agregar encabezado
      2. Almacenamiento local
    6. Agregar página Crear QR

    Un tutorial sobre cómo crear una aplicación web Angular 8 y una aplicación generadora de códigos QR completamente basada en Angular mientras está alojada en Netlify.

     

    Angular es una de las opciones populares al crear nuevas aplicaciones web. Además, las especificaciones de “Material Design” se han convertido en la opción preferida para crear una experiencia mínima y atractiva en la actualidad. Por lo tanto, cualquier nuevo proyecto "Angular" utiliza principalmente la "Biblioteca de diseño de materiales angular" para utilizar los componentes que siguen las especificaciones de diseño de materiales. Desde animaciones fluidas hasta comentarios de interacción adecuados, todo esto ya está disponible como parte de la biblioteca oficial de diseño de materiales para angular.

    Una vez desarrollada la aplicación web, el siguiente paso es implementarla. Ahí es donde “Netlify” entra en escena. Con su interfaz muy fácil de usar, implementación automática, división del tráfico para pruebas A/B y varias otras características, Netlify es sin duda una gran herramienta.

    El artículo será un tutorial sobre cómo crear una aplicación web Angular 8 utilizando la biblioteca oficial de Angular Material Design. Crearemos una aplicación web generadora de códigos QR completamente basada en Angular mientras está alojada en Netlify.

    Los archivos de este tutorial se pueden encontrar en GitHub y aquí se implementa una versión de demostración .

    Empezando

    1. Instalar Angular 8 ,
    2. Crea una cuenta de GitHub ,
    3. Instala Git en tu computadora,
    4. Crea una cuenta en Netlify .

    Nota : Usaré VSCode y Microsoft Windows como IDE y sistema operativo preferidos, aunque los pasos serían similares para cualquier otro IDE en cualquier otro sistema operativo.

    Una vez completados los requisitos previos anteriores, ¡comencemos!

    Simulacros y planificación

    Antes de comenzar a crear el proyecto, sería beneficioso planificar con anticipación: ¿Qué tipo de interfaz de usuario querríamos en nuestra aplicación? ¿Habrá piezas reutilizables? ¿Cómo interactuará la aplicación con los servicios externos?

    Primero, revisa las simulaciones de la interfaz de usuario.

    Página de inicio ( vista previa grande )
    Creando una página QR ( vista previa grande )
    Página de historial ( vista previa grande )

    Estas son las tres páginas diferentes que contendrá la solicitud. La página de inicio será el punto de partida de nuestra aplicación. La creación de una página QR debería implicar la creación de un nuevo código QR. La página Historial mostrará todos los códigos QR guardados.

    Las maquetas no solo brindan una idea de la apariencia de la aplicación, sino que también segregan la responsabilidad de cada página.

    Una observación (de los simulacros) es que parece que la barra de navegación superior es común en todas las páginas. Por tanto, la barra de navegación se puede crear como un componente reutilizable y reutilizar.

    Ahora que tenemos una idea bastante clara de cómo se verá la aplicación y qué se puede reutilizar, comencemos.

    Creando un nuevo proyecto angular

    Inicie VSCode, luego abra una ventana de terminal en VSCode para generar un nuevo proyecto Angular.

    Terminal en VSCode ( vista previa grande )

    La terminal se abrirá con una ruta predeterminada como se muestra en el mensaje. Puede cambiar a un directorio preferido antes de continuar; en el caso de Windows, usaré el cdcomando.

    Navegando a la ruta preferida ( vista previa grande )

    En el futuro, angular-cli tiene un comando para generar nuevos proyectos `ng new`. Simplemente use cualquier nombre de proyecto elegante que desee y presione Intro, por ejemplo ng new qr.

    Esto activará la magia angular-cli; Proporcionará algunas opciones para configurar algunos aspectos del proyecto, por ejemplo, agregar enrutamiento angular. Luego, en función de las opciones seleccionadas, generará el esqueleto completo del proyecto que se puede ejecutar sin ninguna modificación.

    Para este tutorial, ingrese para el enrutamiento y seleccione CSS para aplicar estilo. Esto generará un nuevo proyecto Angular:

    Creando un nuevo proyecto Angular ( vista previa grande )

    Ahora tenemos un proyecto Angular completamente funcional. Para asegurarnos de que todo esté funcionando correctamente, podemos ejecutar el proyecto ingresando este comando en la terminal: ng serve. Oh oh, pero espera, esto genera un error. ¿Lo que podría haber ocurrido?

     

    Error de servicio ( vista previa grande )

    No te preocupes. Cada vez que crea un nuevo proyecto usando angular-cli, genera el esqueleto completo dentro de una carpeta con el nombre del proyecto especificado en el comando ng new qr. Aquí tendremos que cambiar el directorio de trabajo actual al que acabamos de crear. En Windows, use el comando cd qrpara cambiar de directorio.

    Ahora, intenta ejecutar el proyecto nuevamente con la ayuda de ng serve:

    Proyecto en ejecución ( vista previa grande )

    Abra un navegador web, vaya a la URL https://localhost:4200 para ver el proyecto en ejecución. El comando ng serveejecuta la aplicación en el puerto 4200 de forma predeterminada.

    SUGERENCIA : Para ejecutarlo en un puerto diferente, usamos el comando `ng save --port` por ejemplo ng serve --port 3000 ,.

    Esto garantiza que nuestro proyecto Angular básico esté en funcionamiento. Vamonos.

    Necesitamos agregar la carpeta del proyecto a VSCode. Vaya al menú "Archivo", seleccione "Abrir carpeta" y seleccione la carpeta del proyecto. La carpeta del proyecto ahora se mostrará en la vista del Explorador a la izquierda.

    Agregar biblioteca de materiales angulares

    Para instalar la biblioteca de materiales Angular, use el siguiente comando en la ventana de terminal: ng add @angular/material. Esto (nuevamente) le hará algunas preguntas como qué tema desea, si desea animaciones predeterminadas, si se requiere soporte táctil, entre otras. Simplemente seleccionaremos el Indigo/Pinktema predeterminado y Yesagregaremos HammerJSanimaciones de biblioteca y navegador.

    Agregar material angular ( vista previa grande )

    El comando anterior también configura todo el proyecto para habilitar el soporte para los componentes del material.

    1. Agrega dependencias del proyecto a package.json ,
    2. Agrega la fuente Roboto al archivo index.html ,
    3. Agrega la fuente del icono de Material Design a su index.html ,
    4. También agrega algunos estilos CSS globales a:
      • Eliminar los márgenes del cuerpo,
      • Establecer height: 100%en el HTML y el cuerpo,
      • Configure Roboto como la fuente predeterminada de la aplicación.

    Sólo para estar seguro de que todo está bien, puedes ejecutar el proyecto nuevamente en este punto, aunque no notarás nada nuevo.

    Agregar página de inicio

    Nuestro esqueleto de proyecto ya está listo. Comencemos agregando la página de inicio.

    ( Vista previa grande )

    Queremos mantener nuestra página de inicio simple, como en la imagen de arriba. Esta página de inicio utiliza algunos componentes de material angular. Analicemos.

    1. La barra superior es un navelemento HTML simple que contiene un botón de estilo de material, mat-buttoncon una imagen y un texto como elemento secundario. El color de la barra es el mismo que el color primario que se seleccionó al agregar la biblioteca de materiales Angular;
    2. Una imagen centrada;
    3. Otro, mat-buttoncon solo un texto como hijo. Este botón permitirá a los usuarios navegar a la página del historial;
    4. Una insignia de conteo, matBadgeadjunta al botón de arriba, que muestra la cantidad de códigos QR guardados por el usuario;
    5. Un botón de acción flotante, mat-faben la esquina inferior derecha, que tiene el color de acento del tema seleccionado.

    Divagando un poco, agreguemos primero otros componentes y servicios necesarios.

     

    Agregar encabezado

    Como se planeó anteriormente, la barra de navegación debe reutilizarse; creémosla como un componente angular separado. Abra la terminal en VSCode y escriba ng g c header(abreviatura de ng generar encabezado de componente) y presione Entrar. Esto creará una nueva carpeta llamada "encabezado" que contendrá cuatro archivos:

    • header.component.css : se utiliza para proporcionar estilo a este componente;
    • header.component.html : para agregar elementos HTML;
    • header.component.spec.ts : para escribir casos de prueba;
    • header.component.ts : para agregar la lógica basada en Typecript.

    Componente de encabezado ( vista previa grande )

    Para que el encabezado se vea como en las simulaciones, agregue el siguiente HTML en header.component.html :

    nav [class.mat-elevation-z8]=true div button *ngIf="showBackButton" aria-hidden=false mat-icon-button routerLink="/" mat-icon iarrow_back/i /mat-icon /button span{{currentTitle}}/span /div button *ngIf="!showBackButton" aria-hidden=false mat-button img src="../../assets/qr-icon-white.png" spanQR Generator/span /button button *ngIf="showHistoryNav" aria-hidden=false mat-button routerLink="/history" spanHistory/span /button/nav

    SUGERENCIA : Para agregar elevación para cualquier uso de componente de material [class.mat-elevation-z8]=true , el valor de elevación se puede cambiar cambiando el valor z , en este caso es z8 . Por ejemplo, para cambiar la elevación a 16, utilice [class.mat-elevation-z16]=true .

    En el fragmento de HTML anterior, se utilizan dos elementos de material angular: mat-icony mat-button/mat-icon-button. Su uso es muy sencillo; Primero, necesitamos agregar esos dos como módulos en nuestro app.module.ts como se muestra a continuación:

    Importación de módulos para mat-icony mat-button( vista previa grande )

    Esto nos permitirá utilizar estos dos elementos de material angular en cualquier lugar de cualquier componente.

    Para agregar botones de material, se utiliza el siguiente fragmento de HTML:

    button mat-buttonMaterial Button/button

    Hay diferentes tipos de elementos de botones de material disponibles en la biblioteca de materiales de Angular , como mat-raised-button, y otros; simplemente reemplace el fragmento de código anterior con cualquier otro tipo.mat-flat-buttonmat-fabmat-button

    Tipos de botones de material ( vista previa grande )

    El otro elemento se mat-iconutiliza para mostrar los íconos disponibles en la biblioteca de íconos de materiales. Cuando se agregó la biblioteca de materiales de Angular al principio, también se agregó una referencia a la biblioteca de íconos de materiales, lo que nos permitió usar íconos de una amplia gama de íconos.

     

    El uso es tan simple como:

    mat-iconiarrow_back/i/mat-icon

    La etiqueta `` anidada se puede utilizar para cambiar el tamaño del icono (aquí está md-32), lo que hará que el tamaño del icono sea de 32 píxeles de alto y ancho. Este valor puede ser md-24, md-48, etc. El valor de la etiqueta ` ` anidada es el nombre del icono. (El nombre se puede encontrar aquí para cualquier otro ícono).

    Accesibilidad

    Siempre que se utilicen iconos o imágenes, es imperativo que proporcionen información suficiente para fines de accesibilidad o para un usuario de lector de pantalla. ARIA (Aplicaciones de Internet enriquecidas accesibles) define una forma de hacer que el contenido y las aplicaciones web sean más accesibles para las personas con discapacidades.

    Un punto a tener en cuenta es que los elementos HTML que tienen su semántica nativa (p. ej. nav) no necesitan atributos ARIA; el lector de pantalla ya sabrá que naves un elemento de navegación y lo leerá como tal.

    Las especificaciones de ARIA se dividen en tres categorías: roles, estados y propiedades. Digamos que divse usa a para crear una barra de progreso en el código HTML. No tiene ninguna semántica nativa; La función ARIA puede describir este widget como una barra de progreso, la propiedad ARIA puede indicar su característica, como por ejemplo, que se puede arrastrar. El estado ARIA describirá su estado actual, como el valor actual de la barra de progreso. Vea el fragmento a continuación:

    div role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" /div

    aria-hidden=true/falseDe manera similar, se utiliza un atributo aria muy utilizado:. El valor verdadero hace que ese elemento sea invisible para los lectores de pantalla.

    Dado que la mayoría de los elementos de la interfaz de usuario utilizados en esta aplicación tienen un significado semántico nativo, los únicos atributos ARIA utilizados son para especificar los estados de visibilidad de ARIA. Para obtener información detallada, consulte este .

    header.component.html contiene cierta lógica para ocultar y mostrar el botón Atrás según la página actual . Además, el botón Inicio también contiene una imagen/logotipo que debe agregarse a la /assetscarpeta. Descargue la imagen desde aquí y guárdela en la /assetscarpeta. Mejores Opiniones y reviews

    Para diseñar la barra de navegación, agregue el siguiente CSS en header.component.css :

    .navbar { position: fixed; top: 0; left: 0; right: 0; z-index: 2; background: #3f51b5; display: flex; flex-wrap: wrap; align-items: center; padding: 12px 16px;}.button { color: white; margin: 0px 10px;}

    Como queremos mantener el componente de encabezado reutilizable en otros componentes, para decidir qué se debe mostrar, los necesitaremos como parámetros de otros componentes. Esto requiere el uso de @Input()un decorador que se vinculará a las variables que usamos en header.component.html .

    Agregue estas líneas en el archivo header.component.ts :

     

    // Add these three lines above the constructor entry. @Input() showBackButton: boolean; @Input() currentTitle: string; @Input() showHistoryNav: boolean; constructor() { }

    Los tres enlaces anteriores se pasarán como parámetro de otros componentes que utilizará el componente de encabezado. Su uso será más claro una vez que avancemos.

    Continuando, necesitamos crear una página de inicio que pueda representarse mediante un componente Angular. Entonces comencemos creando otro componente; escriba ng g c homeel terminal para generar automáticamente el componente de inicio. Como anteriormente, se creará una nueva carpeta llamada "inicio" que contiene cuatro archivos diferentes. Antes de proceder a modificar esos archivos, agreguemos información de enrutamiento al módulo de enrutamiento angular.

    Agregar enrutamiento

    Angular proporciona una forma de asignar URL a un componente específico. Cada vez que ocurre alguna navegación, el marco Angular monitorea la URL y, en función de la información presente en el archivo app-routing.module.ts ; inicializa el componente mapeado. De esta manera, los diferentes componentes no necesitan asumir la responsabilidad de inicializar otros componentes. En nuestro caso, la aplicación tiene tres páginas navegables pulsando sobre diferentes botones. Logramos esto aprovechando el soporte de enrutamiento proporcionado por el marco Angular.

    El componente de inicio debe ser el punto de partida de la aplicación. Agreguemos esta información al archivo app-routing.module.ts .

    Componente de inicio de enrutamiento ( vista previa grande )

    La pathpropiedad se establece como una cadena vacía; esto nos permite asignar la URL de la aplicación al componente de la página de inicio, algo así como google.comlo que muestra la página de inicio de Google.

    SUGERENCIA : El valor de la ruta nunca comienza con " /", sino que utiliza una cadena vacía aunque la ruta pueda ser como search/coffee .

    Volviendo al componente de la página de inicio, reemplace el contenido de home.component.html con esto:

    app-header [showBackButton]="false" [currentTitle]=""/app-headerapp-profile/app-profile!-- FAB Fixed --button mat-fab routerLink="/create" mat-icon iadd/i /mat-icon/button

    El componente del hogar consta de tres partes:

    1. El componente de encabezado reutilizable ``,
    2. Componente de perfil ``,
    3. El botón de acción flotante en la parte inferior derecha.

    El fragmento de HTML anterior muestra cómo se utiliza el componente de encabezado reutilizable en otros componentes; simplemente usamos el selector de componentes y pasamos los parámetros requeridos.

    El componente de perfil se crea para usarse como cuerpo de la página de inicio; lo crearemos pronto.

    El botón de acción flotante con el +ícono es una especie de botón de material angular que mat-fabse encuentra en la parte inferior derecha de la pantalla. Tiene la routerLinkdirectiva de atributo que utiliza la información de ruta proporcionada en el app-routing.module.tspara la navegación. En este caso, el botón tiene el valor de ruta /create , que se asignará para crear el componente.

     

    Para hacer que el botón Crear flote en la parte inferior derecha, agregue el siguiente código CSS en home.component.css :

    .fab-bottom-right { position: fixed; left: auto; bottom: 5%; right: 10%;}

    Dado que se supone que el componente de perfil administra el cuerpo de la página de inicio, lo dejaremos home.component.tsintacto.

    Agregar componente de perfil

    Abra la terminal, escriba ng g c profiley presione Entrar para generar el componente de perfil. Como se planeó anteriormente, este componente manejará el cuerpo principal de la página de inicio. Abra profile.component.htmly reemplace su contenido con esto:

    div img src="../../assets/avatar.png" div button mat-raised-button matBadge="{{historyCount}}" matBadgeOverlap="true" matBadgeSize="medium" matBadgeColor="accent" color="primary" routerLink="/history" spanHistory/span /button /div/div

    El fragmento de HTML anterior muestra cómo utilizar el matBadgeelemento de la biblioteca de materiales. Para poder usarlo aquí, debemos seguir el procedimiento habitual de agregar MatBadgeModuleal app.module.tsarchivo. Las insignias son pequeños descriptores de estado pictóricos para elementos de la interfaz de usuario, como botones, íconos o textos. En este caso, se utiliza con un botón para mostrar el recuento de QR guardados por el usuario. La insignia de la biblioteca de materiales angular tiene varias otras propiedades, como establecer la posición de la insignia con matBadgePosition, matBadgeSizeespecificar el tamaño y matBadgeColorestablecer el color de la insignia.

    Es necesario agregar un recurso de imagen más a la carpeta de activos: Descargar . Guarde el mismo en la /assetscarpeta del proyecto.

    Abra perfil.component.css y agregue esto:

    .center { top: 50%; left: 50%; position: absolute; transform: translate(-50%, -50%);}.profile-child { display: flex; flex-direction: column; align-items: center;}.profile-actions { padding-top: 20px;}.avatar { border-radius: 50%; width: 180px; height: 180px;}

    El CSS anterior logrará la interfaz de usuario según lo planeado.

    Continuando, necesitamos algún tipo de lógica para actualizar el valor del recuento del historial, como se reflejará en el matBadgeuso anterior. Abra perfil.component.ts y agregue el siguiente fragmento de forma adecuada:

    export class ProfileComponent implements OnInit { historyCount = 0; constructor(private storageUtilService: StorageutilService) { } ngOnInit() { this.updateHistoryCount(); } updateHistoryCount() { this.historyCount = this.storageUtilService.getHistoryCount(); }}

    Hemos agregado StorageutilService pero no hemos creado dicho servicio hasta ahora. Haciendo caso omiso del error, hemos completado nuestro componente de perfil que también finaliza nuestro componente de página de inicio. Revisaremos este componente de perfil después de crear nuestro servicio de utilidad de almacenamiento. Bien, entonces hagámoslo.

    Almacenamiento local

    HTML5 proporciona una función de almacenamiento web que se puede utilizar para almacenar datos localmente. Esto proporciona mucho más almacenamiento en comparación con las cookies: al menos 5 MB frente a 4 KB. Hay dos tipos de almacenamiento web con diferente alcance y duración: Local y Sesión . Los primeros pueden almacenar datos de forma permanente mientras que los segundos son temporales y para una única sesión. La decisión de seleccionar el tipo puede basarse en el caso de uso; en nuestro escenario queremos guardar entre sesiones, por lo que optaremos por el almacenamiento local .

     

    Cada dato se almacena en un par clave/valor. Usaremos el texto para el cual se genera el QR como clave y la imagen QR codificada como una cadena base64 como valor. Cree una carpeta de entidad, dentro de la carpeta cree un nuevo archivo qr-object.ts y agregue el fragmento de código como se muestra:

    Modelo de entidad QR ( vista previa grande )

    El contenido de la clase:

    export class QR { text: string; imageBase64: string; constructor(text: string, imageBase64: string) { this.imageBase64 = imageBase64; this.text = text; }}

    Siempre que el usuario guarde el QR generado, crearemos un objeto de la clase anterior y lo guardaremos utilizando el servicio de utilidad de almacenamiento.

    Crea una nueva carpeta de servicios, crearemos muchos servicios, es mejor agruparlos.

    Carpeta de servicios ( vista previa grande )

    Cambie el directorio de trabajo actual a servicios, cd servicespara crear un nuevo servicio use `ng gs`. Esta es una abreviatura de "ng generar servicio".`, escribe ng g s storageutily presiona enter

    Esto creará dos archivos:

    • almacenamientoutil.servicio.ts
    • almacenamientoutil.servicio.spec.ts

    Este último es para escribir pruebas unitarias. Abra Storageutil.service.ts y agregue esto:

    private historyCount: number; constructor() { } saveHistory(key : string, item :string) { localStorage.setItem(key, item) this.historyCount = this.historyCount + 1; } readHistory(key : string) : string { return localStorage.getItem(key) } readAllHistory() : ArrayQR { const qrList = new ArrayQR(); for (let i = 0; i localStorage.length; i++) { const key = localStorage.key(i); const value = localStorage.getItem(key); if (key value) { const qr = new QR(key, value); qrList.push(qr); } } this.historyCount = qrList.length; return qrList; } getHistoryCount(): number { if (this.historyCount) { return this.historyCount; } this.readAllHistory(); return this.historyCount; } deleteHistory(key : string) { localStorage.removeItem(key) this.historyCount = this.historyCount - 1; }

    Importe la clase de objeto qr para corregir cualquier error. Para usar la función de almacenamiento local, no es necesario importar nada nuevo, simplemente use la palabra clave localStoragepara guardar u obtener valor según una clave.

    Ahora abra nuevamente el archivo perfil.component.ts e importe la StorageutilServiceclase para finalizar correctamente el componente del perfil.

    Al ejecutar el proyecto, podemos ver que la página de inicio está activa según lo planeado.

     

    Agregar página Crear QR

    Ya tenemos nuestra página de inicio lista, aunque el botón crear/añadir no hace nada. No te preocupes, la lógica real ya estaba escrita. Usamos una routerLinkdirectiva para cambiar la ruta base de la URL, /createpero no se agregó ninguna asignación al archivo app-routing.module.ts .

    Creemos un componente que se ocupará de la creación de nuevos códigos QR, escriba ng g c create-qry presione Intro para generar un nuevo componente.

    Abra el archivo app-routing.module.ts y agregue la siguiente entrada a la routesmatriz:

    { path: 'create', component: CreateQrComponent },

    Esto asignará el CreateQRComponentcon la URL /create.

    Abra create-qr.components.html y reemplace el contenido con esto:

    app-header [showBackButton]="showBackButton" [currentTitle]="title" [showHistoryNav]="showHistoryNav"/app-headermat-card [class.mat-elevation-z12]=true div !--Close button section-- div button mat-icon-button color="accent" routerLink="/" matTooltip="Close" mat-icon iclose/i /mat-icon /button /div !--QR code image section-- div img *ngIf="!showProgressSpinner" src={{qrCodeImage}} mat-spinner *ngIf="showProgressSpinner"/mat-spinner div *ngIf="!showProgressSpinner" button mat-icon-button color="accent" matTooltip="Share this QR" mat-icon ishare/i /mat-icon /button button mat-icon-button color="accent" (click)="saveQR()" matTooltip="Save this QR" mat-icon isave/i /mat-icon /button /div /div !--Textarea to write any text or link-- div mat-form-field textarea matInput [(ngModel)]="qrText" cdkTextareaAutosize cdkAutosizeMinRows="4" cdkAutosizeMaxRows="4" placeholder="Enter a website link or any text..."/textarea /mat-form-field /div !--Create Button-- div button mat-raised-button color="accent" matTooltip="Create new QR code" matTooltipPosition="above" (click)="createQrCode()"Create/button /div /div/mat-card

    El fragmento anterior utiliza muchos de los elementos de la biblioteca de materiales de Angular. Según lo planeado, tiene una referencia de componente de encabezado donde se pasan los parámetros requeridos. El siguiente es el cuerpo principal de la página de creación; Consta de una tarjeta de material Angular o mat-cardcentrada y elevada hasta 12px según [class.mat-elevation-z12]=truese utilice.

    La tarjeta de material es simplemente otro tipo de contenedor que puede usarse como cualquier otra divetiqueta. Aunque la biblioteca de materiales proporciona algunas propiedades para diseñar información bien definida en un lugar, mat-cardcomo la ubicación de la imagen, el título, el subtítulo, la descripción y la acción, como se puede ver a continuación.

    Ejemplo de tarjeta ( vista previa grande )

    En el fragmento de HTML anterior, lo hemos utilizado mat-cardcomo cualquier otro contenedor. Otro elemento de biblioteca de materiales utilizado es matTooltip; es solo otra información sobre herramientas fácil de usar, que se muestra cuando el usuario pasa el cursor sobre un elemento o lo mantiene presionado. Simplemente use el siguiente fragmento para mostrar información sobre herramientas:

    matTooltip="Any text you want to show"

    Se puede utilizar con botones de iconos o cualquier otro elemento de la interfaz de usuario para transmitir información adicional. En el contexto de la aplicación, muestra información sobre el botón del icono de cerrar. Para cambiar la ubicación de la información sobre herramientas, matTooltipPositionse utiliza:

    matTooltip="Any text you want to show" matTooltipPosition="above"

    Además matTooltip, mat-spinnerse utiliza para mos






    Tal vez te puede interesar:

    1. ¿Deberían abrirse los enlaces en ventanas nuevas?
    2. 24 excelentes tutoriales de AJAX
    3. 70 técnicas nuevas y útiles de AJAX y JavaScript
    4. Más de 45 excelentes recursos y repositorios de fragmentos de código

    Cómo crear e implementar una aplicación de material angular

    Cómo crear e implementar una aplicación de material angular

    Patrones de diseño de interfaces inteligentes, vídeo de 10h + formación UX Implemente rápidamente. Implementar inteligentemente Índice

    programar

    es

    https://aprendeprogramando.es/static/images/programar-como-crear-e-implementar-una-aplicacion-de-material-angular-1009-0.jpg

    2024-05-21

     

    Cómo crear e implementar una aplicación de material angular
    Cómo crear e implementar una aplicación de material angular

    Si crees que alguno de los contenidos (texto, imagenes o multimedia) en esta página infringe tus derechos relativos a propiedad intelectual, marcas registradas o cualquier otro de tus derechos, por favor ponte en contacto con nosotros en el mail [email protected] y retiraremos este contenido inmediatamente

     

     

    Top 20