AngularFire Template

A ready-to-go CRUD template to kickstart your Angular and Firebase applications. This repo provides a solid foundation with a CRUD structure using AngularFire, enabling you to quickly move forward with your projects.

🌟 If you find this project helpful or useful, a click on star button would be much appreciated to show your support! :)

Features:

• Angular 16
• Pre-Built CRUD function template.
• Easy setup and customization.
• Error handling practices.

Section

• Setup
• Testing
• Usage
• Version
• Resources
• Contributing

Setup

Prerequisites

• Make sure you have Node.js and Angular CLI installed.
• Create a Firebase project.

Getting Started

1. Clone the repository to your local:

git clone https://github.com/cheungdevin/AngularFire-Template.git
cd AngularFire-Template
npm install

2. After you "Register app" on firebase console, you can copy configuration into src/environments/environment.ts

export const environment = {
  firebase: {
    apiKey: '<your-key>',
    authDomain: '<your-project-authdomain>',
    databaseURL: '<your-database-URL>',
    projectId: '<your-project-id>',
    storageBucket: '<your-storage-bucket>',
    messagingSenderId: '<your-messaging-sender-id>'
  }
};

3. Good to go:

ng serve

Testing

1. Replace Your_Collection_Name in src/app/app.component.ts with one of your Firestore collection name.

2. Navigate to http://localhost:4200/, ensure there are no console errors regarding Firestore connectivity.

Usage

• The primary implementation of the CRUD template can be found in app/services/firebase.service.ts. Feel free to modify it according to your personal needs.

// Import the pre-built service template
import { FirebaseService } from './services/firebase.service';

// Inject FirebaseService in the constructor
constructor(private db:FirebaseService){}

// Fetch a document from a specific collection by calling getDocument
const data = await this.db.getDocument("Collection_Name","Collection_ID")

Version

Key dependencies used in this template:

Dependency	Version
Angular	16.1.0
@angular/fire	7.6.1
rxfire	6.0.3

Resources

• Register app guide
• Angularfire official repository

Contributing

Feel free to open issues and pull requests to make this template even better!

⭐️ Don't forget to hit the star if you like this template, your support is greatly appreciated!