[Anderson Paraibano]

Resolvendo a relação pai-filho usando TreeData em Angular 15 com Ag-Grid

Introdução:
A visualização de dados hierárquicos, como uma estrutura de árvore com relação pai-filho, é uma tarefa comum em muitas aplicações. No contexto do Angular 15, podemos aproveitar a biblioteca Ag-Grid e sua integração com a biblioteca ag-Grid-Angular para criar uma exibição interativa e eficiente de dados em formato de árvore.

Neste artigo, exploraremos como mostrar a relação pai-filho utilizando o recurso TreeData do Ag-Grid em conjunto com JavaScript, JSON, Angular e uma estrutura de árvore binária.

Passo 1: Configuração do projeto Angular 15 e instalação do Ag-Grid
Primeiro, é necessário criar um projeto Angular 15. Certifique-se de ter o Node.js e o Angular CLI instalados em sua máquina. Abra o terminal e execute o seguinte comando para criar um novo projeto Angular 15:

arduino
Copy code
ng new meu-projeto-angular15
Depois de criar o projeto, navegue até a pasta do projeto usando o comando cd meu-projeto-angular15. Em seguida, instale o Ag-Grid e o Ag-Grid-Angular usando o comando:

css
Copy code
npm install ag-grid ag-grid-angular
Passo 2: Preparação dos dados JSON
Vamos criar um arquivo JSON com uma estrutura de árvore binária simples para fins de demonstração. O arquivo data.json pode ter o seguinte conteúdo:

json
Copy code
{
“name”: “Raiz”,
“children”: [
{
“name”: “Filho 1”,
“children”: [
{
“name”: “Neto 1”
},
{
“name”: “Neto 2”
}
]
},
{
“name”: “Filho 2”,
“children”: [
{
“name”: “Neto 3”
},
{
“name”: “Neto 4”
}
]
}
]
}
Passo 3: Configuração do componente Angular e uso do Ag-Grid
Agora, vamos criar um componente Angular que será responsável por exibir os dados em formato de árvore usando o Ag-Grid.

Primeiro, crie um novo componente usando o comando:

Copy code
ng generate component TreeDataComponent
Em seguida, abra o arquivo tree-data.component.ts e importe os módulos necessários:

typescript
Copy code
import { Component, OnInit } from ‘@angular/core’;
import { ColDef, GridOptions } from ‘ag-grid-community’;
Em seguida, declare uma variável para armazenar os dados JSON e a configuração do Ag-Grid:

typescript
Copy code
data: any[];
gridOptions: GridOptions;
No método ngOnInit(), carregue os dados JSON no array data e configure as opções do Ag-Grid:

typescript
Copy code
ngOnInit() {
this.data = require(‘./data.json’);
this.gridOptions = {
treeData: true,
animateRows: true,
getDataPath: function(data) {
return data.name;
},
columnDefs: this.getColumnDefs(),
rowData: this.data
};
}

getColumnDefs(): ColDef[] {
return [
{ field: ‘name’, headerName: ‘Nome’ }
];
}
O método getColumnDefs() retorna a definição das colunas do Ag-Grid. Neste exemplo, temos apenas uma coluna chamada “Nome”.

Por fim, no template do componente tree-data.component.html, adicione o seguinte código para exibir o Ag-Grid:

html
Copy code
<ag-grid-angular
style=”width: 100%; height: 500px;”
class=”ag-theme-alpine”
[gridOptions]=”gridOptions”
></ag-grid-angular>
Passo 4: Execução do projeto
Agora, você pode executar o projeto Angular 15 usando o comando ng serve. Abra o navegador e acesse http://localhost:4200 para ver o Ag-Grid exibindo os dados em formato de árvore.

Conclusão:
Neste artigo, exploramos como mostrar a relação pai-filho usando o recurso TreeData do Ag-Grid em um projeto Angular 15. Combinando JavaScript, JSON, Angular e a estrutura de árvore binária, pudemos criar uma exibição interativa e eficiente dos dados hierárquicos. O Ag-Grid fornece recursos poderosos para manipular e visualizar dados em formato de árvore, permitindo uma experiência rica para os usuários.

Lembre-se de que este exemplo é apenas uma demonstração básica do uso do Ag-Grid com dados em formato de árvore. Você pode personalizar e expandir essa solução de acordo com as necessidades do seu projeto.

[Autor]

Posts