How to configure route parameter on Angular application root URL

Question

Seems simple enough... my app.module looks like this:

const appRoutes: Routes = [
  { path: '', component: AppComponent },
  { path: ':config', component: AppComponent }
];


@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    RouterModule.forRoot(appRoutes)
  ],
  providers: [],
  bootstrap: [AppComponent]
})

and the app.component code looks like this:

constructor(private route: ActivatedRoute) {

  }

  config: string;

  ngOnInit() {
    this.config = this.route.snapshot.params['config'];
  }

I want to be able to do something like hit http://localhost:4200/english and have the config property set to 'english'... but this.route.snapshot.params['config'] is undefined every time.

Any help appreciated.

try this.route.params.subscribe(params => { this.config =params['config']}) — jitender
– jitender, Commented Dec 6, 2018 at 4:07

KShewengger · Accepted Answer · 2018-12-06 04:39:16Z

1

There's actually nothin wrong of how you extract the params on your ngOnInit() but there's something wrong of how you missed to place your router-outlet (my assumption).

AppComponent

AppComponent is the root (router-outlet) that will handle all of your child routes.

If you are fetching your route parameter and your AppComponent's Template is just a Plain HTML without the <router-outlet> then your this.route.snapshot.params['config']; will become undefined

@Component({
  selector: 'app-root',
  template: `I am AppComponent`        // Plain Template without <router-outlet>
})
export class AppComponent {...}

But if you will place the <router-outlet> on your AppComponent's Template, then your this.route.snapshot.params['config']; will have a value, if the passed config parameter is '/english' then its snapshot param value is 'english'

@Component({
  selector: 'app-root',
  template: `
     <h1>{{ config }}</h1>
     <router-outlet></router-outlet>     // Add router-outlet
  `        
})
export class AppComponent implements OnInit {

    config: string;

    constructor(private route: ActivatedRoute) {}

    ngOnInit() {
       this.config = this.route.snapshot.params['config'];    // 'english' if the url has a supplied param of /english 
    }

}

Had created Stackblitz Demo for your reference in regards to your concern

Demo Output

edited Dec 6, 2018 at 4:39

answered Dec 6, 2018 at 4:28

KShewengger

8,3293 gold badges27 silver badges38 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

Ivan Pelly Over a year ago

Many thanks for that! I noticed one subtlety in my own code... I use a templateURL rather than a template, and in the corresponding template html file, it seems to matter where you put the router outlet. If I put the router outlet at the top, things work as expected. If I put it after the reference to the variable it should be setting ('config', in this case), it doesn't work. Thanks again!

KShewengger Over a year ago

Hi @IvanPelly, your welcome. If my answer helps you with your concern. Mind if you'll mark it as an accepted answer? That would be a great help. Thank you very much.

Ivan Pelly Over a year ago

Hi @KShewengger - thanks again! I played with the Stackblitz demo a little more, and, unless I'm misunderstanding it, I'm no longer 100% convinced that it's correct. In the demo, I did the following: 1) remove all the markup from app.component.html (not needed), 2) type 'hello' on the line before <router-outlet> in app.component.ts 3) append '/test' to the URL in the righthand pane. When the test page loads, 'Hello' is repeated twice. I bet it's got something to do with the component being its own router outlet, but I haven't quite figured out what would make it work yet.

Alok Over a year ago

hello when i use templateUrl, i am getting duplicate response.. were you able to solve it

KShewengger Over a year ago

Hi, to avoid having duplicate response on the custom template you have assigned inside the AppComponent along with router-outlet, we must separate it on another component or url since the duplicate is triggered since we have made the "AppComponent" as our main component which we have configured to be put inside the "bootstrap" config in our AppModule NgModule "bootstrap: [AppComponent ]". Unlike other components that are not bootstrapped, it will not duplicate your response.

|

Collectives™ on Stack Overflow

How to configure route parameter on Angular application root URL

1 Answer 1

8 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Your Answer

Sign up or log in

Post as a guest

Related