Por que usar uma biblioteca de componentes?<\/h2>\n
Se voc\u00ea os constr\u00f3i sozinho ou adota bibliotecas de terceiros, os componentes formam a base dos aplicativos Angular. Cada componente depende de um template para seus elementos HTML e CSS e c\u00f3digo TypeScript que controla seu comportamento.<\/p>\n
O principal benef\u00edcio das bibliotecas de componentes \u00e9 que elas fornecem componentes de interface do usu\u00e1rio (UI) reutiliz\u00e1veis e pr\u00e9-constru\u00eddos, reduzindo a necessidade de c\u00f3digo personalizado e ajudando os desenvolvedores a colocar os aplicativos em funcionamento rapidamente.<\/p>\n
A abordagem do Angular para componentes tamb\u00e9m pode melhorar a coopera\u00e7\u00e3o entre equipes de programadores que podem estar escrevendo c\u00f3digo TypeScript e designers da web que fornecem o HTML para os templates.<\/p>\n
As bibliotecas de componentes s\u00e3o tipicamente adicionadas aos projetos Angular usando o Node.js As bibliotecas de componentes de nossa lista foram selecionadas com base em v\u00e1rios crit\u00e9rios:<\/p>\n Agora vamos dar uma olhada mais de perto nas nossas escolhas.<\/p>\n Angular Material<\/a> \u00e9 a biblioteca oficial de componentes Angular, oferecendo uma cole\u00e7\u00e3o abrangente de IU enquanto se mant\u00e9m atualizada com as \u00faltimas recursos do Angular e mudan\u00e7as de API. Tamb\u00e9m oferece suporte integrado \u00e0 acessibilidade, gerando marca\u00e7\u00e3o para permitir a navega\u00e7\u00e3o pelo teclado e guiar tecnologias assistivas, como leitores de tela.<\/p>\n Como funciona:<\/strong> O Angular Material utiliza as diretivas e servi\u00e7os integrados do Angular para fornecer um conjunto de componentes vinculados a dados e com bom desempenho baseado no Angular, facilitando a adi\u00e7\u00e3o de interatividade a aplicativos web.<\/p>\n Onde se destaca:<\/strong> O Angular Material \u00e9 excelente ao fornecer componentes de UI pr\u00e9-constru\u00eddos que seguem as diretrizes do Material Design. Oferece um conjunto de componentes de UI bem projetados e personaliz\u00e1veis que podem ser facilmente integrados aos aplicativos Angular. Esses componentes incluem menus de navega\u00e7\u00e3o, bot\u00f5es, formul\u00e1rios, caixas de di\u00e1logo e muito mais.<\/p>\n Por exemplo, se voc\u00ea deseja adicionar um componente de bot\u00e3o ao seu aplicativo, pode simplesmente usar a diretiva mat-button e personaliz\u00e1-la conforme necess\u00e1rio.<\/p>\n Aqui est\u00e1 um exemplo de trecho de c\u00f3digo:<\/p>\n Este c\u00f3digo ir\u00e1 gerar um componente de bot\u00e3o com o esquema de cores prim\u00e1rias. Voc\u00ea pode personalizar ainda mais o bot\u00e3o adicionando manipuladores de eventos, alterando o texto e a apar\u00eancia do \u00edcone.<\/p>\n NG-Bootstrap<\/a> \u00e9 uma biblioteca de c\u00f3digo aberto constru\u00edda sobre o Bootstrap CSS, fornecendo componentes e padr\u00f5es de design que muitos desenvolvedores j\u00e1 est\u00e3o familiarizados com. Isso reduz a curva de aprendizado para novos projetos, tornando uma escolha confi\u00e1vel para a constru\u00e7\u00e3o de aplicativos Angular de forma r\u00e1pida e eficiente.<\/p>\n Como funciona: <\/strong>O NG-Bootstrap amplia as capacidades dos componentes Bootstrap permitindo que os desenvolvedores usem como diretivas Angular, com vincula\u00e7\u00e3o bidirecional de dados e outros recursos espec\u00edficos do Angular. Isso facilita a cria\u00e7\u00e3o de aplicativos web responsivos e amig\u00e1veis para dispositivos m\u00f3veis que funcionam perfeitamente com o Angular.<\/p>\n Onde se destaca: <\/strong>Uma das principais for\u00e7as do NG-Bootstrap \u00e9 o seu suporte para recursos de acessibilidade, incluindo as especifica\u00e7\u00f5es da W3C para Accessible Rich Internet Applications (ARIA), tornando mais f\u00e1cil para os desenvolvedores criar aplicativos que podem ser usados por pessoas com defici\u00eancia. O NG-Bootstrap tamb\u00e9m se destaca na \u00e1rea de di\u00e1logos modais. Com o componente Modal do Aqui est\u00e1 um exemplo de como criar um di\u00e1logo modal b\u00e1sico usando o NG-Bootstrap:<\/p>\n Neste exemplo, o elemento Clarity<\/a>\u00a0\u00e9 uma biblioteca de c\u00f3digo aberto que utiliza uma linguagem visual compartilhada em seus componentes para proporcionar uma UI consistente e intuitiva. Tamb\u00e9m \u00e9 extensivamente documentada, com in\u00fameros guias, tutoriais e refer\u00eancias de API, tornando f\u00e1cil de aprender e usar.<\/p>\n Como funciona:<\/strong> O sistema de design Clarity \u00e9 baseado no conceito de “cart\u00f5es”, usados para agrupar conte\u00fados relacionados. Cart\u00f5es s\u00e3o usados para representar partes individuais de conte\u00fado de forma estruturada e organizada. O Clarity fornece uma variedade de componentes de cart\u00e3o que podem apresentar dados em diversos formatos. Esses componentes de cart\u00e3o incluem cabe\u00e7alhos, rodap\u00e9s e se\u00e7\u00f5es de conte\u00fado e podem ser facilmente personalizados com diferentes estilos e temas.<\/p>\n Os cart\u00f5es tamb\u00e9m podem ser combinados com outros componentes – tais como modais, dropdowns e bot\u00f5es – para criar projetos mais complexos de IU. O objetivo geral do projeto baseado em cart\u00f5es \u00e9 fornecer um sistema flex\u00edvel e modular para criar interfaces complexas com facilidade.<\/p>\n Onde se destaca:<\/strong> O extenso conjunto de controles de formul\u00e1rio do Clarity \u00e9 definitivamente um ponto forte. Estes controles incluem campos de entrada, caixas de sele\u00e7\u00e3o, bot\u00f5es de op\u00e7\u00e3o e muito mais. O Clarity tamb\u00e9m oferece um conjunto de visualiza\u00e7\u00f5es de dados, como gr\u00e1ficos de barras, gr\u00e1ficos de linhas e gr\u00e1ficos de pizza, para exibir dados de forma clara e organizada.<\/p>\n Aqui est\u00e1 um exemplo de como usar o componente de campo de entrada Clarity em um formul\u00e1rio HTML:<\/p>\n Este c\u00f3digo criar\u00e1 um campo de entrada de formul\u00e1rio com uma etiqueta e um texto de espa\u00e7o reservado. As diretivas Kendo UI<\/a> \u00e9 uma biblioteca comercial constru\u00edda com o desempenho em mente, garantindo tempos de carregamento r\u00e1pidos e uma experi\u00eancia suave para o usu\u00e1rio. Ela tamb\u00e9m fornece temas e op\u00e7\u00f5es de estilo para melhorar a apar\u00eancia do seu aplicativo, assim como uma extensa documenta\u00e7\u00e3o e uma equipe de suporte dedicada.<\/p>\n Como funciona:<\/strong> Kendo UI usa t\u00e9cnicas como virtualiza\u00e7\u00e3o e carregamento pregui\u00e7oso<\/a> para garantir tempos de carregamento r\u00e1pidos e uma experi\u00eancia suave para o usu\u00e1rio. Isso significa que os aplicativos constru\u00eddos com Kendo UI s\u00e3o r\u00e1pidos e responsivos, mesmo quando se trata de grandes conjuntos de dados. Kendo UI tamb\u00e9m segue uma arquitetura modular que permite aos desenvolvedores usar apenas os componentes que eles precisam, reduzindo o tamanho da biblioteca e melhorando o desempenho.<\/p>\n Onde se destaca:<\/strong> Kendo UI \u00e9 particularmente adequado para aplicativos de n\u00edvel empresarial que requerem extenso gerenciamento de dados e intera\u00e7\u00f5es complexas do usu\u00e1rio. Seu componente de grade, por exemplo, suporta recursos como filtragem, ordena\u00e7\u00e3o e agrupamento, permitindo que os desenvolvedores apresentem grandes conjuntos de dados aos usu\u00e1rios de uma forma gerenci\u00e1vel.<\/p>\n Aqui est\u00e1 um trecho de c\u00f3digo de como criar uma simples grade Kendo UI em HTML:<\/p>\n Este c\u00f3digo ir\u00e1 exibir uma grade Kendo UI em seu aplicativo Angular. Voc\u00ea pode personalizar a grade passando v\u00e1rias op\u00e7\u00f5es de configura\u00e7\u00e3o para o componente PrimeNG<\/a> \u00e9 uma biblioteca de c\u00f3digo aberto projetada para facilidade de uso e personaliza\u00e7\u00e3o. Ela tamb\u00e9m inclui recursos avan\u00e7ados de acessibilidade e suporte \u00e0 internacionaliza\u00e7\u00e3o, tornando-a uma excelente escolha para aplicativos globais.<\/p>\n Como funciona:<\/strong> A biblioteca PrimeNG fornece um conjunto de componentes de UI pr\u00e9-constru\u00eddos que os desenvolvedores podem facilmente integrar aos seus aplicativos Angular. Ela utiliza as diretivas e hooks de ciclo de vida integrados do Angular para proporcionar uma integra\u00e7\u00e3o perfeita com o framework. Ela tamb\u00e9m suporta v\u00e1rias op\u00e7\u00f5es de configura\u00e7\u00e3o e personaliza\u00e7\u00f5es para que os desenvolvedores possam adaptar os componentes \u00e0s suas necessidades espec\u00edficas.<\/p>\n Onde se destaca:<\/strong> Um dos principais recursos do PrimeNG \u00e9 o seu suporte \u00e0 internacionaliza\u00e7\u00e3o. A biblioteca suporta m\u00faltiplos idiomas e fornece servi\u00e7os de tradu\u00e7\u00e3o para a maioria de seus componentes. Isso \u00e9 alcan\u00e7ado atrav\u00e9s do uso do framework de localiza\u00e7\u00e3o do Angular e arquivos de mensagens, que podem ser facilmente personalizados e atualizados.<\/p>\n Para usar a internacionaliza\u00e7\u00e3o no PrimeNG, voc\u00ea precisa criar arquivos de tradu\u00e7\u00e3o para os idiomas que deseja suportar. Esses arquivos devem conter tradu\u00e7\u00f5es para todos os componentes que voc\u00ea deseja usar em seu aplicativo. Para habilitar a internacionaliza\u00e7\u00e3o no PrimeNG, voc\u00ea precisa definir o atributo Aqui est\u00e1 um exemplo de como usar o componente Neste exemplo, o componente Nebular<\/a> \u00e9 uma cole\u00e7\u00e3o de mais de 40 componentes UI Angular dispon\u00edveis em quatro temas personaliz\u00e1veis. A biblioteca, criada pela empresa de desenvolvimento web Akveo, tamb\u00e9m vem com um m\u00f3dulo de autentica\u00e7\u00e3o de usu\u00e1rio e um m\u00f3dulo de seguran\u00e7a baseado em ACL para controlar o acesso mais granular a recursos espec\u00edficos. A Akveo tamb\u00e9m pode ajud\u00e1-lo a iniciar seu pr\u00f3prio aplicativo de painel de controle com o kit ngx-admin<\/strong> constru\u00eddo usando m\u00f3dulos Nebular.<\/p>\n Como funciona:<\/strong> A abordagem UI da Nebular \u00e9 baseada nas especifica\u00e7\u00f5es do Sistema Eva Design<\/a> da Akveo, para o qual tamb\u00e9m fornece ativos para equipes cujo trabalho come\u00e7a com ferramentas de design como o Sketch ou Figma.<\/p>\n Os designers que trabalham com o CSS da Nebular podem geralmente se referir semanticamente \u00e0s op\u00e7\u00f5es de estilo – tais como as vari\u00e1veis de cor A biblioteca de componentes do Nebular inclui layouts, cart\u00f5es, listas, acorde\u00f5es, aux\u00edlios de navega\u00e7\u00e3o, elementos de formul\u00e1rio, tabelas de dados, modais e sobreposi\u00e7\u00f5es, al\u00e9m de widgets como spinners, seletores de data e barras de progresso.<\/p>\n Os metadados para um componente de acorde\u00e3o Nebular podem se parecer com este TypeScript:<\/p>\n E seu modelo pode se parecer com este:<\/p>\n Onde se destaca:<\/strong> A biblioteca Nebular e o kit de painel de controle ngx-admin<\/strong> s\u00e3o gratuitos para uso, o que \u00e9 uma grande vantagem para uma cole\u00e7\u00e3o t\u00e3o sofisticada de ferramentas. Os m\u00f3dulos de autentica\u00e7\u00e3o e seguran\u00e7a refletem o foco da Akveo nesses componentes do painel de controle.<\/p>\n O Nebular tamb\u00e9m tem um forte suporte para idiomas que s\u00e3o lidos da direita para a esquerda (RTL). Os usu\u00e1rios encontrar\u00e3o marca\u00e7\u00e3o CSS para suportar layouts RTL (e LTR) e m\u00e9todos – como NG-Lightning<\/a> \u00e9 uma adi\u00e7\u00e3o interessante \u00e0 linha de bibliotecas de componentes, sendo uma implementa\u00e7\u00e3o com sabor Angular do Salesforce Lightning Design System<\/a> (LDS). Esse sistema fornece elementos HTML e CSS – projetos – e diretrizes de design para desenvolvedores Salesforce usando a plataforma Lightning. Os principais elementos do LDS s\u00e3o refletidos nesta cole\u00e7\u00e3o de c\u00f3digo aberto de widgets Angular, incluindo o HTML e CSS.<\/p>\n Como funciona:<\/strong> O NG-Lightning tem depend\u00eancias que o diferenciam de algumas das outras bibliotecas de componentes. Al\u00e9m de depender do Angular Component Dev Kit oficial<\/a>, os aplicativos NG-Lightning vinculam-se aos mesmos reposit\u00f3rios CSS usados pelo Salesforce LDS. Esse CSS pode ser baixado do reposit\u00f3rio oficial Salesforce UX<\/a> ou vinculado atrav\u00e9s de um CDN.<\/p>\n Ainda assim, a abordagem baseada em TypeScript para a constru\u00e7\u00e3o de views ser\u00e1 familiar para os desenvolvedores Angular. Este exemplo inicia os metadados para o componente de alerta mostrado acima:<\/p>\n O modelo de componente para aquele exemplo oficial do NG-Lightning \u00e9:<\/p>\n Onde se destaca:<\/strong> Refletindo sua base no Salesforce LDS, os desenvolvedores do NG-Lightning levam a acessibilidade web a s\u00e9rio. Interfaces geradas dinamicamente, que s\u00e3o a marca registrada de frameworks como o Angular, muitas vezes podem ser um desafio para usu\u00e1rios finais com defici\u00eancias visuais ou de mobilidade. O NG-Lightning adere \u00e0s diretrizes das especifica\u00e7\u00f5es ARIA da W3C, gerando marca\u00e7\u00f5es web projetadas para suportar tecnologias assistivas como leitores de tela.<\/p>\n Syncfusion UI<\/a> \u00e9 uma biblioteca leve e modular que permite aos desenvolvedores escolher apenas os componentes necess\u00e1rios para seus aplicativos e reduzir o tamanho geral do pacote final. Isso facilita manter, estender e atualizar a biblioteca, adicionando novos componentes ou modificando os existentes sem afetar os outros.<\/p>\n Como funciona:<\/strong> Quando uma p\u00e1gina carrega, a biblioteca Syncfusion UI inicializa e cria os componentes necess\u00e1rios com base na marca\u00e7\u00e3o e op\u00e7\u00f5es de configura\u00e7\u00e3o. Por exemplo, o componente de grade permite que os usu\u00e1rios ordenem, filtrem e agrupem dados, enquanto o componente de gr\u00e1fico pode exibir dados em uma variedade de formatos, incluindo gr\u00e1ficos de linha, barra e pizza.<\/p>\n A biblioteca tamb\u00e9m inclui um conjunto de fun\u00e7\u00f5es e ferramentas que podem ser usadas para simplificar tarefas comuns, tais como manipula\u00e7\u00e3o e valida\u00e7\u00e3o de dados. A biblioteca inclui um gerenciador de dados que pode ser usado para trabalhar com estruturas de dados complexas e um mecanismo de valida\u00e7\u00e3o que pode ser usado para validar a entrada do usu\u00e1rio.<\/p>\n Onde se destaca:<\/strong> Syncfusion fornece um conjunto robusto de ferramentas para personaliza\u00e7\u00e3o e tematiza\u00e7\u00e3o, permitindo aos desenvolvedores criar rapidamente uma interface do usu\u00e1rio (UI) consistente e de apar\u00eancia profissional. A biblioteca inclui um poderoso conjunto de APIs e eventos que podem ser usados para criar funcionalidades personalizadas e interatividade, bem como suporte a fontes de dados populares como REST APIs, OData, e SignalR.<\/p>\n Aqui est\u00e1 um exemplo de inclus\u00e3o de um componente Syncfusion grid em um aplicativo Angular:<\/p>\n Este c\u00f3digo cria uma grade simples que exibe dados de uma fonte de dados. A propriedade Onsen UI<\/a> \u00e9 uma renomada biblioteca de interface do usu\u00e1rio (UI) de c\u00f3digo aberto destinada \u00e0 constru\u00e7\u00e3o de aplicativos m\u00f3veis h\u00edbridos e web. Ela destaca-se pela integra\u00e7\u00e3o sem emendas com frameworks frontend<\/a> reconhecidos, tornando mais simples a cria\u00e7\u00e3o de interfaces interativas e de alta qualidade.<\/p>\n Como funciona:<\/strong> Onsen UI \u00e9 baseado na filosofia Material Design do Google, o que garante que a interface do usu\u00e1rio do aplicativo seja esteticamente agrad\u00e1vel e f\u00e1cil de usar. Ela oferece uma ampla variedade de temas integrados que podem ser aplicados aos componentes para aprimorar a apar\u00eancia do aplicativo.<\/p>\n Onde se destaca:<\/strong> Onsen UI \u00e9 conhecida por sua facilidade de uso e capacidade de criar aplicativos multiplataforma que se parecem e se sentem como aplicativos nativos. Oferece um conjunto rico de componentes de interface de usu\u00e1rio pr\u00e9-projetados e otimizados para dispositivos m\u00f3veis e podem ser personalizados para atender \u00e0s necessidades do aplicativo. Tamb\u00e9m inclui recursos como suporte ao FastClick<\/a>, que ajuda a remover atrasos em eventos de toque, e carregamento pregui\u00e7oso, que permite tempos de carregamento mais r\u00e1pidos do aplicativo.<\/p>\n Aqui est\u00e1 um exemplo de trecho de c\u00f3digo mostrando como criar um simples bot\u00e3o usando Onsen UI:<\/p>\n Este c\u00f3digo cria um bot\u00e3o com o texto “Clique em mim!” e a classe de modificador Bibliotecas de componentes s\u00e3o atualmente amplamente aceitas como pr\u00e1tica padr\u00e3o no desenvolvimento web. Essas bibliotecas ajudaram o Angular a se tornar um dos frameworks de desenvolvimento frontend mais populares e amplamente utilizados, oferecendo uma maneira conveniente e eficiente de desenvolver componentes de UI.<\/p>\n As bibliotecas citadas oferecem componentes de UI pr\u00e9-constru\u00eddos e personaliz\u00e1veis que auxiliam os desenvolvedores a criar interfaces de usu\u00e1rio de alta qualidade e consistentes com menos esfor\u00e7o. Em \u00faltima an\u00e1lise, a escolha da biblioteca depender\u00e1 das necessidades espec\u00edficas do projeto e das prefer\u00eancias do desenvolvedor.<\/p>\n Precisa de um lar para seu pr\u00f3ximo projeto Angular? As plataformas de Hospedagem de Aplicativos<\/a> e Hospedagem de Banco de Dados<\/a> da Kinsta est\u00e3o prontas para apresentar seu aplicativo ao mundo.<\/p>\n","protected":false},"excerpt":{"rendered":" Angular \u00e9 um framework JavaScript de c\u00f3digo aberto constru\u00eddo com TypeScript e otimizado para desenvolver aplicativos web de p\u00e1gina \u00fanica. \u00c9 conhecido por sua versatilidade, permitindo …<\/p>\n","protected":false},"author":117,"featured_media":58263,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[],"topic":[950],"class_list":["post-58262","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","topic-angular"],"yoast_head":"\nnpm<\/code> Node Package Manager ou usando a pr\u00f3pria interface de linha de comando (CLI) do Angular.<\/p>\nO que faz uma boa biblioteca de componentes?<\/h2>\n
\n
9 bibliotecas de componentes Angular<\/h2>\n
1. Angular Material<\/h3>\n
![\"Exemplo](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/03\/angular-component-library-material-buttons.png\")
<button mat-button color=\"primary\">Click me!<\/button><\/code><\/pre>\n2. NG-Bootstrap<\/h3>\n
![\"Carrossel](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/03\/angular-component-library-ng-bootstrap-carousel.jpg\")
ng-bootstrap<\/code>, os desenvolvedores podem facilmente criar di\u00e1logos modais com op\u00e7\u00f5es personaliz\u00e1veis, como tamanho, plano de fundo e suporte ao 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> cont\u00e9m o conte\u00fado para o di\u00e1logo modal, incluindo o cabe\u00e7alho, corpo e rodap\u00e9. O elemento de bot\u00e3o no final do trecho de c\u00f3digo aciona a abertura do modal quando clicado. O m\u00e9todo open()<\/code> \u00e9 usado para exibir o modal e recebe o elemento ng-template<\/code> como seu argumento.<\/p>\n3. Clarity<\/h3>\n
![\"Uma](\"https:\/\/kinsta.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> e clrInput<\/code> s\u00e3o fornecidas pela biblioteca Clarity e ir\u00e3o estilizar o campo de entrada de acordo.<\/p>\n4. Kendo UI<\/h3>\n
![\"Exemplo](\"https:\/\/kinsta.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
![\"Logo](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/03\/angular-component-library-primeng-logo.png\"){kind=logo}
translate<\/code> de um componente para true<\/code>. O componente ent\u00e3o usar\u00e1 os arquivos de tradu\u00e7\u00e3o para exibir o texto no idioma escolhido pelo usu\u00e1rio.<\/p>\np-calendar<\/code> com suporte de internacionaliza\u00e7\u00e3o no 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> tem o atributo translate<\/code> definido como true<\/code>, e o atributo [locale]<\/code> definido como o c\u00f3digo do idioma para ingl\u00eas (en). Isso assegura que o calend\u00e1rio seja exibido em ingl\u00eas para os usu\u00e1rios que escolheram aquele idioma.<\/p>\n6. Nebular<\/h3>\n
![\"Exemplo](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/03\/angular-component-library-nebular-smart-table.png\")
primary<\/code>, success<\/code>, info<\/code>, warning<\/code>, e danger<\/code>. Mas os usu\u00e1rios podem ir al\u00e9m do que a Akveo decidiu que eles representam, importando a personaliza\u00e7\u00e3o avan\u00e7ada do estilo como arquivos 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> e setDirection()<\/code> – para detectar e alterar a dire\u00e7\u00e3o do layout em tempo real.<\/p>\n7. NG-Lightning<\/h3>\n
![\"NG-Lightning](\"https:\/\/kinsta.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
![\"Biblioteca](\"https:\/\/kinsta.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> \u00e9 definida para os dados a serem exibidos, e o elemento e-columns<\/code> \u00e9 usado para definir as colunas na grade. Cada elemento e-column<\/code> define uma coluna na grade, incluindo o campo a ser exibido, o texto do cabe\u00e7alho e a largura da coluna. O exemplo tamb\u00e9m demonstra como formatar os dados exibidos na grade usando o atributo format<\/code>.<\/p>\n9. Onsen UI<\/h3>\n
![\"Exemplos](\"https:\/\/kinsta.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 altera a apar\u00eancia do bot\u00e3o para um tamanho maior e uma cor adequada para um bot\u00e3o Call to Action.<\/p>\n\nResumo<\/h2>\n