Actividad entregable

8.5. Maquetar el filtro con Bootstrap

El filtro que vamos a crear es un formulario sencillo:

• un campo de texto para el nombre
• otro para la categoría
• y un checkbox para mostrar solo productos activos.

Abrimos product-filter.component.html y ponemos:

<div class="card p-3 mb-4 shadow-sm">

  <h5 class="fw-semibold mb-3">Filtrar productos</h5>

  <div class="row g-3">

    <div class="col-md-4">
      <input
        type="text"
        class="form-control"
        placeholder="Buscar por nombre"
        (input)="onNombreChange($event)">
    </div>

    <div class="col-md-4">
      <input
        type="text"
        class="form-control"
        placeholder="Filtrar por categoría"
        (input)="onCategoriaChange($event)">
    </div>

    <div class="col-md-4 d-flex align-items-center">
      <div class="form-check">
        <input
          class="form-check-input"
          type="checkbox"
          id="soloActivos"
          (change)="onActivoChange($event)">
        <label class="form-check-label" for="soloActivos">
          Solo activos
        </label>
      </div>
    </div>

  </div>

</div>