Accessing methods or events in JavaScript/TypeScript/Angular

Ionic Framework
1

Hi

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

I always used:

  @ViewChild('tabs') tabs;

....
this.tabs.nativeElement.something
.....

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?

2

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

this.tabs.something;

that’s it :wink:

3

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

<ion-tab-bar #tabBar *ngIf="!viewIsLarge" slot="bottom" color="primary">

@ViewChild('tabBar') tabBar: IonTabBar;

console.log(this.tabBar.color)

It is giving me an error of selectedTab is undefined.

ERROR TypeError: Cannot read property 'selectedTab' of undefined
    at TabsPage.push../src/app/tabs/tabs.page.ts.TabsPage.ngDoCheck (tabs.page.ts:32)
    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.

4

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

5

How about like this?

...
import { IonTabs } from "@ionic/angular";
...
@ViewChild('tabs',{static:false }) private tabs: IonTabs;
...
let height:any = this.tabs.outlet.nativeEl.clientHeight;
...

Note: ionic 5, Angular 8