On page loads trigger input click Angular 13

Question

ionic info

Ionic:

   Ionic CLI                     : 6.19.1 (C:\Users\eight\AppData\Roaming\npm\node_modules\@ionic\cli)
   Ionic Framework               : @ionic/angular 6.1.7
   @angular-devkit/build-angular : 13.2.6
   @angular-devkit/schematics    : 13.2.6
   @angular/cli                  : 13.2.6
   @ionic/angular-toolkit        : 6.1.0

Capacitor:

   Capacitor CLI      : 3.5.1
   @capacitor/android : 3.5.1
   @capacitor/core    : 3.5.1
   @capacitor/ios     : not installed

Cordova:

   Cordova CLI       : not installed
   Cordova Platforms : not available
   Cordova Plugins   : not available

Utility:

   cordova-res : 0.15.4
   native-run  : 1.6.0

System:

   Android SDK Tools : 26.1.1 (C:\Users\eight\AppData\Local\Android\Sdk)
   NodeJS            : v16.14.2 (C:\Program Files\nodejs\node.exe)
   npm               : 8.10.0
   OS                : Windows 10

HTML

<ion-input placeholder="Search" id="searchProduct" #searchProduct clear-input="true" inputmode="search" value="Cleanser" autocomplete="off" class="fw-bold"></ion-input>

.page.ts

import { Component, OnInit } from '@angular/core';
import { ModalController } from '@ionic/angular';

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

  constructor( private modalController: ModalController) { }  

  ngOnInit() {}
  async closeModel() {
    await this.modalController.dismiss(close);
  }
  

}

Scenario

let me tell you a scenario, In home.html: there is a search button, on click, it is redirecting to searchProduct.html I want that input field should be triggered.

It can be done by ngafterviewinit?

Solution, please.

Does this answer your question? [Ionic v4 - how do I autofocus on a Input?](https://stackoverflow.com/questions/54914132/ionic-v4-how-do-i-autofocus-on-a-input) — Najam Us Saqib, Jun 06 '22 at 07:55

score 0 · Answer 1 · answered Jun 05 '22 at 16:22

Don't do it this way. Just let make searchProduct.html as main page.

Let inject Router in your app.component.ts:

constructor(private readonly router: Router)
{
}

Initialize in app.component.ts:

initializeApp(): void {
    this.platform.ready().then(() => this.router.navigateByUrl('searchProduct.html'));
}

On page loads trigger input click Angular 13

1 Answers1