Angular 8 Firebase CRUD operations with @angular/fire
Tags: angular8, firebase, crud, angularfire
Published: 2021-03-17 14:22:18

https://grokonez.com/frontend/angular/angular-8/angular-8-firebase-tutorial-crud-operations-angular-fire-example

In this tutorial, we’re gonna create a simple Angular 8 Application that does CRUD to create, read, update, delete data to/from Firebase Realtime Database using <code>@angular/fire</code>.

Related Posts:
- <a href="https://grokonez.com/firebase/angular-8-firebase-tutorial-integrate-firebase-angular-8-app-angular-fire">Angular 8 Firebase tutorial: Integrate Firebase into Angular 8 App with @angular/fire</a>
- <a href="https://grokonez.com/frontend/angular/angular-8-firestore-tutorial-crud-examples-angularfire">Angular 8 Firestore tutorial with CRUD application example – @angular/fire</a>
- <a href="https://grokonez.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>Video</h2>
<iframe width="853" height="480" src="https://www.youtube.com/embed/Qdj8dU-ccBI?rel=0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
<h2>Firebase CRUD operations with @angular/fire</h2>
<h3>Set up the Firebase Project & Install @angular/fire</h3>
Please visit <a href="https://grokonez.com/firebase/angular-8-firebase-tutorial-integrate-firebase-angular-8-app-angular-fire">this post</a> to know step by step.
<h3>Firebase CRUD operations for Object</h3>
<h4>Create an object binding/ Retrieve</h4>
<pre><code class="language-javascript">
item: AngularFireObject<any>;
// db: AngularFireDatabase
this.item = db.object('item');

// or
Observable<any> item = db.object('item').valueChanges();
</pre>
<h6>Create</h6>
<pre class="lang:java">
// db: AngularFireDatabase
const itemRef = db.object('item');

// set() for destructive updates
itemRef.set({ name: 'grokonez'});
</code></pre>
<h4>Update</h4>
<pre><code class="language-javascript">
// db: AngularFireDatabase
const itemRef = db.object('item');
itemRef.update({ url: 'grokonez.com'});
</code></pre>
<h4>Delete</h4>
<pre><code class="language-javascript">
// db: AngularFireDatabase
const itemRef = db.object('item');
itemRef.remove();
</code></pre>
<h3>List of Objects</h3>
<h4>Create a list binding/ Retrieve</h4>
- Returns an <code>Observable</code> of data as a synchronized array of JSON objects <strong>without</strong> snapshot metadata. It is simple to render to a view:
<pre><code class="language-javascript">
items: Observable<any[]>;
// db: AngularFireDatabase
this.items = db.list('items').valueChanges();
</code></pre>
- Returns an <code>Observable</code> of data as a synchronized array of <code>AngularFireAction</code><<code>DatabaseSnapshot</code>>[] <strong>with</strong> metadata (the underyling <strong>DatabaseReference</strong> and snapshot <strong>key</strong>):
<pre><code class="language-javascript">
items: Observable<any[]>;
// db: AngularFireDatabase
this.items = db.list('items').snapshotChanges();
</code></pre>
<h4>Create</h4>
<pre><code class="language-javascript">
// db: AngularFireDatabase
const itemsRef = db.list('items');
itemsRef.push({ site: 'grokonez.com' });
</code></pre>
<h4>Update</h4>
<pre><code class="language-javascript">
// set(): destructive update
// delete everything currently in place, then save the new value
const itemsRef = db.list('items'); // db: AngularFireDatabase
itemsRef.set('key', { url: 'jsa.com' });

// update(): non-destructive update
// only updates the values specified
const itemsRef = db.list('items'); // db: AngularFireDatabase
itemsRef.update('key', { url: 'javasampleapp.com' });
</code></pre>
<h4>Delete</h4>
<pre><code class="language-javascript">
// db: AngularFireDatabase
const itemsRef = db.list('items');
itemsRef.remove('key');

// delete entire list
itemsRef.remove();
</code></pre>
<h2>Firebase CRUD operations in Angular 8 example using @angular/fire</h2>
<h3>Project Overview</h3>
<h4>Goal</h4>
We will build an Angular 8 Firebase App using <code>@angular/fire</code> that can:
- add/remove Customer
- show all Customers
- update Customer's status

<img src="https://grokonez.com/wp-content/uploads/2019/04/angular-8-firebase-crud-realtime-database-app.png" alt="angular-8-firebase-crud-realtime-database-app" width="700" height="479" class="alignnone size-full wp-image-17791" />
<h4>Project Structure</h4>
<img src="https://grokonez.com/wp-content/uploads/2019/04/angular-8-firebase-crud-realtime-database-project-structure.png" alt="angular-8-firebase-crud-realtime-database-project-structure" width="213" height="550" class="alignnone size-full wp-image-17793" />

- <strong>environment.ts</strong> configure information to connect with Firebase Project.
- <strong>customer.ts</strong> defines <code>Customer</code> class data model.
- <strong>customer.service.ts</strong> defines <code>CustomerService</code> that uses <code>@angular.fire</code> to interact with Firebase.
- 3 Angular components:
+ <code>create-customer</code> for creating new item.
+ <code>customer-details</code> shows item detais
+ <code>customers-list</code> contains list of items, this is parent component of <code>customer-details</code>
- <code>app-routing.module.ts</code> defines how we route Angular components.
- <code>app.module.ts</code> declares and imports necessary environment & modules.
<h3>Step by Step</h3>
<h4>Set up the Firebase Project & Install @angular/fire</h4>
Please visit <a href="https://grokonez.com/firebase/angular-8-firebase-tutorial-integrate-firebase-angular-8-app-angular-fire">this post</a> to know step by step.
<h4>Add Firebase config to environments variable</h4>
Open <strong>/src/environments/environment.ts</strong>, add your Firebase configuration that we have saved when Popup window was shown:
<pre><code class="language-javascript">
export const environment = {
  ...
  firebase: {
    apiKey: 'xxx',
    authDomain: 'gkz-angular-firebase.firebaseapp.com',
    databaseURL: 'https://gkz-angular-firebase.firebaseio.com',
    projectId: 'gkz-angular-firebase',
    storageBucket: 'gkz-angular-firebase.appspot.com',
    messagingSenderId: '123'
  }
};
</code></pre>
<h4>Create Service & Components</h4>
Run the commands below:
- <code>ng g s customers/Customer</code>
- <code>ng g c customers/CustomerDetails</code>
- <code>ng g c customers/CustomersList</code>
- <code>ng g c customers/CreateCustomer</code>

https://grokonez.com/frontend/angular/angular-8/angular-8-firebase-tutorial-crud-operations-angular-fire-example