CODEWITHSUNDEEP
angularfirebasefirebase-realtime-database
Indrajit Ravi
Indrajit Ravi

Reputation: 33

Reading data from firebase realtime database and display as a list using Angular

I am trying to implement the product list by following the video, but the list doesnt display the products that I have listed in the firebase database. Can someone help?

product-form.component.html

<div class="form-group">
       <label for ="category">Category</label>
        <select id="category" class="form-control">
            <option value=""></option>
            <option *ngFor="let c of categories$ | async" value="c.$key">
                {{ c.name }}
            </option>
        </select>            
</div>

product-form.component.ts

export class ProductFormComponent implements OnInit {
  categories$;
  
  constructor(categoryService: CategoryService) { 
    this.categories$= categoryService.getCategories();
  }

  ngOnInit() {
  }

}

category.service.ts

export class CategoryService {

  constructor(private db:AngularFireDatabase) { }


  getCategories() {
    return this.db.list('/categories');


  }
}

I have manually entered the categories in the firebase realtime database looks like this. categories

Categories in the database

Upvotes: 1

Views: 1294

Answers (1)

Adrita Sharma
Adrita Sharma

Reputation: 22203

Try like this:

getCategories() {
    return this.db.list('/categories').snapshotChanges();
}

Upvotes: 2

Related Questions