Angular /Routes/Query Parameters/

Дали разбираться с приложением на последнем Angular. Возникла проблема с роутингом. Не понимаю каким образом работать c queryParams. Суть в том что на главной странице, есть панель фильтров. Хотелось бы чтоб при фильтровании, значение фильтров было в url(к примеру, если я хочу дать юзеру ссылку на отфильтрованный товар). Как в angular7 передать значение фильтров в url?

App Routing Modules

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { MainPageComponent } from './main-page/main-page.component';
import { DetailsEventPageComponent } from './details-event-page/details-event-page.component';
const routes: Routes = [
  { path: 'event-page', component: MainPageComponent},
  { path: 'event-page/:id', component: DetailsEventPageComponent}
];
@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

Angular Компонент

import { Component, ViewEncapsulation, OnInit } from '@angular/core';
import { DataService } from '../app-services/data.service';
import { LocationModel } from '../app-models/LocationModel';
import { EventTypeModel } from '../app-models/EventTypeModel';
import { EventModel } from '../app-models/EventModel';
import { FilterModel } from '../app-models/FilterModel';
import { DateFilterModel } from '../app-models/DateFilterModel'; 

@Component({
  selector: 'app-main-page',
  templateUrl: './main-page.component.html',
  styleUrls: ['./main-page.component.less'],
  providers: [DataService],
  encapsulation: ViewEncapsulation.None
})
export class MainPageComponent implements OnInit {    
  events: EventModel[];
  locationItems: LocationModel[] = [];
  locationsSelected: LocationModel[] = [];
  typeItems: EventTypeModel[] = [];
  typesSelected: EventTypeModel[] = [];
  filter: FilterModel;
  totalPages: number;
  urlImageHeader: string;
  constructor(private dataService: DataService) {
    this.prepareDateFilterButtons();
    this.filter = {
      pageNumber: 1,
      locations: null,
      types: null
    };
  }
  ngOnInit() {
    this.loadEvents();
    this.dataService.getLocations().subscribe(data => {
      if (data) {
        this.locationItems = data;
      }
    });
    this.dataService.getTypes().subscribe(data => {
      if (data) {
        this.typeItems = data;
      }
    });
    this.dataService.getUrlImageHeader().subscribe(data => {
      this.urlImageHeader = data;
    });
  }
  onCloseMultiselect(itemsSelected, nameMultiselect) {
    switch (nameMultiselect) {
      case 'Location':
        this.filter.locations = itemsSelected;
        break;
      case 'Type':
        this.filter.types = itemsSelected;
        break;
    }
    this.loadEvents();
  }
  loadEvents() {
    this.dataService.getEvents(this.filter).subscribe(data => {
      if (data) {
        this.events = data.events;
        this.totalPages = data.totalPages;
      }
    });
  }
}

то как я непосредственно фильтрую: html разметка:

<div class="filter-multiselect">
  <p-multiSelect [options]="items"
                 [(ngModel)]="itemsSelected"
                 styleClass="multiSelect"
                 [defaultLabel]="labelComponent"
                 (onPanelShow)="handlePanelShow()"
                 (onPanelHide)="handlePanelHide()"
                 (onChange)="filtersApply()"
                 panelStyleClass="panelStyleClassCustom"
                 [ngClass]="isOpen ? 'multi-select-open' : '' "
    [maxSelectedLabels]="0">
    <ng-template let-element let-i="index" pTemplate="item">
      <div class="ui-multiselect-item-text">{{element.label}}</div>
    </ng-template>
  </p-multiSelect>
</div>

сам компонент:

import { Component, OnInit, ViewEncapsulation, Input, ElementRef, EventEmitter, Output } from '@angular/core';
import { MultiselectBaseModel } from '../app-models/MultiselectBaseModel';
@Component({
  selector: 'app-filter-multiselect',
  templateUrl: './filter-multiselect.component.html',
  styleUrls: ['./filter-multiselect.component.less'],
  encapsulation: ViewEncapsulation.None
})
export class FilterMultiselectComponent implements OnInit {
  @Input() labelComponent: string;
  @Input() items: MultiselectBaseModel[];
  @Input() itemsSelected: MultiselectBaseModel[];
  @Output() closeMultiselectEventHandler: EventEmitter<any> = new EventEmitter();
  isOpen = false;
  constructor(public el: ElementRef) { }
  ngOnInit() {}
  handlePanelShow() {
    this.isOpen = true;
  }
  handlePanelHide() {
    this.isOpen = false;
  }
  filtersApply() {
    this.closeMultiselectEventHandler.emit(this.itemsSelected);
  }
  handleClickMultiSelect(event) {
  }
}