Angular Routing: Passing dynamic url data to components

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?

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'];
  }
}

Angular Pass Data to Route: Dynamic/Static, The static data use the Angular route data property, where you can store arbitrary data associated with this specific route. For to pass dynamic data (or an object), we can make use of the history state object. The Routed Component can then retrieve the dynamic data from the history state object. @SantoshKadam the question is "How do I pass data to Angular routed components?" so passing data by ngOnDestroy and ngOnInit functions is a way, and always simple is the best. If user needs to get data after reload then there need to save data in a permanent storage and read again from that storage. – Utpal Kumar Das Sep 20 '19 at 7:10

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    
    });
 }
}

Angular Route Parameters: Passing Parameters to Route , Learn how to pass parameters or data to the Route using the RouterLink us to include route parameters, where we can send any dynamic value for a URL segment When the user navigates to the component again, the Angular does not� There is one URL, and that URL always displays the "My Store" page with a list of products and their descriptions. This guide shows you how to use Angular routing to give the user in-app navigation. In a single-page app, instead of loading new pages, you show different components and data to the user based on where the user is in the application.

Try like this:

WORKING DEMO // click on Home

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

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

Parameterised Routes • Angular, Angular also supports optional routes via passing in an object to the navigate How components can be notified with what the parameter values are when the Sometimes we need part of the path in one or more of our routes (the URL s) to be from "@angular/platform-browser-dynamic"; import { ReactiveFormsModule, � In this tutorial, we are going to learn about component communication in angular with the help of examples. @Input. Angular provides us @Input decorator by using that we can pass data from parent component to child component.

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)
}

In-app navigation: routing to views, The router enables navigation by interpreting a browser URL as an You can use a route to pass this type of information to your application components. To do � This is where the Angular Router will render the component that corresponds to current browser’s path. That’s all steps we need to follow in order to manually setup routing inside an Angular project. Creating Routes. Now, let’s add routes to our two components.

Component Communication in Angular, There are two ways to pass the data through URLs in Angular: Router Parameters; Query Params Here's how to read a router parameter from the component routed to: You can also pass dynamic value through a variable. In a URL such as /hero/42, "42" is the value of the id parameter. The corresponding HeroDetailComponent uses that value to find and present the hero whose id is 42. The data property in the third route is a place to store arbitrary data associated with this specific route. The data property is accessible within each activated route.

Using Route Parameters, The route for the component that displays the details for a specific product would need a for product with ID 5, you must use the following URL: localhost:3000/ product-details/5 Note that the routerLink directive passes an array which specifies the path and the route parameter. Dynamically Adding Route Components. However, there are much better ways to accept complex data without bothering with object serialization and parsing. Using Application Providers. While this next method isn’t technically related to the Angular Router, it is a method for passing around data nonetheless.

Angular 2: Component Router - Part 2: Dynamic URLs, This function takes one argument (vehicle id, passed from the template) and calls the router's 'navigate' function, passing in an array containing 2� Learn how to pass parameters or data to the Route using the RouterLink Directive in Angular. We look at how to define the route, which accepts the parameter. Learn how to retrieve the parameters using the ActivatedRoute Service.either by snapshot method or by subscribe method