• websites

Client-side filtering


This is a sample showing how to implement client-side filtering.


Additionally used AMP components must be imported in the header. We use amp-bind to store products locally into a variable.


We use amp-list to retrieve static data.


We use amp-mustache to render data.


Client-side Filter

It is possible to implement client-side filtering by using amp-list, amp-state and amp-bind.

The amp-state is initially setup with data from an endpoint which returns a list of available products; the user can choose between different colors and that selection sets the variable filteredProducts to the result of a filter expression. The filter expression is an amp-bind expression which uses the Array.filter function.

The filteredProducts variable is then used as src of amp-list. amp-list does not resize automatically, but it is possible to calculate its height in the filtered state by using amp-bind: here we are binding the [height] to the length of the filteredProducts array times the height of a single element.

The alternative to this approach is using server-side filtering which we explain in the product sample.

<amp-state id="allProducts"
<select on="change:AMP.setState({
    filteredProducts: allProducts.items.filter(a => event.value == 'all' ? true : a.color == event.value)
  <option value="all"
  <option value="yellow">yellow</option>
  <option value="orange">orange</option>
<amp-list height="282"
  [height]="(40 + 24) * filteredProducts.length"
  <template type="amp-mustache">
Need further explanation?


Go to Stack Overflow
An unexplained feature?


Edit sample on GitHub