How to Connect Firebase to Angular Project - Do It Right

[@MonsterlessonsAcademy]

WATCH NEXT: Angular Unit Testing Course - All That You Need to Know About Testing - kzbin.info/www/bejne/mKecq5KLm7ikna8si=WVzOWtdQUZWEbqsz

[@alexanderbell7736]

Thank you for this great tutorial. I found it really helpful. With all the updates to Angular recently it's great to find something that's up to date with all the latest features. Keep the firebase videos coming!

[@MonsterlessonsAcademy]

Glad it was helpful!

[@umahesa5855]

this is a great tutorial! can you please continue creating Login and CRUD projects in Angluar and Firebase applications

[@MonsterlessonsAcademy]

I will add it to the list of ideas

[@hamza201183]

It's great if you can provide more videos about firebase. Like authentication etc.

[@MonsterlessonsAcademy]

I will ad it to the list of ideas

[@hamza201183]

@@MonsterlessonsAcademy It can also be a course idea :) What I would love to practice too is this angular oauth2/oidc library for authentication and authorization. But only if you are interested in this topic.

[@marandambuelo]

​@@MonsterlessonsAcademyand also do topics like sessions.

[@drzewko3871]

Can you please make a video about firebase storage with angular? Can't find anything up-to date and your tutorials were always clear and easy to follow.

[@MonsterlessonsAcademy]

I will add it to the list of ideas

[@hamza201183]

You rock Oleksandr 👍 Thank you very much. It's interesting that you have two services for the Todo model only. One for state (signals) and one for firebase. I think I would have implemented one service for both cases: Call the API and update the signals inside subscribe(). I hope there is no problem with this approach? Many thanks again

[@MonsterlessonsAcademy]

No problem. Just do how you like.

[@hamza201183]

@@MonsterlessonsAcademy Ok Thanks!

[@nikk1019]

Separation of concerns i guess

[@Sins-w4y]

благодарю за видео, самому было трудно разобраться, кстати, как я понял в новой версии angular importProvidersFrom() лишняя

[@witut3056]

Thank you for this tutorial :). It helped me a lot. Unfortunately I dont have any idea how can I enable offline mode using this approach. Do someone know how to do it properly?

[@MonsterlessonsAcademy]

I didn't use that functionality

[@emnz1003]

is it safe to show the apiKey of your firebase project? I mean in documentation they tell that you can simply copy paste it, but for example if your code is open source is it really safe?

[@MonsterlessonsAcademy]

No it's not safe. I removed the project after recording the video. You need to use environment variables (.env) if you push your repo to public folder.

[@emnz1003]

@@MonsterlessonsAcademy got it, thank you a lot. And another doubt that i have is: if my key is in the index.html, isn't that visible to the user? I mean, when I go on an Angular website, the index.html is visible to me, isn't it? (I don't know how to access it but i guess in some way it is visible to the user)

[@someoneunknown6894]

@@emnz1003 Yep, it's visible. You can view all the html on the page with devtools (by pressing f12)

[@youngoose7]

where is the previous todo app project to follow this course? cannot find it.

[@MonsterlessonsAcademy]

Here you go kzbin.info/www/bejne/q6q3dGOJoNupotUsi=spWpGQOOvHS0LcsO

[@youngoose7]

@@MonsterlessonsAcademy thanks for the quick response! appreciate

[@BannisterNicholas]

The confusion I'm having is disconnecting you service from the firebase service. Do you have a video where you connect firebase from scratch without the existing service?

[@MonsterlessonsAcademy]

I don't understand your question. You can write the same code in the component without additional service if you want.

[@BannisterNicholas]

@@MonsterlessonsAcademy You have an existing toDoService from the previous video, I don't have any of that, I'm starting from a blank project and trying to only include my own FirebaseService. But I keep trying to understand what your doing, and you have a service in your component, which I don't understand.

[@nikk1019]

can i use SQL Server database in firebase?

[@MonsterlessonsAcademy]

It is not possible to use Firebase in this way. Firebase is a real-time object store. It is not a SQL database and is not intended to be a replacement for one. It completely lacks mechanisms such as JOINs, WHERE query filters, foreign keys, and other tools relational databases all provide.

[@liga_frontend]

Где увидеть API для firebase под angular 17? Where can I see the API for firebase under angular 17?

[@MonsterlessonsAcademy]

Nowhere. Documentation is not a thing in Firebase. You can find some pieces here but just basics. github.com/angular/angularfire/blob/master/docs/firestore.md#cloud-firestore

[@liga_frontend]

🥲@@MonsterlessonsAcademy

[@levaninatenadze9644]

you need condition text !== '' " when addTodo otherwise its add empty, no?

[@MonsterlessonsAcademy]

Yeap

[@levaninatenadze9644]

@@MonsterlessonsAcademy love your channel bro, can u create some wrapper component for example angular material grid wrapper or something like that? It would be great ❤️

[@godlypotato4195]

Dude, I love your videos, but I have to ask. What the hell are those thumbnails of yours?

[@MonsterlessonsAcademy]

What is with them?

[@godlypotato4195]

@@MonsterlessonsAcademy They are the exact opposite of the energy you give out and the content of the video. I get that they are made to be more clickbaity, but I was actually discouraged from clicking on your videos at the beginning, because the thumbnail looks like a clickbait, usually from videos with 0 content. I stayed because, its actually good content and the headline.

[@MonsterlessonsAcademy]

@@godlypotato4195 I agree with you and you are not the first person to mention this. I will remove this specific thumbnail from future videos. Thanks for the feedback

[@omarabdelhameed1066]

U r a king ❤

[@MonsterlessonsAcademy]

Thank you!

[@ayushpandit443]

Can you create a video on getting and setting data with firebase realtime database with angular as there is no proper video about same

[@MonsterlessonsAcademy]

I will add it to the list of the ideas

[@manojht8036]

Please make video on how to host on firebase for both csr and ssr mode. please

[@MonsterlessonsAcademy]

I will add it to the list of ideas

[@manojht8036]

@@MonsterlessonsAcademy thank you ❤️

[@christernoey1954]

Thanks for this excellent tutorial. Please tell me why you have so many subscribe() calls, but no unsubscribe() calls. Are they unnecessary?

[@MonsterlessonsAcademy]

It depends. If you want to be on the safe side just unsubscribe everywhere. Here we always have promises which means subscribe will be also called only once.

[@christernoey1954]

Thanks.@@MonsterlessonsAcademy

[@Porkupine69]

is inject(service) the same as constructor(service: Service) I haven't heard of inject before.

[@MonsterlessonsAcademy]

Then you need to check more video on the channel :) kzbin.info/www/bejne/iX6pmaaJhtume8Usi=-zn2GY_ElnpuRWLI

[@hamza201183]

Just sent you an E-Mail btw

[@MonsterlessonsAcademy]

Thank you, I responded.

[@kevinharis7278]

what your version of angular and @angular/fire ??

[@MonsterlessonsAcademy]

17

[@juliusfrancotaha2777]

@@MonsterlessonsAcademy is this gonna work on v18?