A guide to accessing route parameters in an Aurelia custom component

I'm currently developing a custom component within the aureliajs framework and I am injecting an instance of a Router:

@inject(Router)
export class Pagination {
    constructor(router) {
        this.router = router;
    }
}

This component will be utilized with list view-models to establish basic pagination. In order to achieve this, I need to extract the current page number from an active route which would resemble something like orders/:pageNum. My question is: how can I accomplish this? I understand that it should most likely be implemented in the Pagination attached method, but how do I access this :pageNum parameter?

Answer №1

Incorporate a bindable property into your custom element. Extract the page number from the current route and establish a binding to the custom element as shown below:

import { bindable } from 'aurelia-framework';

@inject(Router)
export class Pagination {

    @bindable page;

    constructor(router) {
        this.router = router;
    }
}

Example of Usage:

<pagination page.bind="page"></pagination>

To access the page number in the current route, utilize the activate() hook:

activate(params) {
   this.page = params.pageNum;
}

Answer №2

To access the current parameters, you can utilize router.activeInstruction.params and

router.activeInstruction.queryParams
.

If you want to receive updates when the route changes, you can set up a router observer like this:

const subscription = this.observerService.observeRouterChanges(
    this.router, 'activeInstruction').subscribe(activeInstruction => {

  console.log(activeInstruction);

});

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Set up the bs-timepicker to use Coordinated Universal Time (UTC

I'm having trouble initializing a timepicker using the code below (source: ). The issue is that it keeps initializing with local time instead of the time I specify. Can you help me identify what I might be doing wrong? html <input id="txtContrSta ...

Gatsby: Issue with Event Listeners persisting when using React useEffects hook

I'm currently utilizing Gatsby for my project. Within my code, I have implemented a useEffect() hook to manage Event Listeners on the document in order to track outside clicks and close specific menus. However, upon navigating to another route and at ...

What possible reasons could there be for my vue project failing to load the JavaScript file?

I encountered an issue with my login page and script.js file while setting up my project. Strangely, my Vue application is not loading the JavaScript file as expected. The console displays this error message: https://i.sstatic.net/QG0hL.png The error seem ...

Developing a personalized error message pop-up system in Electron

I am currently in the process of developing an application for file backup, which involves a lot of reading and writing to the filesystem. While most parts of the app are functioning well, I am facing some challenges with error handling. In the image belo ...

What is the best way to prevent users from entering a zero in the first position of a text box using JavaScript

Although I am aware this may be a duplicate issue, the existing solution does not seem to work for me. The field should accept values like: valid - 123,33.00, 100,897,99, 8000 10334 9800,564,88.36 invalid - 001, 0 ...

Tips for incorporating dynamic URLs in Next.js

In my current project using nextjs, I am dealing with fetching images via an API. Right now, I am receiving the "Full image path" (for example, "https://myurl.com/image/imagename.jpg") without any issue. However, I need to figure out how to fetch the image ...

Discover the best approach for invoking an ASP.NET function from JavaScript when dealing with non-static methods

I'm currently calling an asp.net function from JavaScript using the following code. However, I am trying to call a non-static method and when I remove the static field, the function does not fire. Is there any way to accomplish this? Thank you. publi ...

The Bootstrap tabs are not correctly displaying the content

Hey there, I'm currently working on a project that involves using bootstrap tabs (BS4) within a form. One of the requirements is to have forward and back buttons for form navigation, and I'd like to leverage BS4's tab('show') fun ...

Creating motion in recently added elements using varied keyframe settings

I'm currently working on a simple animation project. The goal is to create a circle that appears and moves upwards when you click inside the blue container. I managed to find out how to incorporate JavaScript values into keyframes, but the issue is th ...

The error message "this.props.navigation" is not defined and cannot be evaluated as an object

Recently, I encountered an issue with my navigation system. Within my application, there are 3 screens or components that I navigate between using react-navigation. The first screen prompts the user to enter their mobile phone number and password, which is ...

Sleek rendering for circular progress bar in JS/HTML

I'm in the process of refining the animation for a circular progress bar that I created using HTML canvas arc and JavaScript. The progress bar is generated using data extracted from an XML file (semic.cgx) which is constantly updated by a PLC. My pl ...

How can I change the "Return" button on the iOS keyboard to a "Next" button using jQuery or JavaScript?

Currently, I am developing an HTML application and working on implementing it for IOS devices such as the IPAD. Within my application, there are multiple text boxes. Whenever a user clicks on a text box to input text, the keypad appears. On this keypad, ...

Steps to Turn Off Automatic Loading in Jquery Ajax tabs

I've encountered an issue with auto-loading in jQuery Ajax tabs. It's causing my browser to hang up. I need to find a way to disable the auto-loading feature. Here's the scenario of what I need: On the first tab, it loads the following cate ...

How can Typescript and nodejs be utilized to develop an unconventional application that goes beyond the typical web or API functionalities?

Do you think it's acceptable to utilize nodejs and typescript for creating a service that is neither an API nor a web application? At the moment, I am developing a service that regularly reads email attachments, sends them to another app, saves inform ...

What is the optimal approach for importing node modules using var or const?

When it comes to requiring node modules like express or bodyParser, the commonly used keyword to create a variable and assign the module is var. However, is it possible to use const to declare such modules instead? In other words, instead of the following: ...

I encountered an issue while using WooCommerce where I needed the "color section" product attribute to be hidden or disabled when a customer clicked on "stock" in the product price. Unfortunately, I'm unsure of how

function hideStock(){ var selected = document.getElementById("stk"); var hidden = document.getElementById("pa_color"); if (selected.onchange=="stock") { hidden.style.display = "none"; } } <table class= ...

Which data types in JavaScript have a built-in toString() method?

Positives: 'world'.toString() // "world" const example = {} example.toString() // "[object Object]" Negatives: true.toString() // throws TypeError false.toString() // throws TypeError Do you know of any other data types that wi ...

Customize CSS to target the first and last elements in a row using flexbox styling

I am facing a challenge in selecting the last element of the first row and the first element of the last row within a flex container. The setup involves a flex-wrap: wrap; for my flex container where all elements have flex: auto; with different sizes. Thi ...

What's causing my React app's slideshow to malfunction?

Struggling with styling my React app after importing w3.css and attempting to create a slideshow with 3 images in the same directory as the component being rendered. As someone new to React and web development, I'm facing challenges in getting the des ...

AngularJS is not showing the dropdown options as expected

I am facing an issue where the dropdown list options are not displaying, even though I am able to fetch the data in the controller but not in HTML. Here is the code snippet: In HTML <select name="nameSelect" id="nameSelect" ng-model="model.name"> ...