Hi everyone,
I am really new in ionic and I started an application which I want to show a div when button is clicked… e.g. I want to display a custom css loading bar after a button is clicked
I am having this error when I try to call for my function in ionic and for me it really makes no sense.
Thanks in advance! Hope you can help me 
You are supposed to post your code too so that someone trying to help can reproduce the error and understand the problem.
Are you working in ionic 1 or ionic native?
thank you so much for answering
this is home.ts
this is home.html
this is the error that comes up when i press the button
Please don’t post screenshots of code. Post code as text.
Oh, and spell your functions the same in template and controller.
Sorry about that, i corrected the mistake but i am still getting the same error 
Shouldn’t foo() be in your home component, and not your app component?
You try to correct the spelling and check main.js. Or after correcting the spelling and then build using ionic serve again
Hey @Nahin thanks for posting the code but please post the text rather than screenshots as @rapropos mentioned, it helps us to reproduce the problem more easily.
You’ve a very simple problem of scope, the template (html code) you are calling the foo() function from is related only to the HomePage class and you can’t access any methods of other classes just like that from the template just because they are declared in the same file. You’ve two options, either move the foo() function inside the HomePage class itself as @SigmundFroyd suggested. Or, if you need the current structure only, you can instantiate an AppComponent object inside the HomePage class and then call the method on that instance. Like this:
Declare this inside HomePage class scope:
ac: AppComponent = new AppComponent();
and then you can call the method from the html like this:
<button ion-button (click)="ac.foo()">Press</button>
You are the BEST. You can’t imagine how long I have been researching for this problem… That means that every time I create a new class I need to declare inside the HomePage if only want to call it in HomePage and the same for other pages and if I want to call it anywhere in the app declare it on main.ts
Thank you so much 
1 Like
You are most welcome!
You need to first import (bring into scope) any class you wanna use in the place you wanna use it. In this particular case, because the AppComponent is directly accessible from the HomePage (because it’s within the same file) you didn’t have to import it as such. And then to use it, generally you need to declare it first.
NO!
For sharing common code you have other ways (Providers/Services), the main.ts (it’s basically a combination of all the ts code we have in our app) is a generated file and you never should modify it directly.
Remember, Ionic apps are mostly built up of Component classes, Provider/Service classes and other utility classes. So, mostly you’ll be just importing one or the other into the class from where you wanna use em. I’d suggest you to learn about the Ionic app structure from the online tutorials and docs, it’ll help you to properly understand the scope of the code you are writing.
IMHO this is the only option worth considering. Directly referencing the app component from a page makes for spaghetti code, let alone explicitly instantiating it.
1 Like
Yeah surely we should avoid creating spaghetti code, but in this instance the context is totally different. I thought the OP wasn’t able to call a method and was bewildered as to how to access it, so I simply showed him/her the way to bring into scope anything before using it. In that context, there are certainly two options of possibilities. In a fairly complex app, there surely would be code outside of the class block.
Nopes it’s not a Component at all, just that the OP wrongly named it AppComponent, which is not the right thing to do yes. That’s why I’ve suggested him/her to learn the basic structure of ionic apps so that a proper coding style can be developed and coding would seem much friendlier too.
Regarding the spaghetti code, I believe the OP would follow proper coding style after understanding what spaghetti code is in the first place (which’d happen only when s/he knows all the possibilities).
Thanks for bringing the point up though, you are always helpful!
same error… but i have only one class there is no appcomponent then??
Hello,
same failure of what? co.myFunction is not a function?
Then you call from .html something that not exist in .ts. Mostly a typo like fo() instead of foo().
Otherwise post code.
Best regards, anna-liebt
Couple things.
First, why do you have multiple ion-contents? Does that work?
Second, you don’t seem to initialize item.
Third, what’s the exact error message that you’re getting?
everything is just fine…the problem with is that…_co intonextpage() is not a function.
It looks like you have a template defined in your code. What does the entire loginpage.ts look like?
hi
i am having same issue and I created app component object in componenet, it worked but when i add
this.platform.ready().then(() => {
in app component it gives error like Error: Uncaught (in promise): TypeError: Unable to get property ‘ready’ of undefined or null reference
TypeError: Unable to get property ‘ready’ of undefined or null reference
thanks