Cacher is the code snippet organizer for pro developers

<div class="row">

    <form [formGroup]="filter_form" (ngSubmit)="filter(filter_form)" class="vg-search-form" >

        <div class="col-xs-12 col-sm-12 col-md-6 col-lg-4 col-xl-3 pull-left">

            <div class="form-group">
                <div class="input-group">
                    <span class="input-group-addon"><i class="vg vg-search-l vg-2x"></i></span>
                    <input type="text" formControlName="search" class="form-control" placeholder="Type to filter by text" >
                </div>
            </div>

        </div>

        <div class="col-xs-12 col-sm-12 col-md-6 col-lg-4 col-xl-3 pull-left">

            <div class="form-group" >
                <div class="input-group">
                    <select formControlName="activity_type_id" class="form-control">
                        <option value="">Select Activity</option>
                        <option value="{{ activity.id }}" *ngFor="let activity of state.activities" >{{ activity.title }}</option>
                    </select>
                </div>
            </div>

        </div>

    </form>

</div>

<table>
  
</table>

<ng-container >
    <pagination
        [maxSize]="5"
        [(ngModel)]="page"
        [totalItems]="paginateMeta?.total"
        [itemsPerPage]="paginateMeta?.per_page"
        (pageChanged)="pageChange($event.page)"
    ></pagination>
</ng-container>

import { Subject } from 'rxjs';
import { Component, OnInit } from '@angular/core';
import { IPaginate } from 'App/_shared/interfaces/paginate.interface';
import { ActivatedRoute, Params, Router } from '@angular/router';
import { ComplianceMattersService } from 'App/msc-compliance/services/compliance-matters.service';
import { FormBuilder, FormGroup } from '@angular/forms';

@Component({
    templateUrl: './compliance-matter-list.component.html',
})
export class ComplianceMatterListComponent implements OnInit {

    page: number = 1;
    limit: number = 50;
    paginateMeta: IPaginate = null;

    filter_form: FormGroup;

    state = {
        compliance_matters: [],
        activities: [
            {title: 'Exemption Of Relocation', id: 1},
            {title: 'Reduction Of Office Space', id: 2},
            {title: 'Extension Of Relocation', id: 3},
            {title: 'MSC Surrendering', id: 4},
        ]
    };

    meta = {
        isLoading: false,
        isLoadingError: false,
    };

    constructor(
        private route: ActivatedRoute,
        private router: Router,
        private fb: FormBuilder,
        private complianceMatterService: ComplianceMattersService,
    ) {

    }

    ngOnInit(): void {

        this.filter_form = this.fb.group({
            search: [''],
            activity_type_id: [''],
        });

        this.route.queryParams
            .subscribe(params => {

                const api_params = {...params, limit: this.limit};

                this.complianceMatterService.getComplianceMatters(api_params).subscribe(
                    res => {
                        this.state.compliance_matters = res.data;

                        this.paginateMeta = res.meta;
                    }
                );
            });

    }

    filter(form: FormGroup) {

        const search = form.value.search;
        const activity_type_id = form.value.activity_type_id;

        // change route parameter

        const queryParams = {...this.route.snapshot.queryParams};

        // set the query params value

        queryParams['search'] = search;
        queryParams['activity_type_id'] = activity_type_id;

        this.router.navigate(
            [],
            {
                relativeTo: this.route,
                queryParams: queryParams
            });
    }

    pageChange(page: number): void {

        // change route parameter

        const queryParams = {...this.route.snapshot.queryParams};

        // set the filter query params

        queryParams['page'] = page;

        this.router.navigate(
            [],
            {
                relativeTo: this.route,
                queryParams: queryParams
            });
    }
}