angular how get param from url

Question

i want to develop a single page with angular with the url http://localhost:4200/popup/{param}

i will expose this page to my client,for example the client has a button on his app (the app of the client is not an angular app), when he clicks on it, it opens the page with the url http://host/popup/44444444 (the 44444444 is a dynamic param it changes when the client clicks on the button)

so the problem is, how can i get the param in my app ?

i changed the base href <base href="/popup" />, so the default url changed to http://localhost:4200/popup/

when i tried to add manually the param in the url i get this error

Cannot match any routes. URL Segment: '4444444444'

export const routes: Routes = [
  {
      path: '',
      redirectTo: 'popup/:requestNumber',
      pathMatch: 'full',
  },
  {
      path: 'popup/:requestNumber',
      component: AppComponent
  },
];

How does the specific route in your RoutingModule look like? — Adrian, Aug 28 '22 at 09:43

score 0 · Answer 1 · edited Aug 28 '22 at 18:06

You can get url params using ActivatedRoute interface

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';

@Component({
  selector: 'app-lesson-overview',
  templateUrl: './component.component.html',
  styleUrls: ['./component.component.scss'],
})
export class Component implements OnInit {
  paramValue: string
  constructor(
    private activatedRoute: ActivatedRoute
  ) {
   paramValue  = "";
  }

  ngOnInit(): void {
   paramValue = this.activatedRoute.snapshot.paramMap.get('paramName'))
  }
}

In a Single Page App instead of using href you should use routerLink. To be able to use the routerLink in your HTML as a directive you should import RouterModule in the AppModule

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouterModule } from '@angular/router';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent,
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    RouterModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Now you can use it like this <base routerlink="/popup" /> There is also the routerLinkActive that applies a css style to the active link <base routerlink="/popup" routerLinkActive="active" /> where active is a css class.

For more info about why you should use routerlink instead of href you can check this thread

thanks for the answer, but the app of the client is not an angular app to use `routerLink` — Aymen Kanzari, Aug 28 '22 at 10:12

score 0 · Answer 2 · answered Aug 28 '22 at 10:14

0

constructor(private activatedRoute: ActivatedRoute)

ngOnInit(): void {
   const requestNumber = this.activatedRoute.snapshot.paramMap.get('requestNumber'))
}

answered Aug 28 '22 at 10:14

Mojtaba Nejad Poor Esmaeili

700
1
6
12

5

Please don't post only code as answer, but also provide an explanation what your code does and how it solves the problem of the question. Answers with an explanation are usually more helpful and of better quality, and are more likely to attract upvotes. – Mark Rotteveel Aug 28 '22 at 11:40

score 0 · Answer 3 · answered Aug 28 '22 at 10:24

Simply remove popup from the routes. You don't need to specify that since is defined in the base. I guess you don't need the redirect to popup because this is done by default since you change the base.

export const routes: Routes = [
  {
      path: ':requestNumber',
      component: AppComponent
  },
];

Try with this. After that you could retrieve that url param with the ActivatedRoute service.

angular how get param from url

3 Answers3