Accessing methods or events in JavaScript/TypeScript/Angular



I don’t have an idea how to do this.

I always used:

  @ViewChild('tabs') tabs;


But this doesn’t work using any of the ionic components. How can I access any of the properties/methods/events of the ionic4/stencil components using JavaScript?


i think you need to define what kind of component method or property you need to use.

here is small example

import  { IonTabs } from '@ionic/angular';

@viewChild('tabs') tabs: IonTabs;

after getting this reference you can use events and methods of tabs


that’s it :wink:


I tried this and it didn’t work :frowning:

<ion-tab-bar #tabBar *ngIf="!viewIsLarge" slot="bottom" color="primary">
@ViewChild('tabBar') tabBar: IonTabBar;


It is giving me an error of selectedTab is undefined.

ERROR TypeError: Cannot read property 'selectedTab' of undefined
    at TabsPage.push../src/app/tabs/ (
    at checkAndUpdateDirectiveInline (core.js:22101)
    at checkAndUpdateNodeInline (core.js:23362)
    at checkAndUpdateNode (core.js:23324)
    at debugCheckAndUpdateNode (core.js:23958)
    at debugCheckDirectivesFn (core.js:23918)
    at Object.eval [as updateDirectives] (TabsPage_Host.ngfactory.js? [sm]:1)
    at Object.debugUpdateDirectives [as updateDirectives] (core.js:23910)
    at checkAndUpdateView (core.js:23306)
    at callViewAction (core.js:23547)

This is what I get when I run on this.tabBar

IonTabBar {el: ion-tab-bar.ion-color.ion-color-primary.hydrated}
el: ion-tab-bar.ion-color.ion-color-primary.hydrated
color: "primary"
mode: "md"
selectedTab: "home"
translucent: false
__proto__: Object

As you can see the property selectedTab does have a value yet is still gives me an error that the property is undefined.


Anyone else has come to some solution to my problem? I cannot access some propertie using the above mention methods.