Angular Routing: Passing dynamic url data to components

Question

I have the following routes:

const routes: Routes = [
    {
        path: ':product/new',
        children: [{
            path: 'std/:country',
            component: SignUpComponent,
            data: {
                animation: 'animate',
                segment: 'std',
                country: ':country'
            }
        }, {
            path: 'exp/:country',
            component: PaymentComponent,
            data: {
                animation: 'animate',
                segment: 'exp'
            }
        }
    }
]

Is country: ':country' the right way of passing dynamic url data to the SignUpComponent? If yes, How can I consume this data in my SignUpComponent Component?

Michael Desigaud · Accepted Answer · 2019-11-13 11:40:25Z

1

You do not need the country property in the data object. The country info in the url should be enough.

To retrieve the country parameter from the route :

class  SignUpComponent implements OnInit {
  constructor(private activatedRoute: ActivatedRoute) {}
  ngOnInit() {
    this.activatedRoute.params.subscribe((params) => {
        // params.country should be defined here    
    });
 }
}

answered Nov 13, 2019 at 11:40

Michael Desigaud

2,1451 gold badge15 silver badges16 bronze badges

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

Comments

Adrita Sharma · Accepted Answer · 2019-11-13 11:45:35Z

1

Try like this:

WORKING DEMO // click on Home

import { ActivatedRoute } from '@angular/router';

constructor(private route: ActivatedRoute) {
  alert(route.snapshot["data"].country)
}

answered Nov 13, 2019 at 11:45

Adrita Sharma

22.3k11 gold badges75 silver badges85 bronze badges

Comments

dasunse · Accepted Answer · 2019-11-13 12:09:13Z

1

You do not need to pass this way country: ':country'. By using this way you can read path variables

import {  ActivatedRoute } from '@angular/router';

constructor(private route: ActivatedRoute) {
  alert(route.snapshot["data"].country)
}

answered Nov 13, 2019 at 12:09

dasunse

3,1791 gold badge17 silver badges33 bronze badges

Comments

Athanasios Kataras · Accepted Answer · 2019-11-13 11:40:16Z

0

In your constructor

public constructor(private route:ActivatedRoute, private router:Router) {
      console.log(route.snapshot.data['country']);
  }

Or you can use the following as per documentation from the router outlet (check here)

export class AppComponent {
  getCountryData(outlet: RouterOutlet) {
    return outlet && outlet.activatedRouteData && outlet.activatedRouteData['country'];
  }
}

answered Nov 13, 2019 at 11:40

Athanasios Kataras

26.7k6 gold badges40 silver badges67 bronze badges

Collectives™ on Stack Overflow

Angular Routing: Passing dynamic url data to components

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related