Angular 8 Firebase tutorial: Integrate Firebase into Angular 8 App with @angular/fire

angular-8-firebase-tutorial-integrate-angular-fire-feature-image

Firebase is a mobile and web application development platform developed by Google. We can build our apps very fast, without making complex back-end system. It helps to scale automatically, for even the largest apps. In this Angular 8 Firebase tutorial, we’re gonna integrate Firebase into Angular 8 App with @angular/fire module (official library for Firebase and Angular).

Related Posts:
Angular 8 Firebase Realtime Database CRUD operations with @angular/fire
Angular 8 Firestore tutorial with CRUD application example – @angular/fire
Angular 8 – Upload/Display/Delete files to/from Firebase Storage using @angular/fire

Technology

– Angular 8
– @angular/fire 5.1.2
– firebase 5.9.4

Instructional Video

Integrate Firebase into Angular 8 App

Step 1: Set up the Firebase Project

Go to Firebase Console, login with your Google Account, then click on Add Project.

Enter Project name, set Project Id and select Country/Region:

angular-8-firebase-tutorial-integrate-angular-fire-create-project

Press CREATE PROJECT, browser turns into:

angular-8-firebase-tutorial-integrate-angular-fire-add-app

Click on Web App, a Popup will be shown:

angular-8-firebase-tutorial-integrate-angular-fire-popup

Save the information for later usage.

Choose Database in the left (list of Firebase features) -> Realtime Database -> Tab RULES, then change .read and .write values to true:

angular-8-firebase-tutorial-integrate-angular-fire-config-firebase-database

Step 2: Install @angular/fire and firebase

Run command:
npm install firebase @angular/fire --save

Step 3: Add Firebase config to environments variable

Open /src/environments/environment.ts, add your Firebase configuration that we have saved when Popup window was shown:

Step 4: Setup @NgModule

Open /src/app/app.module.ts, import AngularFireModule and other @angular/fire modules if necessary (we use Firebase Database, for example).

Don’t forget to specify Firebase configuration with AngularFireModule.initializeApp(firebaseConfig):

Step 5: Use @angular/fire module in Angular component

Open /src/app/app.component.ts:

/src/app/app.component.html:

Check Result

– Run Angular project with command: npm start or ng serve.
– Open browser with url http://localhost:4200/, enter Item content.
Item data displays immediately:

angular-8-firebase-tutorial-integrate-angular-fire-demo

Firebase Console Database:

angular-8-firebase-tutorial-integrate-angular-fire-console-result

Conclusion

Now we have known how to create a Firebase Project, how to integrate that Firebase Project into Angular Application, we also look at the idea to use @angular/fire module to work with Firebase in simple way.

Happy learning! See you later.

By grokonez | April 17, 2019.



Related Posts


Got Something To Say:

Your email address will not be published. Required fields are marked *

*