\u00bfPor Qu\u00e9 Utilizar una Biblioteca de Componentes?<\/h2>\n
Tanto si los construyes t\u00fa mismo como si adoptas bibliotecas de terceros, los componentes constituyen la base de las aplicaciones Angular. Cada componente depende de una plantilla para sus elementos HTML y CSS y del c\u00f3digo TypeScript que controla su comportamiento.<\/p>\n
La principal ventaja de las bibliotecas de componentes es que proporcionan componentes de interfaz de usuario reutilizables y preconstruidos, lo que reduce la necesidad de c\u00f3digo personalizado y ayuda a los desarrolladores a poner en marcha aplicaciones r\u00e1pidamente.<\/p>\n
El enfoque de Angular sobre los componentes tambi\u00e9n puede mejorar la cooperaci\u00f3n entre equipos, entre programadores que pueden estar escribiendo c\u00f3digo TypeScript y dise\u00f1adores web que proporcionan el HTML para las plantillas.<\/p>\n
Las bibliotecas de componentes suelen a\u00f1adirse a los proyectos Angular mediante el gestor de paquetes Node.js Las bibliotecas de componentes de nuestra lista se han seleccionado en funci\u00f3n de varios criterios:<\/p>\n Ahora echemos un vistazo m\u00e1s de cerca a nuestras selecciones.<\/p>\n Angular Material<\/a> es la biblioteca oficial de componentes de Angular, que ofrece una completa colecci\u00f3n de interfaz de usuario y se mantiene actualizada con las \u00faltimas funciones y cambios de la API de Angular. Tambi\u00e9n ofrece compatibilidad integrada con la accesibilidad, generando marcas para permitir la navegaci\u00f3n con teclado y guiar a las tecnolog\u00edas de asistencia, como los lectores de pantalla.<\/p>\n C\u00f3mo funciona:<\/strong> Angular Material aprovecha las directivas y servicios integrados de Angular para proporcionar un conjunto de componentes ligados a datos y de alto rendimiento sobre Angular, facilitando la adici\u00f3n de interactividad a las aplicaciones web.<\/p>\n En qu\u00e9 destaca:<\/strong> Angular Material destaca por proporcionar componentes de interfaz de usuario preconstruidos que siguen las directrices de Material Design. Ofrece un conjunto de componentes de UI bien dise\u00f1ados y personalizables que pueden integrarse f\u00e1cilmente en las aplicaciones Angular. Estos componentes incluyen men\u00fas de navegaci\u00f3n, botones, formularios, cuadros de di\u00e1logo y mucho m\u00e1s.<\/p>\n Por ejemplo, si quieres a\u00f1adir un componente de bot\u00f3n a tu aplicaci\u00f3n, s\u00f3lo tienes que utilizar la directiva Aqu\u00ed tienes un fragmento de c\u00f3digo de ejemplo:<\/p>\n Este c\u00f3digo generar\u00e1 un componente de bot\u00f3n con el esquema de color primario. Puedes personalizar a\u00fan m\u00e1s el bot\u00f3n a\u00f1adiendo controladores de eventos, cambiando el texto y el aspecto del icono.<\/p>\n NG-Bootstrap<\/a> es una biblioteca de c\u00f3digo abierto construida sobre Bootstrap CSS, que proporciona componentes y patrones de dise\u00f1o con los que muchos desarrolladores ya est\u00e1n familiarizados. Esto reduce la curva de aprendizaje para los nuevos proyectos, convirti\u00e9ndola en una opci\u00f3n fiable para crear aplicaciones Angular de forma r\u00e1pida y eficaz.<\/p>\n C\u00f3mo funciona: <\/strong>NG-Bootstrap ampl\u00eda las capacidades de los componentes Bootstrap permitiendo a los desarrolladores utilizarlos como directivas Angular, con enlace de datos bidireccional y otras caracter\u00edsticas espec\u00edficas de Angular. Esto facilita a los desarrolladores la creaci\u00f3n de aplicaciones web con capacidad de respuesta y aptas para m\u00f3viles que funcionan perfectamente con Angular.<\/p>\n En qu\u00e9 destaca:<\/strong> Uno de los principales puntos fuertes de NG-Bootstrap es su compatibilidad con funciones de accesibilidad, incluidas las especificaciones del W3C para Accessible Rich Internet Applications (ARIA), lo que facilita a los desarrolladores la creaci\u00f3n de aplicaciones que puedan utilizar personas con discapacidad. NG-Bootstrap tambi\u00e9n destaca en el \u00e1mbito de los di\u00e1logos modales. Con el componente Modal Aqu\u00ed tienes un ejemplo de c\u00f3mo crear un di\u00e1logo modal b\u00e1sico utilizando NG-Bootstrap:<\/p>\n En este ejemplo, el elemento Clarity<\/a> es una biblioteca de c\u00f3digo abierto que utiliza un lenguaje visual compartido en todos sus componentes para proporcionar una interfaz de usuario coherente e intuitiva. Tambi\u00e9n est\u00e1 ampliamente documentada, con numerosas gu\u00edas, tutoriales y referencias a la API, lo que facilita su aprendizaje y uso.<\/p>\n C\u00f3mo funciona:<\/strong> El sistema de dise\u00f1o de Clarity se basa en el concepto de \u00abtarjetas\u00bb, que se utilizan para agrupar contenido relacionado. Las tarjetas se utilizan para representar piezas individuales de contenido de forma estructurada y organizada. Clarity proporciona una variedad de componentes de tarjeta que pueden presentar datos en diversos formatos. Estos componentes de tarjeta incluyen encabezados, pies de p\u00e1gina y secciones de contenido, y pueden personalizarse f\u00e1cilmente con diferentes estilos y temas.<\/p>\n Las tarjetas tambi\u00e9n pueden combinarse con otros componentes -como modales, desplegables y botones- para crear dise\u00f1os de UI m\u00e1s complejos. El objetivo general del dise\u00f1o basado en tarjetas es proporcionar un sistema flexible y modular para crear interfaces complejas con facilidad.<\/p>\n En qu\u00e9 destaca:<\/strong> El amplio conjunto de controles de formulario de Clarity es un punto fuerte indiscutible. Estos controles incluyen campos de entrada, cuadros de selecci\u00f3n, botones de radio y mucho m\u00e1s. Clarity tambi\u00e9n ofrece un conjunto de visualizaciones de datos, como gr\u00e1ficos de barras, de l\u00edneas y circulares, para ayudar a mostrar los datos de forma clara y organizada.<\/p>\n Aqu\u00ed tienes un ejemplo de c\u00f3mo utilizar el componente de campo de entrada de Clarity en un formulario HTML:<\/p>\n Este c\u00f3digo crear\u00e1 un campo de entrada de formulario con una etiqueta y un texto de marcador de posici\u00f3n. Las directivas Kendo UI<\/a> es una biblioteca comercial creada pensando en el rendimiento, que garantiza tiempos de carga r\u00e1pidos y una experiencia de usuario fluida. Tambi\u00e9n proporciona temas y opciones de estilo para mejorar el aspecto de tu aplicaci\u00f3n, as\u00ed como una amplia documentaci\u00f3n y un equipo de soporte especializado.<\/p>\n C\u00f3mo funciona:<\/strong> Kendo UI utiliza t\u00e9cnicas como la virtualizaci\u00f3n y la carga diferida para garantizar tiempos de carga r\u00e1pidos y una experiencia de usuario fluida. Esto significa que las aplicaciones creadas con Kendo UI son r\u00e1pidas y sensibles, incluso cuando se trabaja con grandes conjuntos de datos. Kendo UI tambi\u00e9n sigue una arquitectura modular que permite a los desarrolladores utilizar s\u00f3lo los componentes que necesitan, reduciendo el tama\u00f1o de la biblioteca y mejorando el rendimiento.<\/p>\n D\u00f3nde destaca:<\/strong> Kendo UI es especialmente adecuado para aplicaciones de nivel empresarial que requieren una amplia gesti\u00f3n de datos y complejas interacciones con el usuario. Su componente de cuadr\u00edcula, por ejemplo, admite funciones como filtrar, ordenar y agrupar, lo que permite a los desarrolladores presentar grandes conjuntos de datos a los usuarios de forma manejable.<\/p>\n Aqu\u00ed tienes un fragmento de c\u00f3digo de c\u00f3mo crear una sencilla cuadr\u00edcula Kendo UI en HTML:<\/p>\n Este c\u00f3digo mostrar\u00e1 una cuadr\u00edcula Kendo UI en tu aplicaci\u00f3n Angular. Puedes personalizar la rejilla pasando varias opciones de configuraci\u00f3n al componente PrimeNG<\/a> es una biblioteca de c\u00f3digo abierto dise\u00f1ada para facilitar su uso y personalizaci\u00f3n. Tambi\u00e9n incluye funciones avanzadas de accesibilidad y soporte de internacionalizaci\u00f3n, lo que la convierte en una gran elecci\u00f3n para aplicaciones globales.<\/p>\n C\u00f3mo funciona:<\/strong> La biblioteca PrimeNG proporciona un conjunto de componentes de interfaz de usuario preconstruidos que los desarrolladores pueden integrar f\u00e1cilmente en sus aplicaciones Angular. Utiliza las directivas incorporadas y los ganchos de ciclo de vida de Angular para proporcionar una integraci\u00f3n perfecta con el framework. Tambi\u00e9n admite varias opciones de configuraci\u00f3n y personalizaciones para que los desarrolladores puedan adaptar los componentes a sus necesidades espec\u00edficas.<\/p>\n En qu\u00e9 destaca:<\/strong> Una de las caracter\u00edsticas clave de PrimeNG es su compatibilidad con la internacionalizaci\u00f3n. La biblioteca admite varios idiomas y proporciona servicios de traducci\u00f3n para la mayor\u00eda de sus componentes. Esto se consigue mediante el uso del marco de localizaci\u00f3n de Angular y los archivos de mensajes, que pueden personalizarse y actualizarse f\u00e1cilmente.<\/p>\n Para utilizar la internacionalizaci\u00f3n en PrimeNG, tienes que crear archivos de traducci\u00f3n para los idiomas que quieras admitir. Estos archivos deben contener traducciones para todos los componentes que quieras utilizar en tu aplicaci\u00f3n. Para activar la internacionalizaci\u00f3n en PrimeNG, tienes que establecer el atributo He aqu\u00ed un ejemplo de c\u00f3mo utilizar el componente En este ejemplo, el componente Nebular<\/a> es una colecci\u00f3n de m\u00e1s de 40 componentes de interfaz de usuario Angular disponibles en cuatro temas personalizables. La biblioteca, creada por la empresa de desarrollo web Akveo, tambi\u00e9n incluye un m\u00f3dulo de autenticaci\u00f3n de usuarios y un m\u00f3dulo de seguridad basado en ACL para controlar el acceso de los m\u00e1s granulares a recursos espec\u00edficos. Akveo tambi\u00e9n puede ayudarte a crear tu propia aplicaci\u00f3n de panel de administraci\u00f3n con el kit ngx-admin<\/strong>, creado con m\u00f3dulos Nebular.<\/p>\n C\u00f3mo funciona:<\/strong> El enfoque de la interfaz de usuario de Nebular se basa en las especificaciones del Sistema de Dise\u00f1o Eva<\/a> de Akveo, para el que tambi\u00e9n proporciona activos a los equipos cuyo trabajo comienza con herramientas de dise\u00f1o como Sketch o Figma.<\/p>\n En general, los dise\u00f1adores que trabajan con el CSS de Nebular pueden referirse a las opciones de estilo sem\u00e1nticamente, como las variables de color La biblioteca de componentes de Nebular incluye dise\u00f1os, tarjetas, listas, acordeones, ayudas a la navegaci\u00f3n, elementos de formulario, tablas de datos, modales y superposiciones, adem\u00e1s de widgets como rotadores, selectores de fecha y barras de progreso.<\/p>\n Los metadatos de un componente acorde\u00f3n de Nebular podr\u00edan tener este aspecto TypeScript:<\/p>\n Y su plantilla podr\u00eda tener este aspecto:<\/p>\n En qu\u00e9 destaca:<\/strong> La biblioteca Nebular y el kit de panel de administraci\u00f3n ngx-admin<\/strong> son de uso gratuito, lo que supone una gran ventaja para una colecci\u00f3n de herramientas tan sofisticada. Los m\u00f3dulos de autenticaci\u00f3n y seguridad reflejan el enfoque de Akveo en esos componentes del panel de administraci\u00f3n.<\/p>\n Nebular tambi\u00e9n es muy compatible con los idiomas que leen de derecha a izquierda (RTL). Los usuarios encontrar\u00e1n marcado CSS para soportar dise\u00f1os RTL (y LTR), y m\u00e9todos -como NG-Lightning<\/a> es una interesante adici\u00f3n a la gama de bibliotecas de componentes, ya que es una implementaci\u00f3n con sabor a Angular del sistema de dise\u00f1o Lightning<\/a> de Salesforce (LDS – Lightning Design System). Ese sistema proporciona elementos HTML y CSS -proyectos- y directrices de dise\u00f1o para los desarrolladores de Salesforce que utilizan el marco Lightning de esa plataforma. Los elementos clave del LDS se reflejan en esta colecci\u00f3n de c\u00f3digo abierto de widgets Angular, incluidos el HTML y el CSS.<\/p>\n C\u00f3mo funciona:<\/strong> NG-Lightning tiene dependencias que la diferencian de otras bibliotecas de componentes. Adem\u00e1s de depender del kit de desarrollo de componentes Angular<\/a> oficial, las aplicaciones NG-Lightning enlazan con los mismos repositorios CSS que utiliza Salesforce LDS. Ese CSS puede descargarse del repositorio oficial de Salesforce UX<\/a> o enlazarse a trav\u00e9s de una CDN.<\/p>\n A\u00fan as\u00ed, el enfoque basado en TypeScript para construir vistas resultar\u00e1 familiar a los desarrolladores de Angular. Este ejemplo iniciar\u00eda los metadatos para el componente de alerta mostrado arriba:<\/p>\n La plantilla del componente para ese ejemplo oficial de NG-Lightning es:<\/p>\n Donde destaca:<\/strong> Como reflejo de su base en el SUD de Salesforce, los desarrolladores de NG-Lightning se toman muy en serio la accesibilidad web. Las interfaces generadas din\u00e1micamente, que son el sello distintivo de marcos como Angular, a menudo pueden ser un reto para los usuarios finales con discapacidades visuales o de movilidad. NG-Lightning se adhiere a las directrices de las especificaciones ARIA del W3C, generando marcado web dise\u00f1ado para ser compatible con tecnolog\u00edas de asistencia como los lectores de pantalla.<\/p>\n Syncfusion UI<\/a> es una biblioteca ligera y modular que permite a los desarrolladores elegir s\u00f3lo los componentes necesarios para su aplicaci\u00f3n y reducir el tama\u00f1o total del paquete final. Esto facilita el mantenimiento, la ampliaci\u00f3n y la actualizaci\u00f3n de la biblioteca, a\u00f1adiendo nuevos componentes o modificando los existentes sin afectar a los dem\u00e1s.<\/p>\n C\u00f3mo funciona:<\/strong> Cuando se carga una p\u00e1gina, la biblioteca Syncfusion UI inicializa y crea los componentes necesarios bas\u00e1ndose en el marcado y las opciones de configuraci\u00f3n. Por ejemplo, el componente de cuadr\u00edcula permite a los usuarios ordenar, filtrar y agrupar datos, mientras que el componente de gr\u00e1fico puede mostrar datos en diversos formatos, como gr\u00e1ficos de l\u00edneas, de barras y circulares.<\/p>\n La biblioteca tambi\u00e9n incluye un conjunto de funciones y herramientas de utilidad que pueden utilizarse para simplificar tareas comunes, como la manipulaci\u00f3n y validaci\u00f3n de datos. La biblioteca incluye un administrador de datos que puede utilizarse para trabajar con estructuras de datos complejas y un motor de validaci\u00f3n que puede utilizarse para validar las entradas del usuario.<\/p>\n En qu\u00e9 destaca:<\/strong> Syncfusion proporciona un s\u00f3lido conjunto de herramientas de personalizaci\u00f3n y tematizaci\u00f3n, que permite a los desarrolladores crear r\u00e1pidamente una interfaz de usuario coherente y de aspecto profesional. La biblioteca incluye un potente conjunto de API y eventos que pueden utilizarse para crear funcionalidades e interactividad personalizadas, as\u00ed como compatibilidad con fuentes de datos populares como las API REST, OData y SignalR.<\/p>\n Aqu\u00ed tienes un ejemplo de inclusi\u00f3n de un componente de cuadr\u00edcula Syncfusion en una aplicaci\u00f3n Angular:<\/p>\n Este c\u00f3digo crea una rejilla simple que muestra datos de una fuente de datos. La propiedad Onsen UI<\/a> es una popular biblioteca de interfaz de usuario de c\u00f3digo abierto para crear aplicaciones m\u00f3viles h\u00edbridas y web. Proporciona una integraci\u00f3n m\u00e1s fluida con los frameworks frontales<\/a> m\u00e1s populares que otras bibliotecas de terceros, lo que facilita la creaci\u00f3n de una interfaz de usuario interactiva y de alta calidad con el m\u00ednimo esfuerzo.<\/p>\n C\u00f3mo funciona:<\/strong> Onsen UI se basa en la filosof\u00eda Material Design de Google, que garantiza que la IU de la aplicaci\u00f3n sea tanto est\u00e9ticamente agradable como f\u00e1cil de usar. Proporciona un amplio conjunto de temas integrados que pueden aplicarse a los componentes para mejorar el aspecto de la aplicaci\u00f3n.<\/p>\n En qu\u00e9 destaca:<\/strong> Onsen UI destaca por su facilidad de uso y su capacidad para crear aplicaciones multiplataforma con el mismo aspecto que las aplicaciones nativas. Proporciona un rico conjunto de componentes de interfaz de usuario predise\u00f1ados, optimizados para dispositivos m\u00f3viles y que pueden personalizarse para adaptarse a las necesidades de la aplicaci\u00f3n. Tambi\u00e9n incluye funciones como la compatibilidad con FastClick<\/a>, que ayuda a eliminar los retrasos en los eventos t\u00e1ctiles, y la carga lenta, que permite tiempos de carga m\u00e1s r\u00e1pidos de la aplicaci\u00f3n.<\/p>\n Aqu\u00ed tienes un fragmento de c\u00f3digo de ejemplo que muestra c\u00f3mo crear un bot\u00f3n sencillo utilizando Onsen UI:<\/p>\n Este c\u00f3digo crear\u00e1 un bot\u00f3n con el texto \u00abClick me!\u00bb y la clase modificadora Las bibliotecas de componentes est\u00e1n ahora ampliamente aceptadas como pr\u00e1ctica est\u00e1ndar en el desarrollo web. Las bibliotecas de componentes han ayudado a Angular a convertirse en uno de los marcos de desarrollo frontend m\u00e1s populares y utilizados, al proporcionar una forma c\u00f3moda y eficaz de desarrollar componentes de interfaz de usuario.<\/p>\n Las bibliotecas anteriores proporcionan componentes de interfaz de usuario pre-construidos y personalizables que ayudan a los desarrolladores a crear interfaces de usuario coherentes y de alta calidad con menos esfuerzo. En \u00faltima instancia, la elecci\u00f3n de la biblioteca depender\u00e1 de las necesidades espec\u00edficas del proyecto y de las preferencias del desarrollador.<\/p>\n \u00bfNecesitas un hogar para tu pr\u00f3ximo proyecto Angular? Las plataformas de Alojamiento de Aplicaciones<\/a> y Alojamiento de Bases de Datos<\/a> de Kinsta son soluciones listas para servir tu aplicaci\u00f3n al mundo.<\/p>\n","protected":false},"excerpt":{"rendered":" Angular es un marco JavaScript de c\u00f3digo abierto creado con TypeScript y optimizado para desarrollar aplicaciones web de una sola p\u00e1gina. Es bien conocido por su …<\/p>\n","protected":false},"author":117,"featured_media":64027,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[],"topic":[1269],"class_list":["post-64026","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","topic-angular"],"yoast_head":"\nnpm<\/code> o mediante la propia interfaz de l\u00ednea de comandos (CLI) de Angular.<\/p>\n\u00bfQu\u00e9 Hace que una Biblioteca de Componentes sea Buena?<\/h2>\n
\n
9 Ingeniosas Bibliotecas de Componentes Angular<\/h2>\n
1. Angular Material<\/h3>\n
![\"Biblioteca](\"https:\/\/kinqsta.com\/wp-content\/uploads\/2023\/03\/angular-component-library-material-buttons.png\")
mat-button<\/code> y personalizarlo como necesites.<\/p>\n<button mat-button color=\"primary\">Click me!<\/button><\/code><\/pre>\n2. NG-Bootstrap<\/h3>\n
![\"Biblioteca](\"https:\/\/kinqsta.com\/wp-content\/uploads\/2023\/03\/angular-component-library-ng-bootstrap-carousel.jpg\")
ng-bootstrap<\/code>, los desarrolladores pueden crear f\u00e1cilmente di\u00e1logos modales con opciones personalizables como el tama\u00f1o, el fondo y la compatibilidad con el teclado.<\/p>\n<ng-template #content let-modal>\n <div class=\"modal-header\">\n <h4 class=\"modal-title\">Modal title<\/h4>\n <button type=\"button\" class=\"close\" aria-label=\"Close\" (click)=\"modal.dismiss('Cross click')\">\n <span aria-hidden=\"true\">×<\/span>\n <\/button>\n <\/div>\n <div class=\"modal-body\">\n <p>Modal body text goes here.<\/p>\n <\/div>\n <div class=\"modal-footer\">\n <button type=\"button\" class=\"btn btn-secondary\" (click)=\"modal.close('Close click')\">Close<\/button>\n <\/div>\n<\/ng-template>\n<button class=\"btn btn-primary\" (click)=\"open(content)\">Launch demo modal<\/button><\/code><\/pre>\nng-template<\/code> contiene el contenido del di\u00e1logo modal, incluyendo la cabecera, el cuerpo y el pie de p\u00e1gina. El elemento bot\u00f3n situado al final del fragmento de c\u00f3digo activa la apertura del modal cuando se hace clic sobre \u00e9l. El m\u00e9todo open()<\/code> se utiliza para mostrar el modal y toma como argumento el elemento ng-template<\/code>.<\/p>\n3. Clarity<\/h3>\n
![\"Ilustraci\u00f3n](\"https:\/\/kinqsta.com\/wp-content\/uploads\/2023\/03\/angular-component-library-clarity.png\")
<clr-input-container>\n <label>Username<\/label>\n <input clrInput placeholder=\"Enter your username\">\n<\/clr-input-container><\/code><\/pre>\nclr-input-container<\/code> y clrInput<\/code> son proporcionadas por la biblioteca Clarity y dar\u00e1n el estilo adecuado al campo de entrada.<\/p>\n4. Kendo UI<\/h3>\n
![\"Ejemplo](\"https:\/\/kinqsta.com\/wp-content\/uploads\/2023\/03\/angular-component-library-kendo-ui-data-grid.png\")
<kendo-grid [data]=\"gridData\">\n <kendo-grid-column field=\"ProductID\" title=\"Product ID\" width=\"120\"><\/kendo-grid-column>\n <kendo-grid-column field=\"ProductName\" title=\"Product Name\" width=\"200\"><\/kendo-grid-column>\n <kendo-grid-column field=\"UnitPrice\" title=\"Unit Price\" width=\"120\"><\/kendo-grid-column>\n <kendo-grid-column field=\"UnitsInStock\" title=\"Units In Stock\" width=\"120\"><\/kendo-grid-column>\n<\/kendo-grid><\/code><\/pre>\nkendo-grid<\/code>.<\/p>\n5. PrimeNG<\/h3>\n
![\"Logotipo](\"https:\/\/kinqsta.com\/wp-content\/uploads\/2023\/03\/angular-component-library-primeng-logo.png\"){kind=logo}
translate<\/code> de un componente en true<\/code>. El componente utilizar\u00e1 entonces los archivos de traducci\u00f3n para mostrar el texto en el idioma que elija el usuario.<\/p>\np-calendar<\/code> con soporte de internacionalizaci\u00f3n en PrimeNG:<\/p>\n<p-calendar [(ngModel)]=\"date\" [showIcon]=\"true\" [readonlyInput]=\"true\" [monthNavigator]=\"true\" [yearNavigator]=\"true\" yearRange=\"2000:2030\" [locale]=\"en\"><\/p-calendar><\/code><\/pre>\np-calendar<\/code> tiene el atributo translate<\/code> establecido en true<\/code>, y el atributo [locale]<\/code> est\u00e1 establecido en el c\u00f3digo de idioma para el ingl\u00e9s (en). Esto garantiza que el calendario se muestre en ingl\u00e9s para los usuarios que hayan elegido ese idioma.<\/p>\n6. Nebular<\/h3>\n
![\"Biblioteca](\"https:\/\/kinqsta.com\/wp-content\/uploads\/2023\/03\/angular-component-library-nebular-smart-table.png\")
primary<\/code>, success<\/code>, info<\/code>, warning<\/code> y danger<\/code>. Pero los usuarios pueden ir m\u00e1s all\u00e1 de lo que Akveo ha decidido que representan importando la personalizaci\u00f3n avanzada del estilo como archivos Sass.<\/p>\nimport { Component, ChangeDetectionStrategy } from '@angular\/core';\n\n@Component({\n selector: 'nb-accordion-demo',\n templateUrl: '.\/accordion-demo.component.html',\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class AccordionDemoComponent {}<\/code><\/pre>\n<nb-accordion>\n <nb-accordion-item>\n <nb-accordion-item-header>First Item Heading<\/nb-accordion-item-header>\n <nb-accordion-item-body>\n Toggled content for First Item.\n <\/nb-accordion-item-body>\n <\/nb-accordion-item>\n <nb-accordion-item>\n <nb-accordion-item-header>Second Item Heading<\/nb-accordion-item-header>\n <nb-accordion-item-body>\n Toggled content for Second Item.\n <\/nb-accordion-item-body>\n <\/nb-accordion-item>\n<\/nb-accordion><\/code><\/pre>\ngetDirection()<\/code> y setDirection()<\/code> – para detectar y cambiar la direcci\u00f3n del dise\u00f1o en tiempo de ejecuci\u00f3n.<\/p>\n7. NG-Lightning<\/h3>\n
![\"Biblioteca](\"https:\/\/kinqsta.com\/wp-content\/uploads\/2023\/03\/angular-component-library-ng-lightning-alert.png\")
import { Component } from '@angular\/core';\n\n@Component({\n selector: 'app-demo-alert-basic',\n templateUrl: '.\/basic.html',\n})\nexport class DemoAlertBasic {\n showTopAlert = false;\n\n onClose(reason: string) {\n console.log(`Closed by ${reason}`);\n }\n}<\/code><\/pre>\n<div class=\"slds-notify_container\">\n <ngl-alert *ngIf=\"showTopAlert\" variant=\"warning\" iconName=\"warning\" (close)=\"onClose($event); showTopAlert = false;\">\n <h2 class=\"slds-text-heading_small\">\n Your browser is outdated. Your Salesforce experience may be degraded.\n <a href=\"javascript:void(0);\">More Information<\/a>\n <\/h2>\n <\/ngl-alert>\n<\/div>\n\n<ngl-alert class=\"slds-theme_alert-texture\" variant=\"offline\" iconName=\"offline\" (close)=\"onClose('click')\">\n <h2>You are in offline mode.<a href=\"javascript:void(0);\">More Information<\/a><\/h2>\n<\/ngl-alert>\n\n<ngl-alert class=\"slds-m-top_small\" variant=\"error\">Your browser is currently not supported.<\/ngl-alert>\n\n<button class=\"slds-m-top_medium\" type=\"button\" [disabled]=\"showTopAlert\" nglButton (click)=\"showTopAlert = true\">Show alert in container<\/button><\/code><\/pre>\n8. Syncfusion UI<\/h3>\n
![\"La](\"https:\/\/kinqsta.com\/wp-content\/uploads\/2023\/03\/angular-component-library-syncfusion-cards.png\")
<ejs-grid [dataSource]=\"data\">\n <e-columns>\n <e-column field=\"OrderID\" headerText=\"Order ID\" textAlign=\"Right\" width=\"120\"><\/e-column>\n <e-column field=\"CustomerID\" headerText=\"Customer Name\" width=\"150\"><\/e-column>\n <e-column field=\"Freight\" headerText=\"Freight\" textAlign=\"Right\" format=\"C2\" width=\"120\"><\/e-column>\n <e-column field=\"ShipCity\" headerText=\"Ship City\" width=\"150\"><\/e-column>\n <\/e-columns>\n<\/ejs-grid><\/code><\/pre>\ndataSource<\/code> se establece en los datos que se van a mostrar, y el elemento e-columns<\/code> se utiliza para definir las columnas de la cuadr\u00edcula. Cada elemento e-column<\/code> define una columna de la rejilla, incluyendo el campo a mostrar, el texto de cabecera y la anchura de la columna. El ejemplo tambi\u00e9n muestra c\u00f3mo dar formato a los datos mostrados en la cuadr\u00edcula utilizando el atributo format<\/code>.<\/p>\n9. Onsen UI<\/h3>\n
![\"Ejemplos](\"https:\/\/kinqsta.com\/wp-content\/uploads\/2023\/03\/angular-component-library-onsen-ui-lists.png\")
<ons-button modifier=\"large--cta\">Click me!<\/ons-button><\/code><\/pre>\nlarge--cta<\/code>, que cambiar\u00e1 la apariencia del bot\u00f3n a un tama\u00f1o mayor con un color adecuado para un bot\u00f3n de llamada a la acci\u00f3n.<\/p>\n\nResumen<\/h2>\n