import { Component , OnDestroy } from '@angular/core' ; import { Subject } from 'rxjs' ; import { takeUntil } from 'rxjs/operators' ; import { QueryParamBuilder , QueryParam , QueryParamGroup } from '@ngqp/core' ; declare const require ; @ Component ( { selector : 'demo-manual-wiring-example' , templateUrl : './manual-wiring-example.component.html' , } ) export class ManualWiringExampleComponent implements OnDestroy { public paramGroup : QueryParamGroup ; public currentPage = 1 ; public markup = require ( '!raw-loader!./manual-wiring-example.component.html' ) . default ; public typescript = require ( '!raw-loader!./manual-wiring-example.component.ts' ) . default ; private componentDestroyed$ = new Subject < void > ( ) ; constructor ( private qpb ) { this . paramGroup = qpb . group ( { page : qpb . numberParam ( 'page' , { emptyOn : 1 , } ) , } ) ; this . pageParam . valueChanges . pipe ( takeUntil ( this . componentDestroyed$ ) ) . subscribe ( page => this . currentPage = page ) ; } public get pageParam ( ) : QueryParam < number > { return this . paramGroup . get ( 'page' ) as QueryParam < number > ; } public onPageChange ( page ) { this . pageParam . setValue ( page ) ; } public ngOnDestroy ( ) { this . componentDestroyed$ . next ( ) ; this . componentDestroyed$ . complete ( ) ; } }