• Creates, Reads, Updates & Deletes (CRUD) data stored in Google Firestore
• Uses Angular Material design library components; mat-table, mat-card and mat-form etc.
• Note: to open web links in a new window use: ctrl+click on link

GitHub repo size GitHub pull requests GitHub Repo stars GitHub last commit

• ⚡ Angular Material Firebase
  • 📄 Table of contents
  • 📚 General info
  • 📷 Screenshots
  • 📶 Technologies
  • 💾 Setup
  • 💻 Code Examples
  • 🆒 Features
  • 📋 Status & To-Do List
  • 👏 Inspiration
  • 📁 License
  • ✉️ Contact

• Project data stored in Firestore NoSQL database as a collection named "projects"
• ngx-toastr used to display status info. popups
• Material Dialogs used to open modals for create, edit & delete projects.
• Angular Material custom theme
• Strictly typed forms in Angular

Example screenshot Example screenshot

• Angular v16
• Angular Material v16
• RxJS v7
• firebase v9
• Angular Reactive Forms used with a FormBuilder service & form validation to handle form inputs as a group
• ngx-mask v16 for masking of project date, access-code etc.

• Install dependencies using npm i
• Add firebase credentials to environments files
• Run ng serve for a dev server. Navigate to http://localhost:4200/. The app will automatically reload if you change any of the source files.
• Run npm run build to build the project. The build artifacts will be stored in the dist/ directory.

• Function to fetch the projects collection from a Google Firestore NoSQL database and order by date

getProjects = (): Observable<Project[] | DocumentChangeAction<unknown>[]> => {
 return this.firebase
 .collection("projects", ref => ref.orderBy("createdDate"))
 .snapshotChanges();
};

• Code to perform CRUD operations on a Firestore NoSQL database is quite simple

• Status: Working
• To-Do: Add form types, correct form so fields are not red after complete form submitted and form is reset. Deploy, change project add/edit form to a dialog, add transloco, SSR, PWA. Add form types in createdit.component.ts

• Daniel Kreider: Angular Project Structure Best Practices
• Angular Material Darkmode in 3 Steps

• This project is licensed under the terms of the MIT license.

• Repo created by ABateman, email: gomezbateman@yahoo.com