Saturday 21 March 2020

How to get parameter on Angular route in Angular way

ActivatedRouteAngularParamsQuery Parameter

In this article we are discussing about reading a query parameter from route as well as reading an optional parameter. In one of my previous articles I have explained about sharing data through routes, let us check how we can read from the route.

1. Reading a query parameter (ex: someroute?id="1234")
2. Reading an optional parameter (ex: somroute/id)

Reading a query parameter.


In the below url we have to read the ID parameter. Now check below code.


 http://localhost:4200/module-one/dashboard?ID="1234"

We can read this query parameter using angular ActivatedRoute feature.


public id: string;

  constructor(private route: ActivatedRoute) { }

  ngOnInit(): void {
    if (this.route && this.route.queryParams) {
      this.route.queryParams.subscribe((queryParams) => {
        this.id = queryParams['ID'] || null;
        console.log(this.id);
      });
    }
  }

Router


const routes: Routes = [
  {
    path: 'dashboard',
    component: SampleOneComponent
  }

Similarly, you can read any query parameters using above approach.

Reading an optional parameter


In this scenario we will be reading the data from the route. For user it will be normal route than a query parameter. Check below sample URL.


 http://localhost:4200/module-one/dashboard/create

Now check below route example.


const routes: Routes = [
  {
    path: 'dashboard',
    component: SampleOneComponent
  },
  {
    path: 'dashboard/:type',
    component: SampleOneComponent
  }
];

Here we have to read "type"


  public type: string;

  constructor(private route: ActivatedRoute) {
  }

  ngOnInit(): void {
    if (this.route && this.route.params) {
      this.route.params.subscribe((params) => {
        this.type = params['type'];
        console.log(this.type);
      });
    }
  }



In the above example I have added "create" in the route, similarly you can use any value and it can be read using the same above code.

For example like below example you can pass any value.


 http://localhost:4200/module-one/dashboard/{any value}

Now let us check another example there we can pass more parameter also we can read the same in the component.

Sample url


 http://localhost:4200/module-one/dashboard/create/1233

Updated Router code


{
    path: 'dashboard/:type/:id',
    component: SampleOneComponent
  }

Now check below updated code for reading multiple route parameter.


  public type: string;

  constructor(private route: ActivatedRoute) {
  }

  ngOnInit(): void {
    if (this.route && this.route.params) {
      this.route.params.subscribe((params) => {
        this.type = params['type'];
        console.log(this.type);
        const tempId: string = params['id'];
        console.log(tempId);
      });
    }
  }



If you want to keep both routes, check below example.


{
    path: 'dashboard/:type',
    component: SampleOneComponent
  },
  {
    path: 'dashboard/:type/:id',
    component: SampleOneComponent
  }

We are done with our examples, check below simple version.



this.route.params.subscribe((params) => {
  console.log(params);
});


this.route.queryParams.subscribe((queryParams) => {
  console.log(queryParams);
});

In this article we have discussed about reading data from angular route.

Related Info

1. 3 simple ways to share data through angular route.

2. Get Url parameter using Angular.

3. Share data between Angular components - 7 methods.

2 comments :