Um guia completo para Angular desenvolvimento de aplicativos de grade e Angular
Conheça a Angular Grade de Dados e como usá-la verificando esta seção informativa que faz parte do nosso tópico Visão geral da grade.
Ignite UI - Our Framework for Angular App Development
Ignite UI for Angular é um conjunto de ferramentas avançado da Infragistics que inclui componentes de interface do usuário ricos em recursos e de alto desempenho, como grades de dados e outros componentes, incluindo gráficos, mapas de visualização de dados, editores e muito mais.
A grade de dados Ignite UI Angular está entre as mais rápidas do setor e é usada por muitas das principais empresas financeiras e de seguros.
Construído com base na estrutura Angular do Google, o Ignite UI fornece mais de 50 componentes de interface do usuário e componentes baseados em material e mais de 50 tipos de gráficos, incluindo gráficos financeiros.
Entre seus muitos benefícios, o Ignite UI for Angular oferece fácil integração, desenvolvimento e design rápidos e compatibilidade responsiva entre navegadores.
Installing and Creating a Project
Você pode instalar Ignite UI for Angular com a CLI do Angular ou com a CLI Ignite UI. Para começar rapidamente com a CLI do Angular, execute o seguinte comando:
ng add igniteui-angular
Essa é a opção preferencial quando você precisa adicionar Ignite UI for Angular a um aplicativo Angular existente.
Se você estiver criando um novo aplicativo do zero, recomendamos a seguinte abordagem:
npm install –g igniteui-cli
Depois que a CLI do igniteui estiver instalada, você poderá inicializar facilmente um aplicativo seguindo a experiência guiada da CLI usando a CLI do Ignite UI ou o Ignite UI for Angular Schematics, que cria um aplicativo configurado que o usuário final pode executar com um único comando:
ig
Use esse rico conjunto de comandos CLI para executar outras funções, incluindo gerar um projeto Ignite UI e adicionar um novo componente para criar e servir todo o aplicativo.
Importing Dependencies
Quando se trata de importar dependências de produtos, recomendamos fortemente o uso de nossa CLI Ignite UI. Simplesmente usando ng add igniteui-angular, você pode instalar o pacote Ignite UI for Angular, juntamente com todas as suas dependências, importações de fontes, preferências de estilos e muito mais em seu projeto.
Para começar a usar Ignite UI for Angular componentes sem a CLI Ignite UI, certifique-se de ter configurado todas as dependências necessárias e executado a configuração adequada do seu projeto. Você pode aprender como fazer isso manualmente no tópico Introdução.
Adding Components to a Template
Depois de concluir a configuração do ambiente de desenvolvimento, você pode continuar adicionando e configurando outros componentes Ignite UI. Veja como usar nossos esquemas para adicionar uma grade com configuração básica e adicionar modelos a algumas de nossas colunas.
<igx-grid #grid1 [data]="localData" height="600px" (selected)="cellSelection($event)">
<igx-column header="Rank" headerClasses="myClass" width="115px" field="Id" sortable="true" [filterable]="false"></igx-column>
<igx-column field="Name" header="Athlete" width="280"></igx-column>
<igx-column field="Speed" header="Speed" [width]="'190px'" [filterable]="false"></igx-column>
<igx-column field="TrackProgress" sortable="true" header="Track Progress" [filterable]="false">
<ng-template igxCell let-val>
<div class="linear-bar-container">
<igx-linear-bar [textVisibility]="false" class="cell__inner_2" [value]="val"></igx-linear-bar>
</div>
</ng-template>
</igx-column>
<igx-paginator [perPage]="10">
</igx-paginator>
</igx-grid>
A grade em si consiste em diferentes componentes, como o IgxColumnComponent, que é usado para definir a coleção de colunas da grade e habilitar recursos por coluna, como classificação e paginação.
Cada uma das colunas da grade pode ser modelada separadamente. A coluna espera tags ng-template decoradas com uma das diretivas do módulo grid.
Configuring Your Components
Agora que você definiu colunas para nossa grade, pode definir diferentes modelos de célula, cabeçalho e rodapé da seguinte maneira:
- A diretiva IgxHeader tem como destino o cabeçalho da coluna, fornecendo o próprio objeto de coluna como um contexto.
<igx-column field="Name">
<ng-template igxHeader let-column>
{{ column.field | uppercase }}
</ng-template>
</igx-column>
igxCell aplica o modelo fornecido a todas as células da coluna. O objeto de contexto fornecido no modelo consiste no valor da célula fornecido implicitamente e no próprio objeto de célula.
A coluna também aceita um último modelo que será usado quando uma célula estiver no modo de edição. Assim como acontece com os outros modelos de coluna, o objeto de contexto fornecido é novamente o valor da célula e o próprio objeto de célula
<igx-column field="Price" [dataType]="'number'" editable="true">
<ng-template igxCellEditor let-cell="cell">
<label for="price">
Enter the new price tag
</label>
<input name="price" type="number" [(ngModel)]="cell.editValue" />
</ng-template>
</igx-column>
Adding Data to Your Tables and Charts
Embora alguns aplicativos Angular usem dados estáticos, a maior parte do desenvolvimento de aplicativos hoje usa dados armazenados em um banco de dados. Angular associação de dados, que é o processo de estabelecer uma conexão entre a interface do usuário do aplicativo e os dados que ele exibe, é fácil de implementar para permitir tabelas dinâmicas. Você pode definir a grade para se associar a um serviço de dados remoto, que é o cenário comum em aplicativos de grande escala. Uma boa prática é separar toda a lógica relacionada à busca de dados em um serviço de dados separado. Aqui está uma maneira de criar um serviço que lidará com a busca de dados do servidor:
O serviço em si é bastante simples, consistindo em um método: fetchData que retornará um Observable<NorthwindRecord[]>.
@Injectable()
export class NorthwindService {
private url = 'http://services.odata.org/V4/Northwind/Northwind.svc/Alphabetical_list_of_products';
constructor(private http: HttpClient) {}
public fetchData(): Observable<NorthwindRecord[]> {
return this.http
.get(this.url)
.pipe(
map(response => response['value']),
catchError(
this.errorHandler('Error loading northwind data', [])
)
);
}
private errorHandler<T>(message: string, result: T) {
return (error: any): Observable<any> => {
console.error(`${message}: ${error.message}`);
return of(result as T);
};
}
}
Depois de implementar o serviço, você desejará injetá-lo no construtor do nosso componente e usá-lo para recuperar os dados. O gancho do ciclo de vida ngOnInit é um bom lugar para despachar a solicitação inicial
@Component({
...
})
export class MyComponent implements OnInit {
public records: NorthwindRecord[];
constructor(private northwindService: NorthwindService) {}
ngOnInit() {
this.records = [];
this.northwindService.fetchData().subscribe((records) => this.records = records);
}
}
<igx-grid [data]="records">
<igx-column field="ProductId"></igx-column>
<!-- rest of the column definitions -->
...
</igx-grid>
Confira nosso tópico Vinculação de dados para obter informações mais detalhadas.
A mesma técnica de vinculação de dados é aplicável aos outros componentes Ignite UI, como o igxDataChart.
<igx-data-chart [dataSource]="data"
width="700px"
height="500px">
<igx-numeric-x-axis name="xAxis" isLogarithmic="true" ></igx-numeric-x-axis>
<igx-numeric-y-axis name="yAxis" isLogarithmic="true" ></igx-numeric-y-axis>
<igx-bubble-series
name="series1"
[xAxis]="xAxis"
[yAxis]="yAxis"
xMemberPath="population"
yMemberPath="gdpTotal"
radiusMemberPath="gdpPerCapita"
[dataSource]="data" ></igx-bubble-series>
</igx-data-chart>
A definição de uma fonte de dados no componente de gráfico será aplicada a todas as séries, mas você também pode definir fontes de dados diferentes em cada série adicionada ao gráfico de dados.
Sorting, Filtering and Pagination
Angular grades de dados oferecem suporte a classificação, filtragem e paginação fáceis. Com APIs avançadas e uma configuração intuitiva de recursos, usar Ignite UI for Angular componentes nunca foi tão fácil.
<igx-grid #grid1 (sortingDone)="removeSorting($event)"
[data]="data"
[allowFiltering]="true">
<igx-column field="OrderID" header="Order ID">
</igx-column>
<igx-column field="CategoryName" header="Category Name" [dataType]="'string'" sortable="true">
</igx-column>
<igx-paginator [perPage]="10">
</igx-paginator>
A Grade fornece três tipos de filtragem com condições de filtragem personalizadas:
Filtre a linha por coluna com a estratégia de filtragem padrão fornecida pronta para uso, bem como todas as condições de filtragem padrão.
Filtragem de estilo do Excel, com um menu configurável de recursos como classificar, mover, fixar e ocultar recursos.
Filtragem avançada que fornece uma caixa de diálogo que permite a criação de grupos com condições de filtragem em todas as colunas.
Nossa versão Angular 9 inclui muitos novos recursos importantes – desde análise de dados até uma visualização avançada, persistência de estado de grade e widget de temas.
Styling Your Components
Ignite UI tem os recursos de estilo mais expressivos das principais estruturas Angular.
Com apenas algumas linhas de código, você pode alterar facilmente o tema de seus componentes. Sendo desenvolvida em SASS, a API é fácil e permite a granularidade de temas em diferentes níveis de um único componente, vários componentes ou todo o pacote.
@use "igniteui-angular/theming" as *;
// IMPORTANT: Prior to Ignite UI for Angular version 13 use:
// @import '~igniteui-angular/lib/core/styles/themes/index';
$primary-color: #2ab759; // Some green shade I like
$secondary-color: #f96a88; // Watermelon pink
$my-color-palette: palette(
$primary: $primary-color,
$secondary: $secondary-color
);
// IMPORTANT: Make sure you always includecore first!
@include core();
// Pass the color palette we generated to thetheme mixin
@include theme($my-color-palette);
Como a Ignite UI for Angular baseia seus designs de componentes nos Princípios de Material Design, tentamos nos aproximar o máximo possível de cores, tamanhos, tipografia e aparência geral de nossos componentes daqueles criados pelo Google. Exemplo:
Gostou deste exemplo? Tenha acesso ao nosso kit de ferramentas de Angular completo e comece a criar seus próprios aplicativos em minutos. Faça o download gratuitamente.
Queremos também mencionar nosso widget de temas do navegador de amostras. Agora, você pode alterar os temas em tempo de execução no navegador de amostra Ignite UI com apenas um clique. O widget de temas permite alterar os estilos, cores, arredondamento e elevação. A personalização de temas nunca foi tão fácil. Quando estiver pronto com seu tema, basta pressionar "BAIXAR SASS" e você terá seu arquivo SCSS à sua disposição e poderá usá-lo em seu aplicativo:
Data Analysis with Ignite UI
O conjunto de ferramentas de interface do usuário do Ignite Angular também inclui recursos de análise de dados. Nós nos esforçamos para oferecer a você todos os recursos de negócios necessários para oferecer ótimas experiências aos seus clientes. Portanto, agora fornecemos diretivas que proporcionarão uma experiência mais parecida com o Excel. Por exemplo, ao selecionar uma parte dos dados, agora você pode clicar em um botão e executar uma análise rápida de dados nesse subconjunto de seus dados.
Tools for Code Generation and Design
Ignite UI for Angular faz parte do Indigo.Design System, que permite gerar código Angular nativo a partir de designs criados em Sketch com o Indigo.Design UI Kit. Você pode gerar uma grade compatível com dispositivos móveis ou com muitos dados que dá suporte a vários modos de edição e filtragem, mas também pode usar muitos dos recursos de grade populares, como classificação, paginação, resumos e agrupar por. Além disso, em cada coluna, você pode especificar várias operações, como mover, redimensionar, ocultar e fixar para obter os cenários de manipulação de dados mais sofisticados em tempo de design e ter uma interface de usuário perfeita em execução em minutos.
Performance Benchmarks
Os componentes de grade, em geral, destinam-se a visualizar grandes quantidades de dados tabulares. Quando se trata de desempenho, nosso Grid se destaca em tempo de carregamento, tempo de execução e desempenho suave.
Para atender aos requisitos de um aplicativo Web para tempo de carregamento e desempenho em tempo de execução, é importante virtualizar os elementos DOM (Document Object Model) que são renderizados e trocar ou reutilizar elementos DOM quando o usuário executa rolagem vertical e horizontal no contêiner do componente. O igxGrid tem ótimo desempenho de rolagem em tempo de ajuste sem rasgos visuais, bem como desempenho suave (definido pela usabilidade geral do seu software). Aqui está um exemplo de um Gif com desempenho de rolagem:
Confira nossa grade e veja como é fácil encontrar e navegar até o recurso que você deseja usar ou como a aparência dele seria atraente em seu aplicativo.
Saiba mais sobre isso em nosso artigo Desempenho médio de software (Web).
GitHub