Agrupar datos con un filtro angular

1. Agrupar datos en Angular con la función filtro
2. Agrupar datos en Angular con HTML puro
3. Agrupar datos en Angular con ngFor
4. Conclusión

Las páginas web se utilizan por múltiples razones. Tenemos sitios web diseñados para solucionar problemas; algunos están diseñados con fines educativos.

En tales casos, es posible que estos sitios web necesiten mostrar elementos en presentaciones clasificadas. Los elementos presentes en las clases son necesarios para mostrar a dónde pertenece cada elemento, como presentar datos en la clase de países, estados, distritos, etc.

Veremos diferentes formas de agrupar elementos usando el marco Angular.

Agrupar datos en Angular con la función filtro

Este primer método mostrará los datos en grupos y contará con un motor de búsqueda con capacidad de filtro.

Comenzamos creando una nueva carpeta de proyecto, y luego necesitamos crear dos archivos más dentro de la carpeta src>>app de la carpeta del proyecto.

El primer archivo se llamará cars.ts; este contendrá los datos que queremos agrupar en forma de matriz. El segundo archivo se llamará filter.pipe.ts; aquí es donde creamos la función de tubería para el filtro de búsqueda.

Ahora navegaremos al archivo app.component.html de la carpeta del proyecto y escribiremos estos códigos.

Fragmento de código- app.component.html:

<div class="container">
  <h2 class="py-4">Cars</h2>
  <div class="form-group mb-4">
    <input class="form-control" type="text" [(ngModel)]="searchText" placeholder="Search">
  </div>
  <table class="table" *ngIf="(cars | filter: searchText).length > 0; else noResults">
    <colgroup>
      <col width="5%">
      <col width="*">
      <col width="35%">
      <col width="15%">
    </colgroup>
    <thead>
      <tr>
        <th scope="col">#</th>
        <th scope="col">Brand</th>
        <th scope="col">Model</th>
        <th scope="col">Year</th>
      </tr>
    </thead>
    <tbody>
      <tr *ngFor="let car of cars | filter: searchText; let i = index">
        <th scope="row">{{i + 1}}</th>
        <td>{{car.brand}}</td>
        <td>{{car.model}}</td>
        <td>{{car.year}}</td>
      </tr>
    </tbody>
  </table>
  <ng-template #noResults>
    <p>No results found for "{{searchText}}".</p>
  </ng-template>
</div>

Aquí, hemos creado la estructura para la página y el formato de agrupación para nuestros datos, y luego declaramos la función *ngFor a los encabezados para habilitar el filtro de búsqueda.

A continuación, nos moveremos al archivo app.component.ts para escribir estos pocos códigos.

Fragmento de código- app.component.ts:

import { Component } from '@angular/core';
import { CARS } from './cars';
interface Car {
  brand: string;
  model: string;
  year: number;
}
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'filterone';
  cars: Car[] = CARS;
  searchText: string;
}

Todo lo que hemos hecho aquí es declarar los datos que queremos agrupar. Para la brand, el model y el tipo de entrada dentro del campo de búsqueda, los hemos declarado como tipos de cadena, mientras que hemos declarado el número de tipo para el year del modelo de automóvil.

Ahora debemos pasar al archivo car.ts que creamos anteriormente para insertar los datos que queremos agrupar. Escribiremos estos códigos.

Fragmento de código- cars.ts:

export const CARS = [
    {
      brand: 'Audi',
      model: 'A4',
      year: 2018
    }, {
      brand: 'Audi',
      model: 'A5 Sportback',
      year: 2021
    }, {
      brand: 'BMW',
      model: '3 Series',
      year: 2015
    }, {
      brand: 'BMW',
      model: '4 Series',
      year: 2017
    }, {
      brand: 'Mercedes-Benz',
      model: 'C Klasse',
      year: 2016
    }
  ];

Aquí hemos escrito los datos que queremos agrupar en forma de matriz, y cada uno está en el tipo de datos que declaramos en el archivo app.component.ts.

A continuación, navegaremos por el archivo filter.pipe.ts y escribiremos estos códigos.

Fragmento de código- filter.pipe.ts:

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'filter'
})
export class FilterPipe implements PipeTransform {
  transform(items: any[], searchText: string): any[] {
    if (!items) return [];
    if (!searchText) return items;
    return items.filter(item => {
      return Object.keys(item).some(key => {
        return String(item[key]).toLowerCase().includes(searchText.toLowerCase());
      });
    });
   }
}

Lo que hace la función pipe es que detecta el cambio en los datos agrupados y devuelve el nuevo valor después de que se ha producido el cambio.

Entonces, declaramos los elementos que podrían cambiarse dentro de la función transform(), y luego usamos la declaración if para decirle a Angular que una vez que ocurra un cambio en los elementos declarados, devuelva los elementos que han sido filtrados. Cuando escribimos un elemento en la barra de búsqueda, vemos que la página devuelve elementos relacionados con las palabras que escribimos.

Finalmente, trabajaremos dentro del archivo app.module.ts.

Fragmento de código- app.module.ts:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { FilterPipe } from './filter.pipe';
import { FormsModule } from '@angular/forms';

@NgModule({
  declarations: [
    AppComponent,
    FilterPipe
  ],
  imports: [
    BrowserModule,
    FormsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Aquí es donde importamos los módulos que permiten que nuestra aplicación funcione. Además, declaramos el componente Filterpipe de filter.pipe.ts.

Producción:

Agrupar datos en Angular con HTML puro

Cuando observa la estructura de los datos agrupados, podemos codificarlos fácilmente usando HTML puro, que es lo que haremos en este ejemplo.

Dentro del archivo app.component.html es donde haremos toda la codificación.

Fragmento de código- app.component.html:

<ol class="list-group list-group-light list-group-numbered">
  <li class="list-group-item d-flex justify-content-between align-items-start">
    <div class="ms-2 me-auto">
      <div class="fw-bold"><h4>Fruits</h4></div>
      <ol>Pineapple</ol>
      <ol>apple</ol>
      <ol>Pine</ol>
    </div>
  </li>
  <li class="list-group-item d-flex justify-content-between align-items-start">
    <div class="ms-2 me-auto">
      <div class="fw-bold"><h4>Cars</h4></div>
      <ol>BMW</ol>
      <ol>Benz</ol>
      <ol>Audi</ol>
    </div>
  </li>
  <li class="list-group-item d-flex justify-content-between align-items-start">
    <div class="ms-2 me-auto">
      <div class="fw-bold"><h4>Countries</h4></div>
      <ol>US</ol>
      <ol>Italy</ol>
      <ol>France</ol>
    </div>
  </li>
</ol>

Declaramos los encabezados de cada grupo dentro de una etiqueta h4 para que parezcan más grandes que los elementos que estamos clasificando. Luego declaramos cada elemento dentro de una etiqueta de lista ordenada.

Producción:

Agrupar datos en Angular con ngFor

La directiva ngFor es la función incorporada de Angular que nos permite utilizar datos locales que se presentan en forma de matriz. Organiza los datos que se mostrarán en forma de datos agrupados.

Crearemos una nueva carpeta de proyecto, navegaremos hasta el archivo app.component.ts y escribiremos estos códigos.

Fragmento de código- app.component.ts:

import { Component } from '@angular/core';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'filterone';
  listofStatesCity : any[]=
  [
    {'State' : 'Karnataka', 'City':[{'Name': 'Bengaluru'}, {'Name': 'Mangaluru'}]},
    {'State' : 'Tamil Nadu', 'City':[{'Name': 'Chennai'}, {'Name': 'Vellore'}]},
    {'State' : 'Jharkhand', 'City':[{'Name': 'Ranchi'}, {'Name': 'Bokaro'}]}
  ]
}

Estamos agrupando los datos en dos clases, Estado y Ciudad. Hemos declarado los nombres de los estados y ciudades en cada grupo.

Luego navegaremos a app.component.html para crear la estructura para los datos de la matriz.

Fragmento de código- app.component.html:

<ul *ngFor = "let state of listofStatesCity">
  <li>{{state.State}}</li>
  <ul *ngFor = "let city of state.City">
      <li>
        {{city.Name}}
      </li>
  </ul>

Declaramos la directiva ngFor para cada grupo, por lo que cuando los datos se representan en la página web, los datos se clasifican en Estado y Ciudad.

Producción:

Conclusión

Podemos agrupar datos usando diferentes métodos dentro del marco Angular. Las razones para agrupar datos podrían determinar el enfoque que adoptaremos, especialmente con la función tubería que nos permite crear opciones de filtro de búsqueda.