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! :)
- Angular 16
- Pre-Built CRUD function template.
- Easy setup and customization.
- Error handling practices.
- Make sure you have Node.js and Angular CLI installed.
- Create a Firebase project.
- Clone the repository to your local:
git clone https://github.com/cheungdevin/AngularFire-Template.git
cd AngularFire-Template
npm install
- 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>'
}
};
- Good to go:
ng serve
-
Replace
Your_Collection_Name
insrc/app/app.component.ts
with one of your Firestore collection name. -
Navigate to
http://localhost:4200/
, ensure there are no console errors regarding Firestore connectivity.
- 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")
Key dependencies used in this template:
Dependency | Version |
---|---|
Angular | 16.1.0 |
@angular/fire | 7.6.1 |
rxfire | 6.0.3 |
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!