Validate Angular URLs to meet specific format

Is there a way to validate the format of my URL? The URL in question looks like this:

www.example.com?rt=12365

I need to make sure that the URL follows this specific pattern:

?rt= number

If it does, then I want to perform a certain action. Currently, I am using the router as shown in the code below:

const queryParams = router.url

However, I am unsure of how to actually validate the format. Any guidance would be greatly appreciated since I am new to working with typescript and angular.

angulartypescripturlangular-router

Answer №1

Give this a shot 

 constructor(private route: ActivatedRoute) {

 }

 if (this.route.snapshot.queryParams['rt']) {
      if ( !isNaN(this.route.snapshot.queryParams['rt']) && angular.isNumber(this.route.snapshot.queryParams['rt'])) 
       {
         }
 }

Wishing you find it helpful

Answer №2

If you want to extract query parameters, you can utilize the queryParams property.

constructor(private route: ActivatedRoute) {

}
ngOnInit() {
    this.route.queryParams.subscribe(params => {
        console.log(params.rt);
        if(!isNaN(params.rt)){
            console.log("Matching URL found");
        }else{
            console.log("No Matching URL found");
        }
    });
}

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

Strange data being received by Angular from ASP.NET API

I'm encountering some trouble with my ASP.NET API communicating with Angular, and I'm unsure of the root cause. I'm seeking assistance in reviewing my code for any glaring errors. Here is a snippet from my API Controller: // Data Structure ...

c#asp.netangular

How can I utilize a CDN for JavaScript libraries in Gulp?

As a newcomer to AngularJS and Gulp, I recently encountered an example where certain libraries are copied by Gulp from the 'node_modules' folder into a 'js/lib/angular2' directory: gulp.task('libs', function() { return gulp. ...

javascriptangulargulp

Angular2 material dropdown menu

Currently, I am studying angular2 with its material design. One of the modules I am using is md-select for material and here is a snippet of my code: <md-select> <md-option value="1">1</md-option> <md-option value="2">2< ...

cssangularangular-material

Is it possible to use a type predicate to return `void` from a function?

When creating data validation APIs, I have a common approach where I include two functions - one that returns a boolean value and another that throws an error. The throwing function typically has a void return type. interface MyType { numberField: num ...

typescript

How come I'm seeing an extra addition being added to the string after I override it?

My objective is to call a function in a service from a component that will provide me with a string array. The first time I receive an array, everything seems fine. For example: http://localhost:4200/assets/images/hardwoods/american_white_oak.png However ...

angularduplicates

How to Lazy Load a Standalone Component with Parameters in Angular 17?

This is my HTML code snippet: <a class="dropdown-item" [routerLink]="['/videos', p.param]">{{ p.title }}</a> Below is the code in app.route.ts file: { path: 'videos/:folder', loadComponent: () =& ...

angularangular-routerlinkangular-standalone-components

Creating HTML code using an array of objects

My goal is to create HTML tags based on the object response shown below: "view": [{ "type": 'text', "depth": 0, "text": "This is a sample text" }] The objective here is to iterate through each type and add the corresponding HTML tags. &l ...

angular

Strategies for obtaining newly updated data with every request and implementing a no-cache approach in Apollo GraphQL and Angular

Every time a request is made, we need a fresh value, like a unique nonce. However, I am facing issues while trying to achieve this with Apollo's Angular client. My initial solution was to utilize watchQuery with the no-cache strategy: this.apollo.wat ...

javascriptangulargraphqlapolloapollo-client

Asynchronously download static images with the power of NextJS and TypeScript integration

I have a query regarding my website development using NextJS and TypeScript. The site features a showcase gallery and is completely static. Currently, the initial view shows thumbnails of images. When clicking on a thumbnail, the original image is display ...

typescriptimageasynchronousnext.jsshowcaseview

The process of invoking the parent class's Symbol.iterator function from the child class's Symbol.iterator can be achieved by following a specific

I have two TypeScript classes defined below. class BaseIter { constructor(public a: number, public b: number, public c: number, public d: number){} *[Symbol.iterator](): Iterator<number> { yield this.a yield this.b yield this.c y ...

node.jstypescript

Is there a built-in feature in npm or yarn that automatically installs @types when they are present in Typescript projects?

Is there a feature in npm or yarn that automatically installs @types/* for packages without their own types, in Typescript projects? For example: //package.json { // ... "installTypes": true } // installing package yarn add ABC <- will install A ...

typescriptnpmyarnpkg

programmatically convert a solid link to a specific node into a dashed one using d3

Graph Type Radial Tidy Tree Current Output Initially, I receive a JSON response from the server and use recursion to flatten the JSON. I then utilize d3.tree to visualize the graph displayed below. The Legislation node is designed so that upon double-cl ...

angulartypescriptd3.jssvg

The value of the filename property cannot be determined as it is undefined

Hey everyone, I'm currently working on a project using nestjs and reactjs. I encountered an error when trying to add a document that reads: "Cannot read properties of undefined (reading 'filename') in multer.config.ts" import { diskStorag ...

typescriptnestjs

Angular 12 project with a cutting-edge framework for user interface

Looking to start a new project using Angular 12 and in need of advice on selecting the right UI framework. The options we are considering are Bootstrap 5, Angular Material, and PrimeNG. After conducting some research: Bootstrap 5 is beginner-friendly and ...

angularangular-materialangular-cliprimengbootstrap-5

"Launching" conduit for Observable

Is there a way to attach two pipes to an HttpClient request in order to execute functions at the beginning and end of the request? I have discovered the "finalize" operator for executing a function when the request is finished, but I am looking for an equi ...

angulartypescriptrxjs

Ngrx reducer is failing to trigger even when the state is accurately configured

I am working with a basic state structure: { items: Item[] selectedItems: string[] } In my application, I have a list of items with checkboxes. When I select an item, the list state is updated to include that item in the selected items array. However, ...

angulartypescriptngrx

Error in Angular production build due to Clean CSS failure

Encountering the following error during the code build process, any solutions? > ng build --prod --no-aot --base-href 92% chunk asset optimizationD:\myproject\node_modules\@angular\cli\node_modules\clean-css\lib&bsol ...

angularangular-cliclean-css

Discovering the steps to showcase _app.tsx within next.js 13 through module federation

I am faced with a situation where I have two Next.js 13 projects: Homepage and Admin Panel. My goal is to showcase the entire Admin Panel (specifically _app.tsx) and embed it within Homepage. To achieve this, I have set up both projects utilizing @module-f ...

typescriptwebpacknext.jswebpack-module-federationmodule-federationnextjs-mfutils

Tips for merging individual Koa-Routers using Typescript

My approach to organizing routers in my project involved categorizing them based on their purpose. Here's how they are structured: routers/homeRouter.ts import * as Router from 'koa-router'; const router: Router = new Router(); router ...

typescriptexportkoakoa-routercode-separation

How do I inform Jest that spaces should be recognized as spaces?

Here is some code snippet for you to ponder: import { getLocale } from './locale'; export const euro = (priceData: number): string => { const priceFormatter = new Intl.NumberFormat(getLocale(), { style: 'currency', currenc ...

node.jstypescriptjestjscurrencynumber-formatting