- 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
- 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
- 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
environmentsfiles - Run
ng servefor a dev server. Navigate tohttp://localhost:4200/. The app will automatically reload if you change any of the source files. - Run
npm run buildto build the project. The build artifacts will be stored in thedist/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
- This project is licensed under the terms of the MIT license.
- Repo created by ABateman, email:
gomezbateman@yahoo.com