CODEWITHSUNDEEP
angularangular7url-parameters
testing
testing

Reputation: 20279

Get any URL parameter in Angular

In PHP you get all URL parameter with

print_r($_GET);

In JavaScript it is something like this

window.onload = function() {
  GetURLParameter();
};

function GetURLParameter()
{
    var sPageURL = window.location.search.substring(1);
    var sURLVariables = sPageURL.split('&');
    for (var i = 0; i < sURLVariables.length; i++) 
    {
        var sParameterName = sURLVariables[i].split('=');
        var oldValue = document.getElementById("result").value;
        var newValue = oldValue + '\n' + sParameterName[0] + ': ' + sParameterName[1];
        document.getElementById("result").value = newValue;
    }
}​

And in Angular?

All the examples I saw query a certain parameter. You must know the parameter in advance. E.g.

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  title = 'url-call';
  paramList: string[] = [];
  param1: string;

  constructor(private activatedRoute: ActivatedRoute) { }

  ngOnInit() {
    console.log(this.activatedRoute.snapshot.queryParamMap.get("param1"));
    this.activatedRoute.queryParamMap.subscribe(queryParams => {
      console.log(queryParams.get("param1"));
    })

  }
}

How do I print out all/any parameter without knowing the parameter name?

In addition what is the difference between queryParamMap and queryParams?

Upvotes: 0

Views: 1075

Answers (1)

Abhishek Ekaanth
Abhishek Ekaanth

Reputation: 2569

If you would like to get all the parameters as an object you can do something like this

this.route.queryParamMap.subscribe(params => {
  this.orderObj = {...params.keys, ...params};
});

if your URL is something like this

http://localhost:4200/products?order=popular&filter=new

this.orderObj will contain 

{
  "0": "order",
  "1": "filter",
  "params": {
    "order": "popular",
    "filter": "new"
  }
}

UPDATE:

queryParamMap: Observable: An Observable that contains a map of the query parameters available to all routes. The map supports retrieving single and multiple values from the query parameter.

while

queryParams: Observable An observable of the query parameters shared by all the routes.

please check this link

Upvotes: 2

Related Questions