CODEWITHSUNDEEP
ionic-frameworkionic4
mos
mos

Reputation: 121

ion-select, ion-input and retrive its value on second page

I am getting the number values from the ion-select and input a number in the ion-input. How can I display the selected value and the input value from the original page to another page? I am using ionic 4

<ion-item>
           <ion-input #user2 type="tel" maxlength="14" minlength="4" [(ngModel)]="numpad" 
                      name="userCount" (keypress)="numberOnlyValidation($event)"></ion-input>
</ion-item>

<ion-item (click)="openSelect()">
           <ion-input [(ngModel)]="selectedCode"></ion-input>
</ion-item>
<ion-item style="display: none">
           <ion-select #select1 [(ngModel)]="selectedCode">
           </ion-select>
</ion-item>

Upvotes: 0

Views: 439

Answers (1)

Rich Tillis
Rich Tillis

Reputation: 1571

Here's one solution. Assume the input is in home.page and the values will be routed to page2.page.

Update app-routing.module.ts and add a new route

{
  path: 'page2/:code/:numpad',
  loadChildren: () => import('./page2/page2.module').then( m => m.Page2PageModule)
},

Then you will want to take the values from home.page and navigate to page 2. There are a few different way to do this. In the example below I'm just using ionChange to call a function to route to page2.

home.page.ts 

<ion-item>
   <ion-input #user2 type="tel" maxlength="14" minlength="4" [(ngModel)]="numpad" name="userCount"></ion-input>
</ion-item>
<ion-item>
  <ion-select [(ngModel)]="selectedCode" (ionChange)="valueChangedSoRouteToPage2()">
    <ion-select-option *ngFor="let user of users" [value]="user.id">{{user.first + ' ' + user.last}}</ion-select-option>
  </ion-select>
</ion-item>

Then in home.page.ts you can do something like this

valueChangedSoRouteToPage2() {
  console.log('changed');
  console.log(this.selectedCode);
  console.log(this.numpad);
  this.router.navigateByUrl('/page2/' + this.selectedCode + '/' + this.numpad);
}

Last step - update page2.page.ts

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

@Component({
  selector: 'app-page2',
  templateUrl: './page2.page.html',
  styleUrls: ['./page2.page.scss'],
})
export class Page2Page implements OnInit {

  page2Code;
  page2Numpad;

  constructor(private activatedRoute: ActivatedRoute) { }

  ngOnInit() {
    this.page2Code = this.activatedRoute.snapshot.paramMap.get("code");
    this.page2Numpad = this.activatedRoute.snapshot.paramMap.get("numpad");

    console.log('code: ' + this.page2Code);
    console.log('numpad: ' + this.page2Numpad);

  }
 }

Hope this helps.

Upvotes: 1

Related Questions