How to navigate a search bar content to another page in ionic 3

hello all,

I have one problem …I am not able to navigate a content found in search bar to another page please help to solve my problem

my souce code :TS file
generateTopics() {
this.topics = [
// ’ Storage in Ionic 2’,
// ‘Ionic 2 - calendar’,
// ‘Creating a Android application using ionic framework.’,
// ‘Identifying app resume event in ionic - android’,
// ‘What is hybrid application and why.?’,
// ‘Procedure to remove back button text’,
// ‘How to reposition ionic tabs on top position.’,
// ‘Override Hardware back button in cordova based application - Ionic’,
// ‘Drupal 8: Enabling Facets for Restful web services’,
// ‘Drupal 8: Get current user session’,
// ‘Drupal 8: Programatically create Add another field - Example’,
‘Task 1’,
‘2 Task’,
‘3 Task’,
‘4 Task’,
‘5 Task’,
‘6 Task’,
‘How to reposition ionic tabs on top position.’,
‘Override Hardware back button in cordova based application - Ionic’,
‘Drupal 8: Enabling Facets for Restful web services’,
‘Drupal 8: Get current user session’,
‘Drupal 8: Programatically create Add another field - Example’,
];

}

getTopics(ev: any) {
this.generateTopics();
let serVal = ev.target.value;
if (serVal && serVal.trim() != ‘’) {
this.topics = this.topics.filter((topic) => {
return (topic.toLowerCase().indexOf(serVal.toLowerCase()) > -1);
})
}
}

}

html file :

{{ topic }}

I wants …when i search Task 1 …and if I find it then navigate that task1 to another page …any solution please

When exactly would you navigate to that page? If a search button is clicked, if the search value is exactly the entry in the array or as soon as it is not '' and it finds an entry including the search value?

Here is a version that navigates by it self:

home.ts

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { TaskPage } from '../task/task';

@Component({
  selector: 'page-home',
  template: `
    <ion-header>
      <ion-navbar>
        <ion-title>Home</ion-title>
      </ion-navbar>
    </ion-header>

    <ion-content padding>
      <ion-item>
        <ion-input type="search" placeholder="Search"(keyup)="getTopics($event)"></ion-input>
        <button ion-button item-end clear icon-only><ion-icon name="search"></ion-icon></button>
      </ion-item>
      <ion-list>
          <ion-item *ngFor="let topic of filteredTopics">{{ topic }}</ion-item>
        </ion-list>
    </ion-content>
  `
})
export class HomePage {
  topics: Array<string> = [];
  filteredTopics: Array<string> = [];

  constructor(public navCtrl: NavController) {

  }

  ionViewDidLoad() {
    this.topics = [
      // 'Storage in Ionic 2',
      // 'Ionic 2 - calendar',
      // 'Creating a Android application using ionic framework.',
      // 'Identifying app resume event in ionic - android',
      // 'What is hybrid application and why.?',
      // 'Procedure to remove back button text',
      // 'How to reposition ionic tabs on top position.',
      // 'Override Hardware back button in cordova based application - Ionic',
      // 'Drupal 8: Enabling Facets for Restful web services',
      // 'Drupal 8: Get current user session',
      // 'Drupal 8: Programatically create Add another field - Example',
      'Task 1',
      '2 Task',
      '3 Task',
      '4 Task',
      '5 Task',
      '6 Task',
      'How to reposition ionic tabs on top position.',
      'Override Hardware back button in cordova based application - Ionic',
      'Drupal 8: Enabling Facets for Restful web services',
      'Drupal 8: Get current user session',
      'Drupal 8: Programatically create Add another field - Example',
    ];
    this.getTopics();
  }

  getTopics(ev?: any) {
    const searchValue = ev ? ev.target.value : '';
      this.filteredTopics = this.topics.filter((topic) => {
        return (topic.toLowerCase().indexOf(searchValue.toLowerCase()) > -1);
      });
      if (this.filteredTopics.length == 1) {
        this.navCtrl.push(TaskPage, {task: this.filteredTopics[0]});
      }
  }
}

task.ts

import { Component } from '@angular/core';
import { NavParams } from 'ionic-angular';

@Component({
  selector: 'page-task',
  template: `
    <ion-header>
      <ion-navbar>
        <ion-title>Task</ion-title>
      </ion-navbar>
    </ion-header>

    <ion-content padding>
      {{ task }}
    </ion-content>
  `
})
export class TaskPage {
  task: string = '';

  constructor(public navParams: NavParams) {
    this.task = navParams.get('task');
  }
}

Thanks you so much for solution

@Nexi can you please help me here…am making one application …in which task is editing on image…so I use canvas and showing image on canvas (with the help of camera ) and drawing on image…but now problem is before adding image …with help of drawing brush when i touch on canvas it draw on canvas …but i want to draw on image only after adding through camera…not before so any solution please

my canvas-draw.ts file code
import { Component, ViewChild, Renderer } from ‘@angular/core’;
import { Platform } from ‘ionic-angular’;
import { Camera, CameraOptions } from ‘@ionic-native/camera’;
import { IonicPage, NavController, NavParams } from ‘ionic-angular’;

@Component({
selector: ‘canvas-draw’,
templateUrl: ‘canvas-draw.html’
})
export class CanvasDraw {

@ViewChild('myCanvas') canvas: any;

canvasElement: any;
lastX: number;
lastY: number;
public photos : any;
base64Image:any;

currentColour: string = '#1abc9c';
availableColours: any;

brushSize: number = 10;

constructor(public platform: Platform, public renderer: Renderer,private camera : Camera,public navCtrl: NavController, public navParams: NavParams) {
    console.log('Hello CanvasDraw Component');

    this.availableColours = [
        '#1abc9c',
        '#3498db',
        '#9b59b6',
        '#e67e22',
        '#e74c3c'
    ];

}

ngAfterViewInit(){

    this.canvasElement = this.canvas.nativeElement;

    this.renderer.setElementAttribute(this.canvasElement, 'width', this.platform.width() + '');
    this.renderer.setElementAttribute(this.canvasElement, 'height', this.platform.height() + '');

}

changeColour(colour){
    this.currentColour = colour;
}

changeSize(size){
    this.brushSize = size;
}

handleStart(ev){

    this.lastX = ev.touches[0].pageX;
    this.lastY = ev.touches[0].pageY;
}

handleMove(ev){

    let ctx = this.canvasElement.getContext('2d');
    let currentX = ev.touches[0].pageX;
    let currentY = ev.touches[0].pageY;

    ctx.beginPath();
    ctx.lineJoin = "round";
    ctx.moveTo(this.lastX, this.lastY);
    ctx.lineTo(currentX, currentY);
    ctx.closePath();
    ctx.strokeStyle = this.currentColour;
    ctx.lineWidth = this.brushSize;
    ctx.stroke();      

    this.lastX = currentX;
    this.lastY = currentY;

}

clearCanvas(){
    let ctx = this.canvasElement.getContext('2d');
    ctx.clearRect(0, 0, this.canvasElement.width, this.canvasElement.height);  
}

// takePhoto() {
//   const options : CameraOptions = {
//     quality: 50, // picture quality
//     destinationType: this.camera.DestinationType.DATA_URL,
//     encodingType: this.camera.EncodingType.JPEG,
//     mediaType: this.camera.MediaType.PICTURE
//   }
//   this.camera.getPicture(options) .then((imageData) => {
//       this.base64Image = "data:image/jpeg;base64," + imageData;
//       this.photos.push(this.base64Image);
//       this.photos.reverse();
//     }, (err) => {
//       console.log(err);
//     });
// }

takePhoto() 
{

  
  var image = new Image();

  let ctx = this.canvasElement.getContext('2d');

  const options : CameraOptions = 
  {
    quality: 50, // picture quality
    destinationType: this.camera.DestinationType.DATA_URL,
    encodingType: this.camera.EncodingType.JPEG,
    mediaType: this.camera.MediaType.PICTURE
  }
  this.camera.getPicture(options) .then((imageData) => 
  {
  
      this.base64Image = "data:image/jpeg;base64," + imageData;
      //this.photos.push(this.base64Image);
      //this.photos.reverse();



      //canvas.push(this.base64Image);

      image.src=this.base64Image;

     // ctx.drawImage(image, 0, 0);

      ctx.drawImage(image, 0, 0, image.width,    image.height,     // source rectangle
          0, 0, this.canvasElement.width, this.canvasElement.height)

          //handleStart();

      /*image.onload = function() {
        this._CONTEXT.drawImage(image, 0, 0);
      };*/

      //this._CONTEXT.drawImage(image,0,0);

      /*this._CONTEXT.drawImage(image, 0, 0, image.width,    image.height,     // source rectangle
        0, 0, this._CANVAS.width, this._CANVAS.height);*/

    }, (err) => {
      console.log(err);
    });


}

}

my canvas-draw.html file code


<button *ngFor=“let colour of availableColours” icon-only ion-button (click)=“changeColour(colour)”>
<ion-icon [style.color]=“colour” name=“brush”>

<button ion-button full (click)=“takePhoto()” >
   Take Photo

<canvas #myCanvas (touchstart)=“handleStart($event)” (touchmove)=“handleMove($event)”>

please check my code and tell me what will be solution for this .

Whats about activating the canvas only if an picture was made with the camera?

<canvas #myCanvas *ngIf="base64Image" (touchstart)=“handleStart($event)” (touchmove)=“handleMove($event)”>

EDIT: Sry this will not work with your code, I try to find another solution.

Try to remove the touchstart and touchmove event listeners in your template (html) and add this after a picture was made and added to the canvas:

this.canvasElement.addEventListener('touchstart', ev => this.handleStart(ev));
this.canvasElement.addEventListener('touchmove', ev => this.handleMove(ev));

sorry Nexi …i didnt getting where to add above line can u just add to my code and send again
my html code:


<button *ngFor=“let colour of availableColours” icon-only ion-button (click)=“changeColour(colour)”>
<ion-icon [style.color]=“colour” name=“brush”>

<button ion-button full (click)=“takePhoto()” >
   Take Photo

<canvas #myCanvas (touchstart)=“handleStart($event)” (touchmove)=“handleMove($event)”>

Change the html line to:
<canvas #myCanvas></canvas>

And add the listeners after your add your image to the canvas:

ctx.drawImage(image, 0, 0, image.width, image.height,     // source rectangle
      0, 0, this.canvasElement.width, this.canvasElement.height);

this.canvasElement.addEventListener('touchstart', ev => this.handleStart(ev));
this.canvasElement.addEventListener('touchmove', ev => this.handleMove(ev));

If the user is allowed to change the photo, you have to remove the listeners while he is doing a photo and add it later again:

export class CanvasDraw {
  const touchstartListener = (ev) => this.handleStart(ev));
  const touchmoveListener = (ev) => this.handleMove(ev));

  ...

  takePhoto() {
    this.canvasElement.removeEventListener('touchstart', this.touchstartListener);
    this.canvasElement.removeEventListener('touchmove', this.touchmoveListener);

    ...

    ctx.drawImage(image, 0, 0, image.width, image.height,     // source rectangle
      0, 0, this.canvasElement.width, this.canvasElement.height);

    this.canvasElement.addEventListener('touchstart', ev => this.handleStart(ev));
    this.canvasElement.addEventListener('touchmove', ev => this.handleMove(ev));
  }

  ...
}

@Nexi thank you so much for solution it works
this.canvasElement.addEventListener(‘touchstart’, ev => this.handleStart(ev));
this.canvasElement.addEventListener(‘touchmove’, ev => this.handleMove(ev));

but when i add this code
const touchstartListener = (ev) => this.handleStart(ev));
const touchmoveListener = (ev) => this.handleMove(ev));
this shwoing me syntex error at ((ev))

sry ignore the const keyword

touchstartListener = (ev) => this.handleStart(ev));
touchmoveListener = (ev) => this.handleMove(ev));

yes its works now thanks alot

@Nexi when I add functionalitis like camera,drawing on canvas, in my ionic project which having android version 7…but when I run .apk file in kitkat version device and in android 4.4. and 5.2 …my application functionalities not work properly like…not opening camera in android 4.4 but opening in android 6.0 such problem of my app …please tell me any solution for how my app will work fine in all device ?

Maybe the camera plugin does not set permission request by default. Or there is something wrong with your plugin installation. I don’t know it, sorry. I haven’t used the camera plugin yet. Best start a new thread describing your new problem and ask for help.

Thanks alot for your reply

@Nexi hello…in my above code am taking picture with camera and display on canvas…but what i should do if i want to display list of old images on screen before taking new image on through camera …like in what’s App application while sending image to status …it displaying list of old images taking already through camera…any solution please

You could try to use the photo library plugin. Just take photos, write them to library and use them. If the user wants to take a photo, give him the option to pick a photo from the library. For managing files you could also use the file plugin.

hey nexi thank you for your reply …But instead photo library i can use
image picker plugin is it right ? because I want output like this i can
take photo also or choose picture from that list also to send …solution
please for such output

I don’t know how to build something like that. Maybe you have to build a cordova plugin.