Ionic v4: How to access IonContent methods?

#1

Hello,

I’m migrating an application from v3 to v4.
I have an issue with IonContent.
In the v3 code, we use the scrollToBottom() method.
In v4, I can’t find it.

I tried
import {IonContent} from '@Ionic/angular';
with
@ViewChild(IonContent) content: IonContent
and also with this ViewChild
@ViewChild(IonContent, {read: IonContent}) content: IonContent
But the auto-complete only gives me access to the 3 events (ionScroll, ionScrollEnd, ioScrollStart).
I don’t get the autocomplete for the methods listed in the v4 documentation:

I tried
import {Content} from '@Ionic/angular';
But this class cannot be found in the @ionic/angular package.

I use @Ionic/angular 4.0.1

Am I missing something?

Thank you.

#2
import {IonContent} from '@ionic/angular';

@ViewChild(IonContent, {read: IonContent}) myContent: IonContent;

async myMethod() {
     await this.myContent.scrollToBottom();
}

P.S.: not sure the read is still mandatory

@ViewChild(IonContent) myContent: IonContent;

could be fine too

#3

Thank you for your answer.

As I said in my post, I already tried that, and I still have this issue, where the auto-complete doesn’t suggest the methods of IonContent.

I only have the 3 events (ionScroll, ionScrollEnd, ioScrollStart).

#4

Well the method above is the one I used in my app… weird

Maybe just an autocomplete problem, does it build when you try? Otherwise are u sure v4 is installed?

#5

I believe you.

I’m sure I use @ionic/angular 4.0.1.

I found out what the problem is, by checking the ionic repository.

If we take a look at the official ionic repository, in the ionic/angular/src/directives/proxies.ts :
We can see that only the 3 events are declared

The other methods are provided on the prototype thanks to the proxyMethods() function on this line.

So in the end it’s really normal that autocomplete doesn’t work.

I’m not sure it’s ok, to choose not to provide autocomplete.

I think the code should be written so that autocomplete always work.

in my humble opinion, in a framework (and probably in every code base), autocomplete should never be a tradeof, even for the sake of simplicity.

What do you all think?

#6

To be frankly honest, I think the problem is on your side and that there is no bug. Maybe you should try to fetch Ionic v4 again:

npm rm @ionic/angular --save
npm install @ionic/angular@latest --save

I just tried with a starter project and everything went fine, both autocomplete as compilation

[ng] ℹ 「wdm」: wait until bundle finished: /
[ng] Date: 2019-02-27T16:38:11.592Z
[ng] Hash: a5f13bbfe635fefc64ca
[ng] Time: 9143ms
[ng] chunk {common} common.js, common.js.map (common) 18.5 kB  [rendered]
[ng] chunk {home-home-module} home-home-module.js, home-home-module.js.map (home-home-module) 7.55 kB  [rendered]
[ng] chunk {list-list-module} list-list-module.js, list-list-module.js.map (list-list-module) 5.77 kB  [rendered]
[ng] chunk {main} main.js, main.js.map (main) 32.9 kB [initial] [rendered]
[ng] chunk {polyfills} polyfills.js, polyfills.js.map (polyfills) 237 kB [initial] [rendered]
[ng] chunk {runtime} runtime.js, runtime.js.map (runtime) 8.83 kB [entry] [rendered]
[ng] chunk {styles} styles.js, styles.js.map (styles) 79.4 kB [initial] [rendered]
[ng] chunk {vendor} vendor.js, vendor.js.map (vendor) 4.35 MB [initial] [rendered]
[INFO] ... and 173 additional chunks
[ng] ℹ 「wdm」: Compiled successfully.

#7

This is really interesting.

I tried on a fresh ionic v4 application (using blank template), and after having reinstalled the @ionic/angular package as you just suggested, and I still have the issue (check my screenshot below).

I was thinking that you maybe are using a different IDE than mine, but I just saw on your screenshot that you also use WebStorm.

Then, how does WebStorm perform autocomplete?
It probably uses TypeScript compiler?

I ran “./node_modules/.bin/tsc -v”, and it told me my TypeScript version is 3.1.6.
Do you have the same TypeScript version?

I’m using WebStorm 2018.2.

Thanks, it would be nice to get to the bottom of it!

#8

If you are using Webstorm too I would suggest you to contact the support. They do a really great job and I mean that’s also why you are paying to use the editor and that’s probably the most effective way to solve the issue :wink:

#9

I fixed my issue.

I tried to invalidate the WebStorm cache, without success.

Then I tried to upgrade from WebStorm 2018.2.4 to WebStorm 2018.3.5, and it worked!

So thanks for the help, in the end I was wrong when I said that the way the code is written prevented autocomplete from working. My bad.

#10

Cool, glad to hear it worked out and glad to hear Webstorm fixed bugs in their last versions!