Hi Simon, Thanks for your videos, they help me a lot !!!. I have a doubt that I do not know how to solve, I explain: I need to get the data from a Firbase field other than the ID. How can I do it?? Thanks a lot.
Hi Simon. I have a question. is it possible to detect a change on the live database? i am using your same code and i can see the live change when i add an item to my array or when i remove. what i am trying to achieve is to show a toast every time a new item is added. how can this be done? i tried to use use if function inside of.subscribe(res => { but no can not figure it out. any ideas?
You can add a pipe() block to snapshotChanges of your data, which is triggered when there is new data! Check out the docs here: github.com/angular/angularfire/blob/master/docs/firestore/collections.md
Hi @Simon Grimm, I'm having this problem at todo-details.page.ts "Property 'subscribe' does not exist on type '() => Observable'." at the line -this.todoService.getTodo(this.todoId).subscribe(res =>- ..... I have searched online for sources but still can't find any solution.
hi Simon. can you kindly help me out. i managed to connect my app to firebase and i can write to the database but when its time to read from the database, only the person who writes to the database can read. I created a second user but cannot see the data that the first user created. the database rules are public. kindly help me out. thank you.
Perhaps you have written the data to a node that starts with the ID of a user? And the other user will have a different ID then. Try to write it at the root level so both can easily see it!
I have a question and i really hope that you could help me. I have to do an app that is going to handle users, push notifications, storage and stuff like this with firebase. Is it better to use the web implementation of firebase or use the @ionic/native one? It would be really helpful if you could reply me, thank you a lot. PS: It would be great if i could manage to keep track of user session even after closing the app and i have wonderings if it is possible with web implementation. Thank you a lot!
In general I have always used AngularFire so the web implementation! Do whatever when the app is closed is always a tricky topic, perhaps you could simply react to the app close vent to send some final data?
Hello Grimm, I am new to this Ionic Application. I just installed ionic 5(Latest Version) and firebase( latest version)... couldn't work out for me. There are no sample examples on Ionic 5+ firebase (Videos or Docs) to get it done with a new project. Seems there are more dependencies and installations that I expected than Ionic 4. Would you guide us for any Viodes, Docs, Samples on Ionic 5 with Firebase combination... That helps me a lot
Thanks for sharing yet another awesome tutorial Simon. Always great stuff from you. can you show how to add a search function to search through the array and also a sort function for example to sort items in array by title. Thanks
Hi Simon, First : thank you for you code and explanations. It was very helpfully for my firestore understanding. but I've just one last bug concerning the code. Where can I contact you for precision please ? Thank you per advance
You can send me an email to saimon@devdactic.com, but I get a lot of emails so it might take time. Otherwise, you can ask inside the community of the Ionic Academy where I hang around daily.
Hi, I am new to IONIC and angular. So to learn I did exactly as you said. Didnt even change a variable name. But when i run ionic serve and the browser loads up. It gives a "Cannot GET /" error. What do you think caused this?
@@galaxies_dev i did. I dont get it tho. Here is this thing too. I started a new project and then ran it to see if it works. I get the same error. Could it be something wrong with the dependencies or sth?
Great tutorial, very clear and concise.. how about taking it a step further and adding user auth, so Todo collection is limited to the signed in user, not a 'global' collection?
I have a problem with the observable in todo_list.service.ts, Type 'DocumentChangeAction[]' is not assignable to type 'Item[]' who can help me with my problem?
Hey Simon! Thanks for the great tutorial. Quick question: When I navigate from my toDo list and then navigate back to it, nothing displays. However, if I refresh my browser on the page, the list populates. The same occurs when adding and updating toDos; I am able to load the todoDetails page and add / update, but when redirected to the todo list all that displays is the skeleton list. Any ideas what might be going on here? I don't have any errors logging in my browser or IDE and I haven't been able to find anything about this on Google. Thanks! Anybody with any ideas, your thoughts are welcome! Thanks again!
I am experiencing the same problem. Did you ever find a fix? UPDATE: I got this fixed. Seems like you need to unsubscribe using the ngOnDestroy() function in home.ts (see code below) private subscription; ngOnInit() { this.subscription = this.todoService.getTodos().subscribe(res => { this.todos = res; }); } ngOnDestroy() { this.subscription.unsubscribe(); }
@@meherenow729 Hi John, I had the same issue as you and implemented the "ngOnDestroy" you recommended (thanks for the fix) but am getting duplicate data when adding and updating ToDo list items. E.G. List page: TODO-A TODO-B Update - TODO-A to TODO-A.1 - Go Back to List Page (this.nav.goBack) List page: TODO-A.1 TODO-B TODO-A TODO-B I'm wondering if you are experiencing the same behavior? Thanks in advance. Edit: The duplicates (Not clearing out ToDo List) are only happening when editing a list item.
Simon, a deep question: What do you think about using Firebase as the "database" (backend) for an app that might reach millions of users? Would be just users interacting with users, kinda like WhatsApp. Would it be feasible? Would it be reliable?
Firebase wasn't created for small todo list apps and hello world apps - it's a very reliable database used by bigger startups as well! So yes, it is a good choice but you are a bit more reliable to keeping an eye on structuring your data according to their scheme to make everything performant.
i m getting error ERROR in src/app/pages/todo-details/todo-details.page.ts(52,25): error TS2559: Type '"home"' has no properties in common with type 'AnimationOptions'.
im having a weird problem and was wondering if it happened to anyone else. everything works fine but when i suscribe to more than one collection observable in the same page the suscribtion returns undefined even if there are documents in that collection
Hey, man quick question. I'm sorry if you guys think this is a dumb question. Why are you using Ionic 4? I saw videos later than this one, they're using Ionic 5.
There is no such thing as Ionic 5 yet. The current stable version is Ionic 3.x, and Ionic 4 is in beta but close to release so it's the latest stuff in here :)
Good Tutorial, but it's better to use router observables than route.snapshot because if params change in route the ngOnInit wouldn't be notified of the new route params changes. I would of done this.route.params.subscribe(params => this.todoId = params['id']); that way if a param in route change you still be notified about the new changes.
Are there any ngx-translate for ionic 4 with side menu example. I have tried this but not manage to get the translation work through all slides and side menu. This is maybe a good one to make a tutorial for. I think there are many who going to look at it because i have looked in many site and there is not so good explains on any sites. even ionic 4 doc poor. Your Videos is Superb, You explain so good!
Sure, Firebase works not only with Ionic v4! But in then case the markup inside your HTML and the routing inside your Ionic app will be different. But I'm sure there's another video for exactly this on this channel :D
code: "app/no-app" message: "Firebase: No Firebase App '[DEFAULT]' has been created - call Firebase App.initializeApp() (app/no-app)." stack: "[DEFAULT]: Firebase: No Firebase App '[DEFAULT]' has been created - call Firebase App.initializeApp() (app/no-app).↵ at error (localhost:8100/vend I got this ERROR please help me why I got this error... i follow same code in ionic 4..
![BLACK BAG - Official Trailer [HD] - Only in Theaters March 14](http://i.ytimg.com/vi/Du0Xp8WX_7I/mqdefault.jpg)
Simon, you are awesome!
I'm not used to add comments here in RUclips but this worth it. You are saving my Finals project.
Thank you very much!
Wow thanks a lot!!
Great video !! Thanks Simon !!
In my version of ionic I had to use "message" instead of "content" as part of the loadingController. So please be aware.
Yes they changed it in the final release for v4!
7:54 a.payload.doc.id say "Property 'id' does not exist on type 'QueryDocumentSnapshot" helppppp
:(
Thanks! it's there any new tutorial for ionic 4. Other apps that incude maps/road and navigation?
There are 2 new updates:
instead of ( content )👉 ( message )
instead of ( nav.goBack) 👉 ( nav.navigateBack('home') )
Thanks for the video.
thanks
Hi Simon,
Thanks for your videos, they help me a lot !!!.
I have a doubt that I do not know how to solve, I explain: I need to get the data from a Firbase field other than the ID. How can I do it??
Thanks a lot.
unnecessary good tutorial, clear explanation and well-structured flow, thanks a lot!
Loading Controller now is 'message' property, not 'content'
Hi Simon. I have a question. is it possible to detect a change on the live database? i am using your same code and i can see the live change when i add an item to my array or when i remove. what i am trying to achieve is to show a toast every time a new item is added. how can this be done? i tried to use use if function inside of.subscribe(res => { but no can not figure it out. any ideas?
You can add a pipe() block to snapshotChanges of your data, which is triggered when there is new data! Check out the docs here: github.com/angular/angularfire/blob/master/docs/firestore/collections.md
Finally I got what I actually looking for... thank you sir !
the way you explain bro love it bro with bit spice of fun stuff , even one can see the long tutorial like ioonic 4 intro great stuff bro
Thanks mate, this really means a lot to me!
Hi @Simon Grimm, I'm having this problem at todo-details.page.ts "Property 'subscribe' does not exist on type '() => Observable'." at the line -this.todoService.getTodo(this.todoId).subscribe(res =>- ..... I have searched online for sources but still can't find any solution.
Then your getTodo() does not simply return an Observable but something else!
hi Simon. can you kindly help me out. i managed to connect my app to firebase and i can write to the database but when its time to read from the database, only the person who writes to the database can read. I created a second user but cannot see the data that the first user created. the database rules are public. kindly help me out. thank you.
Perhaps you have written the data to a node that starts with the ID of a user? And the other user will have a different ID then. Try to write it at the root level so both can easily see it!
@@galaxies_dev ok thank you.will give it a try.
I have a question and i really hope that you could help me. I have to do an app that is going to handle users, push notifications, storage and stuff like this with firebase. Is it better to use the web implementation of firebase or use the @ionic/native one? It would be really helpful if you could reply me, thank you a lot.
PS: It would be great if i could manage to keep track of user session even after closing the app and i have wonderings if it is possible with web implementation. Thank you a lot!
In general I have always used AngularFire so the web implementation! Do whatever when the app is closed is always a tricky topic, perhaps you could simply react to the app close vent to send some final data?
Hello Grimm, I am new to this Ionic Application. I just installed ionic 5(Latest Version) and firebase( latest version)... couldn't work out for me. There are no sample examples on Ionic 5+ firebase (Videos or Docs) to get it done with a new project.
Seems there are more dependencies and installations that I expected than Ionic 4. Would you guide us for any Viodes, Docs, Samples on Ionic 5 with Firebase combination... That helps me a lot
There is no Ionic 5, only the CLI might be at that version but it's called Ionic 4!
Hey, Simon. thanks for the tutorial. but i want to ask you something & this is for my project, how to display all firebase value to ion-select? please
Hey Muhammad you can get a list of all values and then assign that array as the ngModel of your ion-select!
@@galaxies_dev please give me an example for it. please please.
Thanks for sharing yet another awesome tutorial Simon. Always great stuff from you. can you show how to add a search function to search through the array and also a sort function for example to sort items in array by title. Thanks
Will try to work on some basic stuff, thanks!
sir how to bind 1 todo and sended by using ionic sms .
If I want the value "createAt" in my db to be unique, how can I do it?
thanks
Simon Grimm i really need your help about how to show only one todo in a html page
Great tutorial. Very clear e objective. Helped me a lot, thanks
Awesome tutorial. It's very useful for me. Many thanks.
Hi Simon,
First : thank you for you code and explanations. It was very helpfully for my firestore understanding. but I've just one last bug concerning the code.
Where can I contact you for precision please ?
Thank you per advance
You can send me an email to saimon@devdactic.com, but I get a lot of emails so it might take time. Otherwise, you can ask inside the community of the Ionic Academy where I hang around daily.
Brilliant tutorial!
Hi, I am new to IONIC and angular. So to learn I did exactly as you said. Didnt even change a variable name. But when i run ionic serve and the browser loads up. It gives a "Cannot GET /" error. What do you think caused this?
You should open up the developer console and check if there is any error log!
@@galaxies_dev i did. I dont get it tho. Here is this thing too. I started a new project and then ran it to see if it works. I get the same error. Could it be something wrong with the dependencies or sth?
Could there be a reason why my home requires to refresh after adding data?
update and delete works fine though..
Normally if you use the AngularFire list the data should update automatically!
Good tutorial. What about how to sort the todo list by createdAt?
Thanks simon, very good job on ionic👍
i stuck in saving todo message, it not proceed to list page
Great tutorial, very clear and concise.. how about taking it a step further and adding user auth, so Todo collection is limited to the signed in user, not a 'global' collection?
Yeah I think we could do a little Firebase Auth tutorial soon :)
I have a problem with the observable in todo_list.service.ts,
Type 'DocumentChangeAction[]' is not assignable to type 'Item[]'
who can help me with my problem?
Hey Simon! Thanks for the great tutorial. Quick question: When I navigate from my toDo list and then navigate back to it, nothing displays. However, if I refresh my browser on the page, the list populates. The same occurs when adding and updating toDos; I am able to load the todoDetails page and add / update, but when redirected to the todo list all that displays is the skeleton list. Any ideas what might be going on here? I don't have any errors logging in my browser or IDE and I haven't been able to find anything about this on Google. Thanks! Anybody with any ideas, your thoughts are welcome! Thanks again!
Hmm that sounds very strange like the realtime socket connection between your app and Firebase is not working and the data is only loaded once?
I am experiencing the same problem. Did you ever find a fix?
UPDATE: I got this fixed. Seems like you need to unsubscribe using the ngOnDestroy() function in home.ts (see code below)
private subscription;
ngOnInit() {
this.subscription = this.todoService.getTodos().subscribe(res => {
this.todos = res;
});
}
ngOnDestroy() {
this.subscription.unsubscribe();
}
@@meherenow729 Hi John, I had the same issue as you and implemented the "ngOnDestroy" you recommended (thanks for the fix) but am getting duplicate data when adding and updating ToDo list items.
E.G.
List page:
TODO-A
TODO-B
Update
- TODO-A to TODO-A.1
- Go Back to List Page (this.nav.goBack)
List page:
TODO-A.1
TODO-B
TODO-A
TODO-B
I'm wondering if you are experiencing the same behavior?
Thanks in advance.
Edit: The duplicates (Not clearing out ToDo List) are only happening when editing a list item.
Hi bro, Can you post ionic4/angular8 firebase performance testing tutorial
Simon, a deep question:
What do you think about using Firebase as the "database" (backend) for an app that might reach millions of users?
Would be just users interacting with users, kinda like WhatsApp. Would it be feasible? Would it be reliable?
Firebase wasn't created for small todo list apps and hello world apps - it's a very reliable database used by bigger startups as well! So yes, it is a good choice but you are a bit more reliable to keeping an eye on structuring your data according to their scheme to make everything performant.
Excellent video... Nice work!!!
Thanks Leonardo!
I have problem with loadingController .Its telling 'content' does not exist in type 'LoadingOptions
I think the API changed and it's now: "message" instead of content
Well explained !!!!
sir how to get sub collection please send query sir
i m getting error ERROR in src/app/pages/todo-details/todo-details.page.ts(52,25): error TS2559: Type '"home"' has no properties in common with type 'AnimationOptions'.
Hmm what's the full code of that line?
Hi,@@galaxies_dev this.nav.goBack ('home'); "Type '"home"' has no properties in common with type 'AnimationOptions'."
@Mccom Studio Tank You Very much
Hey Grimm, I'm new to Ionic. This is a good tutorial. I have one quiz, Is it possible to sort by date? how to do it. Thanks
You can query the data using AngularFire, there's also an example on how to sort by date in their Github!
Is there any way to do reset password in ionic app itself using Firebase?
You can use the function from AngularFire provided for resetting the PW, but this will trigger an email to the user first!
@@galaxies_dev
Thanks
Great stuff Simon..could you please make video on how can we use firebase remote config on ionic!
Hey Sanjay, interesting topic, actually just checked it out. Not sure how it could work with Ionic but I'll take a look at it.
hey simon, thanks for the video, but i only can remove the list just for one time, after that, it can't removed anymore
The list or one item? Maybe there is a problem with your logic, check if you have messed up with the index or something there!
@@galaxies_dev the item, when it removed, the other's can't. i think from the ionic's component
im having a weird problem and was wondering if it happened to anyone else. everything works fine but when i suscribe to more than one collection observable in the same page the suscribtion returns undefined even if there are documents in that collection
Never heard of that error, normally that shouldn't be a problem :/
So interesting! thank you very much for your knowledge!!
Can I use this method for ionic 3 app?
Sure in general Firebase works fine with v3 as well!
¿How can using this example with RealTime Database?
Please make 1 that include login function and link the todos to own users
Thanks for the recommendation!
Hey, man quick question. I'm sorry if you guys think this is a dumb question. Why are you using Ionic 4? I saw videos later than this one, they're using Ionic 5.
There is no such thing as Ionic 5 yet. The current stable version is Ionic 3.x, and Ionic 4 is in beta but close to release so it's the latest stuff in here :)
Thank you for your reply
Good Tutorial, but it's better to use router observables than route.snapshot because if params change in route the ngOnInit wouldn't be notified of the new route params changes. I would of done this.route.params.subscribe(params => this.todoId = params['id']); that way if a param in route change you still be notified about the new changes.
Are there any ngx-translate for ionic 4 with side menu example.
I have tried this but not manage to get the translation work through all slides and side menu.
This is maybe a good one to make a tutorial for. I think there are many who going to look at it because i have looked in many site and there is not so good explains on any sites. even ionic 4 doc poor.
Your Videos is Superb, You explain so good!
Yes, ngx translate is on my list to cover soon. Thanks for bringing this up again!
can you upload the complete project? thanks!
Angularfirestore at providers and not at import... right? (or saying stupid thing)
The module needs to be inside the imports, I don't think you have to add it to providers additionally!
can i use ionic 3 for this?
Sure, Firebase works not only with Ionic v4! But in then case the markup inside your HTML and the routing inside your Ionic app will be different. But I'm sure there's another video for exactly this on this channel :D
Amazing
How can i display the collection $key ??
Very nice, thx!
Thanks
thank you very much sir!
i like your glasses
code: "app/no-app"
message: "Firebase: No Firebase App '[DEFAULT]' has been created - call Firebase App.initializeApp() (app/no-app)."
stack: "[DEFAULT]: Firebase: No Firebase App '[DEFAULT]' has been created - call Firebase App.initializeApp() (app/no-app).↵ at error (localhost:8100/vend
I got this ERROR please help me why I got this error... i follow same code in ionic 4..
Hmm sounds strange, have you created a Firebase app and added all the configuration information?
Hi
How much u charge for an app to build and on which basis u should charge.
Please reply fast.
you in germany??
Yes I am :)
hello, good video
a question, can you also do the same with images or can only be done with data such as text and number?.
google translate xd
hahahahahah dude your videos are better with you in the picture!:p I can feel the interaction! Keep up the good work!
- Ionic lover
Thanks Marios, glad someone enjoys seeing me down there :D
cool
this don't work on platform android, only browser platform
Why should it not work?
@@galaxies_dev Because the configuration is different on android platform
Have you tried using beta.ionicframework.com/docs/native/firebase-authentication/ ?
No, I think the package only makes sense if you need phone number authentication for iOS, right? Have you used it before?
@@galaxies_dev no, i can't get enough reference about the plugin.. So, i'm still using angularfire right now.. thanks for your tutorial :)
It is very complicated like everything else
this.nav.navigateBack('home');
github.com/nigo173/devdacticFire