# Get url parameter

**URL:** <https://forum.ionicframework.com/t/get-url-parameter/85098>\
**Category:** ionic-v3\
**Created:** [April 2, 2017, 6:35am UTC](https://forum.ionicframework.com/t/get-url-parameter/85098 "2017-04-02T06:35:13Z")\
**Posts on this page:** 13\
**Page:** 1

<div class="post-metadata">

**Author:** ![Jacktoolsnet](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/jacktoolsnet/32/107318_2.png) [@Jacktoolsnet](https://forum.ionicframework.com/u/Jacktoolsnet)\
**Post date:** [April 2, 2017, 6:35am UTC](https://forum.ionicframework.com/t/get-url-parameter/85098/1 "2017-04-02T06:35:14Z")

</div>

Hello,

is there an easy way to read the url params when I run my ionic app in the browser?

For example I want to link to my Browser app like this.

[http://www.weeklystyle.de/?category=music&id=2](http://www.weeklystyle.de/?category=music&id=2)

This shoud open the detail page of my music category showing the entry with the id 2

Any suggestions?

---

<div class="post-metadata">

**Author:** ![Jacktoolsnet](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/jacktoolsnet/32/107318_2.png) [@Jacktoolsnet](https://forum.ionicframework.com/u/Jacktoolsnet)\
**Post date:** [April 3, 2017, 7:04pm UTC](https://forum.ionicframework.com/t/get-url-parameter/85098/2 "2017-04-03T19:04:37Z")

</div>

Ok. I found a soloution. I think it is not perfekt but it works.

First define an array

```
private urlParameters: Array<any> = [];

```

Then in IonViewDidLoad

```
if (document.URL.indexOf("?") > 0) {
	let splitURL = document.URL.split("?");
	let splitParams = splitURL[1].split("&");
	let i: any;
	for (i in splitParams){
		let singleURLParam = splitParams[i].split('=');
		if (singleURLParam[0] == "category"){
			this.category = singleURLParam[1];
		}
		if (singleURLParam[0] == "id"){
			this.id = singleURLParam[1];
		}
		let urlParameter = {
		'name': singleURLParam[0],
		'value': singleURLParam[1]
	};
	this.urlParameters.push(urlParameter);
	}
}

```

Switch wich page should load

```
switch (this.category){
case 'music':
	this.goToPageMusicURL();
	this.showToastWithCloseButton();
	break;
case 'events':
	this.goToPageEventsURL();
	this.showToastWithCloseButton();
	break;
}

```

Go to the page

```
goToPageMusicURL() {
	//push another page onto the history stack
	//causing the nav controller to animate the new page in
	this.navCtrl.push(MusicPage, this.urlParameters);
	this.menuCtrl.close();
}

   // For normal click Events

goToPageMusic() {
	//push another page onto the history stack
	//causing the nav controller to animate the new page in
	this.navCtrl.push(MusicPage);
	this.menuCtrl.close();
}

```

Get the Parameter at the target page

```
try{
	console.log(navParams);
	this.urlParamID = navParams.get('1').value;
}catch(ex){
	this.urlParamID = "";
}

```

Living excample:

[http://ionic.weeklystyle.de/?category=music&id=3](http://ionic.weeklystyle.de/?category=music&id=3)

Walks throug the site like the user clicks…

---

<div class="post-metadata">

**Author:** ![Jacktoolsnet](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/jacktoolsnet/32/107318_2.png) [@Jacktoolsnet](https://forum.ionicframework.com/u/Jacktoolsnet)\
**Post date:** [May 7, 2017, 6:23pm UTC](https://forum.ionicframework.com/t/get-url-parameter/85098/3 "2017-05-07T18:23:23Z")

</div>

Ok. Since Ionic 3 is out I can do this with IonicPage

> **[Ionic Framework](https://ionicframework.com/docs/api/navigation/IonicPage/)**
>
> Ionic is the app platform for web developers. Build amazing mobile, web, and desktop apps all with one shared code base and open web standards

---

<div class="post-metadata">

**Author:** ![sirfak](https://avatars.discourse-cdn.com/v4/letter/s/a5b964/32.png) [@sirfak](https://forum.ionicframework.com/u/sirfak)\
**Post date:** [December 11, 2017, 12:39am UTC](https://forum.ionicframework.com/t/get-url-parameter/85098/4 "2017-12-11T00:39:05Z")

</div>

Hi Can you elaborate how?

---

<div class="post-metadata">

**Author:** ![Jacktoolsnet](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/jacktoolsnet/32/107318_2.png) [@Jacktoolsnet](https://forum.ionicframework.com/u/Jacktoolsnet)\
**Post date:** [December 11, 2017, 12:45pm UTC](https://forum.ionicframework.com/t/get-url-parameter/85098/5 "2017-12-11T12:45:53Z")

</div>

This is the code to extract the parameters from the url

```auto
if (document.URL.indexOf("?") > 0) {
	let splitURL = document.URL.split("?");
	let splitParams = splitURL[1].split("&");
	let i: any;
	for (i in splitParams){
		let singleURLParam = splitParams[i].split('=');
		if (singleURLParam[0] == "category"){
			this.category = singleURLParam[1];
		}
		if (singleURLParam[0] == "id"){
			this.id = singleURLParam[1];
		}
		let urlParameter = {
		'name': singleURLParam[0],
		'value': singleURLParam[1]
	};
	this.urlParameters.push(urlParameter);
	}
}

```

---

<div class="post-metadata">

**Author:** ![sirfak](https://avatars.discourse-cdn.com/v4/letter/s/a5b964/32.png) [@sirfak](https://forum.ionicframework.com/u/sirfak)\
**Post date:** [December 14, 2017, 5:49am UTC](https://forum.ionicframework.com/t/get-url-parameter/85098/6 "2017-12-14T05:49:48Z")

</div>

> [@Jacktoolsnet](#):
>
> IonicPa

You said that you can do with @IonicPage. your above quote is a generic method to retrieve parameters isnt it?

---

<div class="post-metadata">

**Author:** ![Tommertom](https://avatars.discourse-cdn.com/v4/letter/t/ed8c4c/32.png) [@Tommertom](https://forum.ionicframework.com/u/Tommertom)\
**Post date:** [December 14, 2017, 6:44am UTC](https://forum.ionicframework.com/t/get-url-parameter/85098/7 "2017-12-14T06:44:04Z")

</div>

Isnt deeplinking intended for all this?

Or even better: router?

So no need to fiddle with document.url

---

<div class="post-metadata">

**Author:** ![Tommertom](https://avatars.discourse-cdn.com/v4/letter/t/ed8c4c/32.png) [@Tommertom](https://forum.ionicframework.com/u/Tommertom)\
**Post date:** [December 14, 2017, 6:58am UTC](https://forum.ionicframework.com/t/get-url-parameter/85098/8 "2017-12-14T06:58:27Z")

</div>

Found somethibg

> **[Ionic Framework](https://ionicframework.com/docs/2.2.0/api/navigation/DeepLinker/)**
>
> Ionic is the app platform for web developers. Build amazing mobile, web, and desktop apps all with one shared code base and open web standards

---

<div class="post-metadata">

**Author:** ![Jacktoolsnet](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/jacktoolsnet/32/107318_2.png) [@Jacktoolsnet](https://forum.ionicframework.com/u/Jacktoolsnet)\
**Post date:** [December 14, 2017, 7:56am UTC](https://forum.ionicframework.com/t/get-url-parameter/85098/9 "2017-12-14T07:56:54Z")

</div>

Take a look at the dynamic link section of the page documentation.

But it works only with lazy loading.

```auto

@IonicPage({
  name: 'detail-page',
  segment: 'detail/:id'
})

```

In this example the path shoud be something like [http://localhost:8100/detail-page/1234](http://localhost:8100/detail-page/1234)

Where 1234 is the parameter id

---

<div class="post-metadata">

**Author:** ![mburger81](https://avatars.discourse-cdn.com/v4/letter/m/bc8723/32.png) [@mburger81](https://forum.ionicframework.com/u/mburger81)\
**Post date:** [April 5, 2018, 9:56am UTC](https://forum.ionicframework.com/t/get-url-parameter/85098/10 "2018-04-05T09:56:57Z")

</div>

In Ionic4 I think IonPage would be removed and you can use Angular’s router to doing this! GREAT

---

<div class="post-metadata">

**Author:** ![dsgriffin](https://avatars.discourse-cdn.com/v4/letter/d/ea5d25/32.png) [@dsgriffin](https://forum.ionicframework.com/u/dsgriffin)\
**Post date:** [June 18, 2018, 9:44am UTC](https://forum.ionicframework.com/t/get-url-parameter/85098/11 "2018-06-18T09:44:58Z")

</div>

That only seems to work for numbers/numerical strings

---

<div class="post-metadata">

**Author:** ![Jacktoolsnet](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/jacktoolsnet/32/107318_2.png) [@Jacktoolsnet](https://forum.ionicframework.com/u/Jacktoolsnet)\
**Post date:** [June 18, 2018, 10:12am UTC](https://forum.ionicframework.com/t/get-url-parameter/85098/12 "2018-06-18T10:12:18Z")

</div>

Why? If you urlencode and decode your string it should work. Why not?

---

<div class="post-metadata">

**Author:** ![giannis](https://avatars.discourse-cdn.com/v4/letter/g/aca169/32.png) [@giannis](https://forum.ionicframework.com/u/giannis)\
**Post date:** [March 20, 2019, 1:15pm UTC](https://forum.ionicframework.com/t/get-url-parameter/85098/13 "2019-03-20T13:15:38Z")

</div>

Really helpful! Thanks for sharing!