CODEWITHSUNDEEP
ionic-frameworkionic2ionic3
Vitali
Vitali

Reputation: 33

How to set attribute into NavParams for update url path in Ionic?

For example, show the value of the radio buttons selected in the URL.

URL: [domain]/selector/:value

@IonicPage({
  name: 'selector',
  section: 'selector/:value'
})
@Component({
  template: `
<ion-list radio-group [(ngModel)]="selector">
  <ion-item>
    <ion-label>First</ion-label>
    <ion-radio value="first" checked></ion-radio>
  </ion-item>
  <ion-item>
    <ion-label>Second</ion-label>
    <ion-radio value="second"></ion-radio>
  </ion-item>
</ion-list>
  `
})
class SelectorComponent {
  private _value;
  get selector() {
    return this._value;
  }
  set value(value) {
    this._value = value;
    //set :value in url equals current value
  }
}

Now, when user switches the button, he should see new :value in the URL.

Upvotes: 2

Views: 1709

Answers (2)

Sumama Waheed
Sumama Waheed

Reputation: 3609

It's not possible as of version 3.6

You can do this:

window.history.replaceState('', '', '#/selector/' + value); 

// optionally update navCtrl data
this.navCtrl.getActive().data.radioValue = value;

Upvotes: 1

emroussel
emroussel

Reputation: 1127

You can use Ionic Page dynamic links. Add the @IonicPage() decorator on top of your component and specify a segment with your dynamic value.

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

And then you can push the page like this, passing your dynamic value as a navParam.

this.navCtrl.push('detail-page', {
  'value': detailInfo.value
})

Upvotes: 4

Related Questions