How can I use AngularFireDatabase in Angular 13?

user_15845330 0
Viewed 102

I have a category.service.ts file in my Angular 13 project and I tried in a lots of way implement FirebaseDatabase but it is not working. The original sample code:

import { AngularFireDatabase } from 'angularfire2/database';
import { Injectable } from '@angular/core';

@Injectable()
 export class CategoryService {

 constructor(private db: AngularFireDatabase) {}

getCategories() {
 return this.db.list('/categories', {
  query: {
    orderByChild: 'name'
    }
  });
 }
}

product-form.component.ts

...

export class ProductFormComponent implements OnInit {
categories$;

constructor(categoryService: CategoryService, private productService: ProductService)
   this.categories$ = categoryService.getCategories();
 }

 save(product) {
  this.productService.create(product);
  }

 ngOnInit() {
}

My question is about that how can I use Angular Fire Database in Angular 13.3.0? In my package.json the versions:

"@angular/fire": "^7.3.0" "firebase": "^8.10.1"

The above sample code of the CategoryService does not work because compiler says that 'Module '"angularfire2/database"' has no exported member 'AngularFireDatabase'.ts(2305)'

How can I populate this category list and further going: how can I save a product in the above mentioned version of firebase?

angular firebase
1 Answers

First thing I noticed, you are trying to import AngularFireDatabase from angularfire2/database but according to the documentation it should be the following:

import { AngularFireDatabase } from '@angular/fire/compat/database';

And according to the same page, you can push an object to your list in this way:

 this.db.list('categories').push({SOME_OBJECT});  // e.g. {name: 'mark', age: '69'}

However, since you have not included your code for your module in your question, for my answer I am assuming that Firebase is initialized properly.

user_136903310
Related