I want to display the filter section on button click in mobile view in angular

Issue

I want to display the filter section on button click in mobile view in angular. I want the filter button to get visible in mobile view and remain hidden in larger screens. On filter button click, filter section should be visible for mobile view (otherwise it should remain visible for the larger screen).

I added the media queries for displaying the filter button according to screen size: CSS:

    /* Add styles for mobile view */
    @media screen and (max-width: 480px) {
        .filter-section {
            display: none; /* Hide filter section on mobile */
        }
    }

    /* Add styles for larger screens */
    @media screen and (min-width: 480px) {
        .filter-section {
            display: block !important; /* Show filter section on larger screens */
        }
        .filter_btn {
            display: none;
        }
    }

It's working fine but now i want to display the filter section on button click.

HTML:

    <p-button class="nav-link ms-auto filter_btn" (click)="toggleFilter()" icon="pi pi-filter-fill"      [raised]="true" icon="pi pi-filter-fill" [raised]="true"
    severity="danger"></p-button>

    <!-- Filter Products -->
    <div class="col-xs-6 col-md-4 filter-section">
        <div class="card filter_card">
            <div class="row">
                <div class="col-md-6">
                    <h6>Gender</h6>
                    <p-checkbox value="men" label="Men"
                        (onChange)="checkBoxFilter('gender', 'men', $event)"></p-checkbox>
                    <p-checkbox value="women" label="Women"
                        (onChange)="checkBoxFilter('gender', 'women', $event)"></p-checkbox>
                </div> <br>
            </div> <br>
            <button type="button" class="btn btn-info" `(click)="applyFilters()"`>Apply Filters</button>
        </div>
    </div>

Solution

For that you need to add class on click of button

// Inside your component
isFilterVisible = false;

toggleFilter() {
  this.isFilterVisible = !this.isFilterVisible;
}

Add ngClass to add and remove class based on click.

<p-button class="nav-link ms-auto filter_btn" (click)="toggleFilter()" icon="pi pi-filter-fill"      [raised]="true" icon="pi pi-filter-fill" [raised]="true"
severity="danger"></p-button>

<!-- Filter Products -->
<div class="col-xs-6 col-md-4 filter-section" [ngClass]="{'show-filter': isFilterVisible}">
    <div class="card filter_card">
        <div class="row">
            <div class="col-md-6">
                <h6>Gender</h6>
                <p-checkbox value="men" label="Men"
                    (onChange)="checkBoxFilter('gender', 'men', $event)"></p-checkbox>
                <p-checkbox value="women" label="Women"
                    (onChange)="checkBoxFilter('gender', 'women', $event)"></p-checkbox>
            </div> <br>
        </div> <br>
        <button type="button" class="btn btn-info" `(click)="applyFilters()"`>Apply Filters</button>
    </div>
</div>

And update css with new class

/* Add styles for mobile view */
@media screen and (max-width: 480px) {
    .filter-section {
        display: none; /* Hide filter section by default on mobile */
    }
    .filter-section.show-filter {
        display: block; /* Show filter section when show-filter class is applied */
    }
}

/* Add styles for larger screens */
@media screen and (min-width: 480px) {
    .filter-section {
        display: block !important; /* Show filter section on larger screens */
    }
    .filter_btn {
        display: none;
    }
}

Answered By - Jignesh Panchal