Angular 8 Firebase tutorial: Integrate Firebase into Angular 8 App with @angular/fire
Tags: angular8, firebase, angularfire
Published: 2021-04-11 15:35:08

https://ozenero.com/angular-8-firebase-tutorial-integrate-firebase-angular-8-app-angular-fire

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

<strong><a href="https://ozenero.com/tag/firebase">Firebase</a></strong> is a mobile and web application development platform developed by <strong>Google</strong>. 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 <a href="https://ozenero.com/angular-tutorial">Angular</a> 8 Firebase tutorial, we're gonna integrate <strong>Firebase</strong> into <strong>Angular 8 App</strong> with <code>@angular/fire</code> module (official library for Firebase and Angular).

Related Posts:
- <a href="https://ozenero.com/frontend/angular/angular-8-firebase-tutorial-crud-operations-angular-fire-example">Angular 8 Firebase Realtime Database CRUD operations with @angular/fire</a>
- <a href="https://ozenero.com/frontend/angular/angular-8-firestore-tutorial-crud-examples-angularfire">Angular 8 Firestore tutorial with CRUD application example – @angular/fire</a>
- <a href="https://ozenero.com/frontend/upload-display-delete-files-angular-8-firebase-storage-angular-fire">Angular 8 – Upload/Display/Delete files to/from Firebase Storage using @angular/fire</a>

<!--more-->
<h2>Technology</h2>
- Angular 8
- @angular/fire 5.1.2
- firebase 5.9.4
<h2>Instructional Video</h2>
<iframe width="853" height="480" src="https://www.youtube.com/embed/6AX-fhx59Hg?rel=0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>

<h2>Integrate Firebase into Angular 8 App</h2>
<h3>Step 1: Set up the Firebase Project</h3>
Go to <a href="https://console.firebase.google.com" rel="nofollow">Firebase Console</a>, login with your Google Account, then click on <strong>Add Project</strong>.

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

<img src="https://ozenero.com/wp-content/uploads/2019/04/angular-8-firebase-tutorial-integrate-angular-fire-create-project.png" alt="angular-8-firebase-tutorial-integrate-angular-fire-create-project" width="514" height="702" class="alignnone size-full wp-image-17749" />

Press <strong>CREATE PROJECT</strong>, browser turns into:

<img src="https://ozenero.com/wp-content/uploads/2019/04/angular-8-firebase-tutorial-integrate-angular-fire-add-app.png" alt="angular-8-firebase-tutorial-integrate-angular-fire-add-app" width="424" height="442" class="alignnone size-full wp-image-17753" />

Click on <strong>Web App</strong>, a Popup will be shown:

<img src="https://ozenero.com/wp-content/uploads/2019/04/angular-8-firebase-tutorial-integrate-angular-fire-popup.png" alt="angular-8-firebase-tutorial-integrate-angular-fire-popup" width="663" height="403" class="alignnone size-full wp-image-17756" />

Save the information for later usage.

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

<img src="https://ozenero.com/wp-content/uploads/2019/04/angular-8-firebase-tutorial-integrate-angular-fire-config-firebase-database.png" alt="angular-8-firebase-tutorial-integrate-angular-fire-config-firebase-database" width="243" height="128" class="alignnone size-full wp-image-17757" />

<h3>Step 2: Install @angular/fire and firebase</h3>
Run command:
<code>npm install firebase @angular/fire --save</code>

https://ozenero.com/angular-8-firebase-tutorial-integrate-firebase-angular-8-app-angular-fire