New Way to Retrieve Components in Ionic 2

In my current situation, the getComponent method is no longer available. Here's what I am dealing with:

Within app.ts and app.html files, there are two components - a menu component and a nav component. The nav component contains a page with tabs. When the menu, part of the app component, is clicked, I want to switch tabs.

Previously, I could easily achieve this using:

this.app.getComponent('mytabs').select(3)

Now, I realize that I need to utilize ViewChild, so I attempted both methods:

@ViewChild('mytabs') tabs:Tabs;

The ion-tab component has a reference #mytabs.

And

@ViewChild(Tabs) tabs:Tabs;

Both times, the this.tabs variable returned undefined. My assumption is that the component is not yet available when the app.ts component is initialized. What options do I have in this scenario?

Here is the information about my Ionic setup:

Cordova CLI: 6.1.1
Gulp version: CLI version 3.9.1
Gulp local: Local version 3.9.1
Ionic Framework Version: 2.0.0-beta.7
Ionic CLI Version: 2.0.0-beta.29
Ionic App Lib Version: 2.0.0-beta.16
OS:
Node Version: v4.4.0
typescriptangularionic2

Answer №1

When using @ViewChild() and @ViewChildren(), the variables queried are not initialized until after the execution of ngAfterViewInit(). This means that referencing the variable tabs in the constructor or ngOnInit() will result in it being null.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

A static factory method within an abstract class

I am currently developing a class system using Typescript. The main structure consists of an abstract class called Component, which includes a static method called create(). This method is utilized on child classes to generate specific instances. abstract ...

typescriptoop

Drawing coordinate lines on a two-dimensional array that simulates a grid

Are you solving a challenging code problem from the advent of code series? Check out the problem description here. The task involves processing input data in the form of coordinate lines on a grid (x1,y1 -> x2,y2). The goal is to populate a 2D array wi ...

arraystypescriptalgorithm

Guide on setting up background sound notifications with firebase-messaging-sw.js

const audio = new Audio(" "); Whenever I include this code in my firebase-messaging-sw.js file for the service worker, I keep encountering a reference error. Even though notifications come through when the browser is in the background, an Audio is not de ...

javascriptangularfirebase

An element can be either an object or an array of objects

Is there a way to define a type/interface that can handle both objects and arrays without having to explicitly check each time? I want to avoid using the `|` operator in TypeScript which requires checking if a variable is an array or not, as I always know ...

typescript

What methods are available to change one JSON format into another?

I am receiving JSON data from a Laravel API in the following format: [ { "id":48, "parentid":0, "title":"Item 1", "child_content":[ { "id":49, "parentid":48, "title":"Itema 1 ...

javascriptphpjsontypescript

The input field in iOS is shielded by the keyboard on Ionic 5

For months now, I've been struggling with the same issue and I just can't seem to find a solution. The problem arises in an application where there are multiple forms; when a user focuses on an input field, the keyboard covers it up completely ma ...

angularionic-frameworkionic4ionic-native

Navigate directly to the dashboard page in Angular 5 using RxJS without needing to load the main page first

Utilizing Firebase as the API in my application for authentication, database management, and storage. Implemented a main page (localhost:4200) that loads when the user is not logged in, and a dashboard (localhost:4200/dashboard) for authenticated users. ...

angularhttp-redirectroutesrxjsobservable

Using ngModel in Angular 2 forms while ensuring the underlying model is not updated

In one of my components, I have defined these properties: userDataDefinitions:Array<userDataDefinition>; currentDefinition:userDataDefinition = null; There is a form that displays data based on the currentDefinition value which can be changed by cl ...

angularjsangularangular2-ngmodel

Implementing React custom component with conditional typing

My goal is to enable other developers to set a click handler for a button only if the button's type is set to button. Users can only set the type to either button or submit. I want to restrict developers from setting the onClick property on the comp ...

reactjstypescript

Node modules are incapable of being installed within node packages

Whenever I use the ng serve command in my terminal, an error pops up: 10% building 3/3 modules 0 activei ｢wds｣: Project is running at http://localhost:4200/webpack-dev-server/ i ｢wds｣: webpack output is served from / i ｢wds｣: 404s will fall ...

angularnpm

Sending a post request to an Express.js API from a different device

I currently have a server running on localhost:3000, with my app.js set up to utilize the angular router. When attempting to access localhost:3000 in my browser (for example: app.use('/', express.static(path.join(__dirname, '/dist/Client&apo ...

node.jsangularexpress

Incorporating Fonts package and CSS frameworks into Angular Story Book - A guide

How can external fonts be included in Angular storybook, especially when using materialize css and google fonts? <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> <link href="https://fonts.googleapis.com/css?f ...

angularstorybook

Creating a personalized Typescript type declaration for a npm package in a Create React App

I'm having trouble incorporating a type declaration for the react-load-script package in my Create React App project. To address this, I created a file named react-load-script.d.ts within the src directory and included the following code: // Type de ...

javascriptreactjstypescript

receiving null instead of an identifier

Attempting to perform an update operation in Angular. Upon submission after updating, a random number is displayed at the end of the API rather than the specific id number. The request URL appears as follows Request URL: http://localhost:4200/api/auth/rol ...

angularangular5angular6angular-httpclient

Repeated calls to the NextJS middleware while accessing an Incremental Static Regeneration (ISR)

I am currently working on a NextJS application that includes an ISR page fetching data from Supabase. There is a middleware in place to record a page visit before the page is rendered. export async function middleware( request: NextRequest, fetchEvent: ...

typescriptnext.jsmiddleware

What are the steps for integrating AMD with angular-cli?

I need to transition my current angular 2 project to angular-cli. Right now, I have set up scaffolding using Webpack and utilize AMD frequently to load specific js files asynchronously within certain components. Example: require(['json-fn'], (JS ...

angularwebpackangular-cliamd

The property of the dynamic Angular component is not defined

I've encountered a perplexing issue... In my template, I dynamically generate multiple components. Some of these components have a property called form, which is a FormGroup created using the FormBuilder, and it includes an isValid() method. The is ...

angulartypescriptangular-dynamic-components

Leveraging AWS Cloud Development Kit (CDK) with Projen to address the

As I work on developing a CDK library, I have encountered an issue where the CDK fails to build if a variable is not assigned for use. While I understand this is not a recommended practice and results in a test error, it is necessary for my current devel ...

typescriptamazon-web-servicesaws-cdktsconfig

Translating SQL to Sequelize Syntax

I have an SQL query that I need to rewrite as a sequelize.js query in node.js. SELECT historyTable1.* FROM table1 historyTable1 WHERE NOT EXISTS ( SELECT * FROM table1 historyTable2 WHERE historyTable2.id=historyTable1.id AND historyTable2.da ...

javascriptnode.jstypescriptsequelize.jssequelize-typescript

A Guide to Effectively Managing Express API Responses in Angular 2

When I make an Express API call from my Angular 2 application, I receive a response in the following way. In my component: this.emailService.sendEmail(this.name, this.email, this.message) .subscribe( (res) => ...

angularhttpexpressheroku