How to connect angular and firebase database | Angular firebase tutorial | part 1

hello everyone welcome to my youtube channel cool closing so today we are going to see how we can connect our angular application with the firebase database before going further if you are new here then please subscribe to our youtube channel now without wasting too much time let's get started firstly we will create angular application for that we'll open command prompt and then we'll type command engineer angular firebase cloud so it will create a project name with the firebase angular card we will use the routing module here so that's why we'll type yes there and we'll use simple css and it will create our project once project is ready we'll go inside our project directory cd firebase angular okay and we'll open it in visual studio okay you can see our project has opened here inside src app directory you can see all these files are there we will create a new terminal here and we'll type command and user it will build our project and it will run our project on port 4.0 okay now uh we'll go inside our browser and we search for the firebase okay we'll go with the first result here you need to uh login with your gmail i already logged in now click on get started button it will redirect you to the console window okay firstly we'll create one new project okay and we'll continue we don't want this analytics for this project okay then we just create a project and it will create a firebase project inside which will get the authentication and the database okay our project is ready so we are on the home page of the project here you can see inside settings we will go in project setting and we'll add our application here for that we'll register our app once the registration is complete it will generate a code okay you can see here the code has generated now uh in our visual studio we'll add command nj add angular slash fire this command will download the firebase for us and once it is complete it will be asking you uh some functionalities which you want to implement inside this so we'll select the authentication and then we'll select the firestore for storing the data and yeah that's it and we'll hit enter and it will create the project for us okay as you can see it is installing and it is completed now so uh it is connected with our application we will copy this code and we'll go inside our environment.tfs file and we'll paste it here and we'll change some naming conventions like we'll remove that const variable and we change the name firebase we'll remove semicolon and that equal to sinus okay that's it and we'll close this file and we'll go inside app.module.ts5 and we'll import angularfire module from angularfire compact okay and inside the import section we'll use angularfire module dot initialize app and in bracket will pass that environment.firebase okay that's it that's it for the video thank you for watching the video guys if you like the video please like share and subscribe and don't forget to comment below if you have any doubts okay thank you see you in the next video till then bye

Channel: Code Logic

Views: 68,316

Keywords: firebase, angular, angular firebase, firebase database, get data from firebase realtime database angular, firebase realtime database, connect firebase and angular 2, angular 4, angular 9 crud with firebase and firestore database, firebase tutorial, angular 6 firebase database, angular 2, angular firebase tutorial, crud application in angular firebase, angular firebase authentication, how to firebase database, add data to firebase, firebase and angular, tutorial

Id: O0uVYhRE850

Length: 5min 49sec (349 seconds)

Published: Sat Jan 29 2022