Build Your First Ionic App with Firebase using AngularFire 7

[@LeighBriody]

Would love to see a video on authentication !

[@LolCrazyMovies]

I was stuck on using query's and finally found the fix myself! You will have to create one or more constraints, which is a where() for example. Then you use a query, in which you pass the collection you want to query and the queryConstraints Example in my code where I used 2 constraints to get orders from a specific date: const ordersRef = collection(this.firestore, this.ORDER_COLLECTION_NAME); const startDateConstraint = where('date', '>=', date1); const endDateConstraint = where('date', '

[@galaxies_dev]

Thanks for sharing your solution!

[@ivanlp4ever]

Thanks Jim, I've spent hours trying to do this.

[@gothicusdarkwoods]

Omg I feel so powerful knowing this is realtime. I always use intervals for checking updates but now, say goodbye to it. Thank you

[@galaxies_dev]

Glad it was helpful!

[@avexperience3632]

Just a quick reminder for whoever gets the error: "Missing or insufficient permissions" You might have to change the read and write permission under the rules tab in firestore database

[@emreaka3965]

I'm familiar with Angular and I also would like to develop mobile applications. That's why I am here! And to be honest, Ionic impressed me. I actually decided to learn Flutter but now, I am a bit confused. The video was great by the way. Thank you.

[@ibrahemdh7]

After one year you learn Ionic or flutter?? And which better?? For me i still learning ionic angular and i think it's better then flutter and

[@asatorftw]

Authentication with best practises for Ionic would be helpful. Cant find much on that.

[@claudevonbrandis4772]

Thank you for the update, a great video as always. can we please get a video on Auth and safe Gaurd with new version 7 :)

[@galaxies_dev]

Yes it's on my list!

[@AhmedKhan-wo5oq]

Thank you for your videos really appreciate it. Can you make an angular fire 7 authentication video?

[@galaxies_dev]

Yes, soon!

[@GoldenMashegot]

that modal breakpoints feature is dope!

[@mmstories0412]

very worth it to subscribe! you really help me a lot! thanks man!

[@galaxies_dev]

Glad I could help Feitan!

[@piyushgamit5222]

Very helpful for me . Thanks

[@galaxies_dev]

Happy to help

[@compaex]

Thank you for angularfire 7.

[@antoismith]

This is a huge help. Thanks!

[@samuelalves2983]

thank you so much for yours videos, you are awesome, could bring videos about authentication and file upload, the angular-fire documentation isn't helping me much 😅

[@galaxies_dev]

Yes sure, we've left out some parts so I'll do another one about that!

[@tonyross2947]

Love, love LOVE it Simon. Thank you so much.

[@galaxies_dev]

Glad you like it Tony!

[@cryptogiorgi]

WOW man i missed this vid ! this is what i needed ! Amazing tutor work Simon Thank you so much for your vids ! i am making a second hand store (peer to peer) with a chat app inside and your videos are so helpful i am coming back to them again and again and i have learned so much from you ! amazing work thank you again ! if you would be so kind and tell me if you already have a video on a chat messenger app with Angular and Firebase , or if you dont have any would you do more videos on the rest functions of Firebase and angular ionic.... ? that would be amazing . i see you cover alot of topics and frameworks clis and stuff like that .... just stating my interest peace out ! keep up the good hard work !

[@plelkes]

When I open modal @24:07 only the buttons are visible:-( code: Title Note Update Delete

[@deanadams5812]

When I connect to angular fire it asks for authentication code. Do you know how or where I can find this?

[@norma6486]

Very useful, thank you have your tutorial video.

[@galaxies_dev]

You are welcome!

[@Constantine..]

Thanks! Helpful video, especially in light of the fact that angularfire developers did not consider it necessary to update the documentation to version 7)). The video could be even more useful if you demonstrated exactly how you searched for this information. If you taught your viewers how to use the documentation, even more so terrible as in angularfire.

[@galaxies_dev]

Thanks for the feedback, agree! I'll see if I can come up with an additional video about all of that.

[@pseudounknow5559]

Would love to see auth stuff

[@galaxies_dev]

Will do!

[@sirgatsen]

@@galaxies_dev Please do, I look forward to that one! Great tutorial as usual!

[@malikhandev]

if you face any error then use: npm i rxfire firebase rxjs --save

[@boyestrada]

By any chance you have the documentation for angular fire 7, I need to check the auth section?

[@galaxies_dev]

I think they only updated the docs to use the /compat mode, but I'll try and come up with something!

[@boyestrada]

@@galaxies_dev I appreciate it!!

[@nyeplozproduction]

hello sir, Iwant to ask how to sort data ascending?

[@andrewbateman2282]

Thanks, good tutorial. It all worked, except the modal breakpoints - I used a cssClass instead. My Cloud Firestore didn't have the Test Mode, had to limit access with a date limit.

[@galaxies_dev]

You need to be on Ionic 6 (or the RC right now) in order to use the modal with breakpoints!

[@musthagmohamed]

I am having the same issue. Ionic CLI : 6.16.1 (/usr/local/lib/node_modules/@ionic/cli) Ionic Framework : @ionic/angular 5.9.1 @angular-devkit/build-angular : 12.1.4 @angular-devkit/schematics : 12.2.13 @angular/cli : 12.1.4 @ionic/angular-toolkit : 4.0.0 Capacitor: Capacitor CLI : 3.3.2 @capacitor/core : 3.3.2 ERROR says: Argument of type '{ component: typeof ModalPage; componentProps: { id: string; }; cssClass: string; breakpoints: number[]; initialBreakpoint: number; }' is not assignable to parameter of type 'ModalOptions'. Object literal may only specify known properties, and 'breakpoints' does not exist in type 'ModalOptions'.ts(2345)

[@nyeplozproduction]

Hello sir how to make query order by? Please answer me🙏🙏

[@celesteomalowete7010]

Great video , thank you . Keep up the good work.

[@galaxies_dev]

Thanks for watching!

[@harshithanm6045]

Hey, thanks man! It helped me😁

[@TheSaceone]

This makes super fast to start a project! There is just one thing that makes it even faster & easier: Kickoff Ionic, of course! :D

[@ExpansionEsmeralda]

Thank you so much:)

[@mexcalgt]

Hi, thank you for sharing this amazing knowledge.... I need your advice, I am getting an ifinite loop of data, all the objects lets say are repeating over and over, do you have any advice based on this tutorial of how to avoid duplicated data. Thank you in advance for taking your time to share your knowledge this way.

[@CamiloMuñoz-y1z]

I've follow the tutorial but I keep geting "ERROR FirebaseError: Expected type 'Query', but it was: a custom wh object" I try so many things to fix it but none has worked.

[@DanielArenas-df5gi]

try to downgrade the angular/fire package to "@angular/fire": "7.0.4", and run npm install --legacy-peer-deps to fix it.

[@mnc12004]

Nice work Simon! Really made understanding the Firebase changes easy to grasp. My first crack at Ionic too... and I kinda like it.. I have couple of Flutter apps in production, but need web functionality, which Flutter is still a bit klunky with. I can see myself taking advantage of the latest Firebase JS and Ionic. Thanks again

[@galaxies_dev]

Glad to hear Michael and cool you find the Ionic way a bit easier than Flutter :)

[@andrewalberti9121]

Thank you so much, your video has been truly helpful. As others mentioned in the comments, could you make a video explaining how to navigate the documentation and get all this information? Btw, to those who might have had the same issue as me when following the video: when invoking the doc function to get a single document from Firestore (12m48s), watch out how to pass its path: `notes/${id}`. I initially used the standard single quote (') and it was not working. The same thing should apply for updating or deleting the document.

[@galaxies_dev]

Yes whenever I use variables in a string I'm using the backticks, it's a template literal!

[@Nurundin]

Great tutorial. can you help us with a latest documentation on Firebase authentication.

[@galaxies_dev]

Yeah will work on something about auth as well!

[@jannemanhuman4237]

Yes, I am struggling to find documentation regarding the new Authentication features in Angularfire 7.

[@emreaka3965]

18:49 I also felt like this when I used firebase the first time a few days ago. :D

[@galaxies_dev]

true :D

[@dustnoiseplays]

Thanks for the tutorial!

[@galaxies_dev]

No problem!

[@muzingayemoyo9607]

thanks for the video , do you a link to the full documentation

[@codingtutorials9020]

how to filter data by name?

[@garius3559]

good morning please need help on angular and angular fire 7. I am creating an application but I have a problem I want to recover the data of a document in firetore from its id, I recover well the id but not its data and in the console of my browser I am told that my post variable is undefined I don't know what to do. help me sorry

[@imsergiohere]

Offline mode?

[@RH-ms5ui]

can we work this model with firebase offline mode?

[@DummySussy]

great tutorial! btw i have applied your get collections method to my codes and i got a problem. it works and delivers to console but doesnt load to screen sometimes ( the data from *ngFor doesnt show so i have to do smth like minimize the browser and then it'd shows right away lol) . from what ive searched it might be bcs of the async things. any thoughts? thanks!

[@robsonlinhares]

very nice!! Do you have any video with firebase authentication with agularfire7?

[@galaxies_dev]

Coming soon!

[@alejandropascolo3024]

how can queries with orderBy with af7 ??

[@alanbique2548]

thats awesome

[@JoseMartinez1486]

Thank you X 1000, excellent tutorial, it helped me a lot. I have a question: is it possible to combine firestore (using data persistence) with an app that is already using sqlite?

[@galaxies_dev]

I haven't tried yet :/

[@JoseMartinez1486]

@@galaxies_dev ok, well, I'll try something and if I get anything I'll let you know.

[@JoseMartinez1486]

@@galaxies_dev thanks for replying anyway.

[@muhamadhilmymunawar3305]

help me eror in app module.ts and in environments

[@MatheusCabraldosSantos]

I was having problems using copat layer of angularfire on ios. Has anyone been through this too?

[@jitendrakb8five]

kindly make a video on Ionic 6 Capacitor UPI Integration

[@galaxies_dev]

Is that a special Android payment service?

[@jitendrakb8five]

​@@galaxies_dev there is no video related to this topic kindly make and help me. payment via UPI like phonepe, google pay, Paytm ... which are installed on the device.

[@storyversestories]

bro, make a complete ionic app development course with a shopping app project

[@galaxies_dev]

Would love to hear your thoughts about the content, what do you think should be covered?

[@storyversestories]

@@galaxies_dev I am a learner, please make all topics related to shopping app. like - 1 . Login/Registration 2 . Wishlist 3 . Product filters and sorting 4 . product details page 5 . Add to cart 6 . Shipping Options 7 . Payment methods 8 . Order Invoice 9 . Checking Shipping Status 10 . Showing Recently viewed products in home screen. --😅 i know i asked lot of topics but, i really want to learn them. hope you'll make complete tutorial in it. ❤️ from India

[@hermanfabio457]

the breakpoints do not apply in angular 13

[@galaxies_dev]

They do, you need to be on Ionic v6 for them to be available!

[@time-lapse259]

Not sure if it was just me but, even with 0.75 speed I had to pause the video to understand what you are doing :|

[@sagarbakraniya377]

First