Actividad entregable

8.4. Colocar el filtro en la vista principal

El filtro no modifica directamente la vista.

Modifica el estado del servicio, y ese estado se propaga automáticamente a todos los componentes que están suscritos.

Esta es la razón por la que BehaviorSubject es tan importante en Angular.

Abrimos app.ts importamos el filtro:

import { ProductFilterComponent } from './components/product-filter/product-filter.component';

En el decorador

imports: [
  CommonModule,
  ProductFormComponent,
  ProductFilterComponent,
  ProductsListComponent
]

En app.html, colocamos el filtro entre el formulario y la lista:

<main class="container mb-5">

  <app-product-form
    (productoCreado)="onProductoCreado($event)">
  </app-product-form>

  <app-product-filter></app-product-filter>

  <app-products-list></app-products-list>

</main>

La estructura ahora es clara:

Formulario -> Filtros -> Lista

Probamos la aplicación:

• Escribimos un nombre -> la lista se filtra
• Escribimos una categoría -> se actualiza
• Activamos "solo activos" -> desaparecen los inactivos

Todo esto ocurre en tiempo real gracias al BehaviorSubject.