@angular/router#Params TypeScript Examples

public async navigateToBridgeOrCrossChain(type: 'bridge' | 'cross-chain'): Promise<void> {
    const params = {
      fromBlockchain: BLOCKCHAIN_NAME.ETHEREUM,
      toBlockchain: BLOCKCHAIN_NAME.BINANCE_SMART_CHAIN,
      fromToken: null,
      toToken: null,
      fromAmount: null
    } as SwapFormInput;

    const queryParams: Params = {
      fromChain: BLOCKCHAIN_NAME.ETHEREUM,
      toChain: BLOCKCHAIN_NAME.BINANCE_SMART_CHAIN,
      amount: undefined,
      from: undefined,
      to: undefined
    };

    if (type === 'bridge') {
      this.swapsService.swapMode = SWAP_PROVIDER_TYPE.BRIDGE;
      queryParams.amount = 1000;
      queryParams.from = 'RBC';
      queryParams.to = 'BRBC';

      params.fromToken = this.tokensService.tokens.find(token => token.symbol === 'RBC');
      params.toToken = this.tokensService.tokens.find(token => token.symbol === 'BRBC');
      params.fromAmount = new BigNumber(1000);
    } else {
      this.swapsService.swapMode = SWAP_PROVIDER_TYPE.CROSS_CHAIN_ROUTING;
    }

    this.swapFormService.input.patchValue(params);
    this.gtmService.reloadGtmSession();
    await this.router.navigate(['/'], { queryParams, queryParamsHandling: 'merge' });
  }

onTaskClicked() {
    const queryParams: Params = { state: 'tasks' };
    this.router.navigate(['/', 'enterprise', 'my_dashboard'], {
      queryParams,
    });
    this.trackingService.tasksPageOpened({
      Asset: 'Mobile',
      from: 'Team Advances',
    });
  }

export function routeParamsToState(filters: Params): SearchFilters {
  return Object.keys(filters).reduce(
    (state, key) => ({
      ...state,
      [ROUTE_PARAMS_MAPPING[key]]:
        ROUTE_PARAMS_MAPPING[key] === 'any'
          ? filters[key]
          : { [filters[key]]: true },
    }),
    {}
  )
}

onTaskClicked() {
    const queryParams: Params = { state: 'tasks', tasksFilters: 'advances' };
    this.router.navigate(['/', 'enterprise', 'my_dashboard'], {
      queryParams,
    });
    this.trackingService.tasksPageOpened({
      Asset: 'Mobile',
      from: 'My Advances',
    });
  }

export function stateToRouteParams(filters: SearchFilters): Params {
  return Object.keys(filters).reduce(
    (state, key) => ({
      ...state,
      [Object.keys(ROUTE_PARAMS_MAPPING).find(
        (k) => ROUTE_PARAMS_MAPPING[k] === key
      )]: key === 'any' ? filters[key] : Object.keys(filters[key])[0],
    }),
    {}
  )
}

goToExpensesPage(state: string) {
    if (state === 'COMPLETE') {
      const queryParams: Params = { filters: JSON.stringify({ state: ['READY_TO_REPORT'] }) };
      this.router.navigate(['/', 'enterprise', 'my_expenses'], {
        queryParams,
      });

      this.trackingService.dashboardOnUnreportedExpensesClick();
    } else {
      const queryParams: Params = { filters: JSON.stringify({ state: ['DRAFT'] }) };
      this.router.navigate(['/', 'enterprise', 'my_expenses'], {
        queryParams,
      });

      this.trackingService.dashboardOnIncompleteExpensesClick();
    }
  }

ngOnInit(): void {
    // Keeps state in sync with route changes
    this.queryParams$ = this.route.queryParams
      .subscribe((params: Params) => {
        this.selectedOfferHash = params.offerHash
        console.debug('queryParams set selectedOfferHash', this.selectedOfferHash)
      })
    this.form = this.formBuilder.group({
      message: [''],
      peer: ['', [Validators.required, regexValidator(TOR_V3_ADDRESS)]],
      offerTLV: ['', [Validators.required, regexValidator(UPPERLOWER_CASE_HEX)]],
    })
  }

openImportDialog() {
    const importDialog = this.dialog.open(ImportDialogComponent, {
      data: { importUrl: this.importUrl },
      width: '800px'
    })
    importDialog.componentInstance.onImport.pipe(takeUntil(this.unSubscribe$)).subscribe((importUrl) => {
      this.store.dispatch(GlobalAppConfigurationActions.OnImportMode())
      this.importUrl = importUrl
      const queryParams: Params = { import_url: importUrl }
      this.router.navigate(
        ['/'],
        {
          relativeTo: this.activatedRoute,
          queryParams: queryParams,
          queryParamsHandling: 'merge', // remove to replace all query params by provided
        })
      !this.activatedRoute.snapshot.params['uuid'] ? this.codeRefresh() : ''
      this.eventEmitterService.broadcast('initialize:node', {})
    })
  }

ngOnInit(): void {
    this.store.select(fromRoot.getCustomerSearchResults).subscribe(customerData => this.setCustomerData(customerData));
    this.store.select(fromRoot.getCustomerSearchLoading).subscribe(loading => (this.loading = loading));
    this.route.queryParams.subscribe((params: Params) => {
      this.searchTerm = params['term'];
      this.fetchCustomers();
    });

    this.source.onChanged().subscribe(change => {
      if (change.action === 'sort') {
        const sortField = change.sort[0].field;
        const sortDirection = change.sort[0].direction;
        this.sortChanged(sortDirection, sortField);
      }
    });

    /** Search event  */
    this.searchService.onSearchSubmit().subscribe((data: any) => {
      this.searchTerm = data.term;
      this.fetchCustomers();
    });
  }

constructor(
    private transactionService: TransactionService,
    private route: ActivatedRoute,
    private router: Router,
    private thorchainNetworkService: ThorchainNetworkService
  ) {
    this.limit = this.transactionService.limit;

    const network$ = this.thorchainNetworkService.networkUpdated$.subscribe(
      (_) => {
        const queryParams: Params = { offset: String(0) };

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

        this.transactions = null;
        this.getTransactions();
      }
    );

    this.subs = [network$];

  }

ngOnInit(): void {
    this.route.params.subscribe((params: Params) => {
      this.tokenId = parseInt(params['id'])
    })
    let timeout: NodeJS.Timeout
    this.colors$.subscribe((colors) => {
      if (timeout) {
        clearTimeout(timeout)
      }
      timeout = setTimeout(() => {
        let color = colors.find((c) => c.token_id === this.tokenId)
        if (color && !color.owner) {
          return
        }
        this.color = color
      }, 500) // TODO: Get rid of this delay. It looks like the last state is not always emitted?
    })
  }

search() {

    const isAddress = this.searchString.substr(0, 4) === 'tbnb'
      || this.searchString.substr(0, 3) === 'bnb'
      || this.searchString.substr(0, 4) === 'thor'
      || this.searchString.substr(0, 3) === 'tb1'
      || this.searchString.substr(0, 3) === 'bc1';

    const route = (isAddress)
      ? ['/', 'addresses', this.searchString]
      : ['/', 'txs'];

    const queryParams: Params = (isAddress)
      ? { offset: String(0) }
      : { offset: String(0), txid: this.searchString };

    this.router.navigate(
      route,
      {
        queryParams,
        queryParamsHandling: 'merge', // remove to replace all query params by provided
      }
    );

    this.searchString = '';
  }

ngOnInit(): void {
    this.route.queryParams.subscribe((params: Params) => {
      this.searchTerm = params['term'];
      this.fetchOffices();
    });
    this.store.select(fromRoot.getOfficeSearchLoading).subscribe(loading => (this.loading = loading));
    this.store.select(fromRoot.getOfficeSearchResults).subscribe(officesData => this.setOfficesData(officesData));

    this.source.onChanged().subscribe(change => {
      if (change.action === 'sort') {
        const sortField = change.sort[0].field;
        const sortDirection = change.sort[0].direction;
        this.sortChanged(sortDirection, sortField);
      }
    });

    /** Search event  */
    this.searchService.onSearchSubmit().subscribe((data: any) => {
      this.searchTerm = data.term;
      this.fetchOffices();
    });
  }

/** Set the paramMap observables's next value */
    public setParamMap(params: Params): void {
        this.subject.next(convertToParamMap(params));
    }

queryStringParams: Params = {};

public constructor(initialParams: Params) {
        this.setParamMap(initialParams);
    }

ngOnInit(): void {
    this.route.params.subscribe((params: Params) => {
      this.address = params['id']
      this.storeService.setSearchString(this.address)
    })
  }

onTaskClicked() {
    const queryParams: Params = { state: 'tasks', tasksFilters: 'team_reports' };
    this.router.navigate(['/', 'enterprise', 'my_dashboard'], {
      queryParams,
    });
  }

redirictParams: Params;

onHomeClicked() {
    const queryParams: Params = { state: 'home' };
    this.router.navigate(['/', 'enterprise', 'my_dashboard'], {
      queryParams,
    });
  }

/** Set the paramMap observables's next value */
  setParamMap(params?: Params) {
    this.subject.next(convertToParamMap(params));
  }

ngOnInit(): void {

    const queryParams$ = this.route.queryParamMap.subscribe( (params) => {

      const offset = params.get('offset');
      this.offset = offset ? +offset : 0;
      if (!offset) {

        const queryParams: Params = { offset: String(this.offset) };

        this.router.navigate(
          [],
          {
            relativeTo: this.route,
            queryParams,
            queryParamsHandling: 'merge', // remove to replace all query params by provided
          }
        );

      }

      const asset = params.get('asset');
      this.asset = asset ?? null;

      const address = params.get('address');
      this.address = address ?? null;

      const txid = params.get('txid');
      this.txid = txid ?? null;

      const type = params.get('type');
      if (!type) {
        this.selectedTypes = {
          [TransactionType.ADD]: true,
          [TransactionType.DOUBLE_SWAP]: true,
          [TransactionType.REFUND]: true,
          [TransactionType.STAKE]: true,
          [TransactionType.SWAP]: true,
          [TransactionType.UNSTAKE]: true,
        };
      } else {
        this.selectedTypes = this.setSelectedTypes(type);
      }

      this.getTransactions();


    });

    this.subs.push(queryParams$);

  }

public params$: Observable<Params>;

ngOnInit(): void {
    // Keeps state in sync with route changes
    this.queryParams$ = this.route.queryParams
      .subscribe((params: Params) => {
        this.selectedDLCId = params.dlcId
        // console.debug('queryParams set selectedDLCId', this.selectedDLCId)
      })
  }

onHomeClicked() {
    this.currentStateIndex = 0;
    const queryParams: Params = { state: 'home' };
    this.router.navigate([], {
      relativeTo: this.activatedRoute,
      queryParams,
    });
  }

ngOnInit() {

    this.activeTenant$
      .pipe(takeUntil(this.destroy$))
      .subscribe((tenant) => {
        if (tenant != null && tenant.tenantId != null) {
          this.store.dispatch([
            new SetPageSize(AssetEntityState, 50),
            new SetExpands(AssetEntityState, new Expand('Models')),
            new SetOrderBys(AssetEntityState, new SortOrder<Asset>('DateCreated', 'desc')),
            new SetFilter(AssetEntityState, 'Models/any(m:m/ProcessingStatus eq \'Completed\')')
          ]
          )
            .subscribe(() => this.store.dispatch(new GoToPage(AssetEntityState, { first: true })));
        }
      });

    this.route.queryParams
      .pipe(takeUntil(this.destroy$))
      .subscribe((p: Params) => {
        const assetIdStr = p.assetId;
        if (assetIdStr == null) {
          return;
        }
        const assetId = +assetIdStr;
        this.assets$.pipe(skipWhile(v => v == null || v.length === 0), take(1)).subscribe(assets => {
          const asset = assets.find(a => a.AssetId === assetId);
          if (asset != null) {
            this.setActive(asset);
          }
        });
      });

    // set current canvas
    const canvasContainer = document.getElementById('viewer_canvas') as HTMLElement;
    this.canvasId$
      .pipe(takeUntil(this.destroy$))
      .subscribe(canvasId => {
        if (canvasId != null) {
          canvasContainer.innerHTML = '';
          const canvas = this.canvasService.GetCanvas(canvasId);
          canvasContainer.appendChild(canvas);
        }
      });

    this.picked$
      .pipe(takeUntil(this.destroy$))
      .subscribe(pick => {
        if (pick === null || pick.length === 0) {
          return;
        }
        this.selected$.pipe(
          takeUntil(this.destroy$),
          take(1)).subscribe(selection => {
            if (selection == null || selection.length === 0) {
              this.store.dispatch(new AddEntityState(this.currentViewId, ViewerEntityState.HIGHLIGHTED, pick));

              return;
            }

            const unselect =
              pick.filter(p => selection.find(s =>
                s.entityId === p.entityId &&
                s.assetModel.assetModelId === p.assetModel.assetModelId) != null);
            const select =
              pick.filter(p => selection.find(s =>
                s.entityId !== p.entityId ||
                s.assetModel.assetModelId !== p.assetModel.assetModelId) != null);


            this.store.dispatch(new AddEntityState(this.currentViewId, ViewerEntityState.HIGHLIGHTED, select));
            this.store.dispatch(new RemoveEntityState(this.currentViewId, ViewerEntityState.HIGHLIGHTED, unselect));

          });
        this.store.dispatch(new SetDetailImage(this.currentViewId, 640, 360, pick));
      });

    this.detail$
      .pipe(takeUntil(this.destroy$))
      .subscribe(img => {
        const container = document.getElementById('detail-view');
        container.innerHTML = null;

        if (img != null) {
          img.height = 90;
          container.appendChild(img);
          this.showDetails = true;
        } else {
          this.showDetails = false;
        }
      });

    this.hoverOver$.pipe(takeUntil(this.destroy$))
      .subscribe(hov => {
        this.properties = hov;
      }, err => this.logger.error(err));

    this.actions$
      .pipe(
        takeUntil(this.destroy$),
        ofActionSuccessful(LoadModelsIntoView),
        tap(m => this.logger.debug('Setting default view', m))
      )
      .subscribe((action: LoadModelsIntoView) => {
        this.store.dispatch(new SetDefaultViewPoint(this.currentViewId, ViewType.DEFAULT));
      });

    this.activeAsset$
      .pipe(
        takeUntil(this.destroy$),
        distinctUntilChanged((a, b) => a && b && a.AssetId === b.AssetId)
      )
      .subscribe(asset => {
        if (asset) {
          this.load3DModel(asset);
        }
      });
  }