Floating filters

JamFloatingFilters

import { JamFloatingFiltersModule } from 'ngx-jsonapi-material';

Selector: jam-floating-filters

Properties

Name	Description
@Input() hasAdvancedFilters	It indicates if you use advanced filters that must be hidden to show them later by means of the button more filters.
class jam-filter-header	Indicates the header section for filters or other options that will always be visible
class jam-filter-content	Indicates the content section for filters or other options that may or may not be visible

The jam-filter-header and jam-filter-content classes that have the ng-container tags are mandatory, but you don't need to define them in your css. These are so that the jamFloatingFilter component can correctly locate the header and the content of the filters.

JamFloatingFilters makes special use of this advantage if [hasAdvancedFilters]="false"

Simple floating filters

<jam-floating-filter [hasAdvancedFilters]="false">
    <ng-container class="jam-filter-header">
        your code...
    </ng-container>
</jam-floating-filter>

Complete floating filters

<jam-floating-filter>
    <ng-container class="jam-filter-header">
        your code...
    </ng-container>
    <ng-container class="jam-filter-content">
        your code...
    </ng-container>
</jam-floating-filter>

JamAvoidDisabledStyle

This directive allows disabling a matExpansionPanel to continue using the contents of the matExpansionPanelHeader in a normal way. This is essential for example so that a matExpansionPanel remains completely closed, and buttons can be used in the matExpansionPanelHeader without these appearing disabled.

<mat-expansion-panel-header jamAvoidDisabledStyle>
    your code...
</mat-expansion-panel-header>