โก Angular Firebase Access
Angular app using Firebase tools to access a Google Cloud Firestore
With a Google login or other auth setup it is possible to Create, Read, Update and Delete blog posts.
Note: to open web links in a new window use: ctrl+click on link
Allows access to create, read, update & delete Firebase posts
Install dependencies using npm i
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 ng build
to build the project. The build artifacts will be stored in the dist/
directory. Use the --prod
flag for a production build.
Run ng update
to update Angular
functions from post.service.ts
to get all posts and a selected post.
getPosts = async ( ) : Promise < any > => {
let postsArray = [ ] ;
const postCollectionRef = collection ( db , "posts" ) ;
const querySnapshot = await getDocs ( query ( postCollectionRef ) ) ;
querySnapshot . forEach ( doc => {
alert ;
postsArray . push ( { id : doc . id , ...doc . data ( ) } ) ;
postsArray . sort ( ( a , b ) => b . published - a . published ) ;
} ) ;
return postsArray ;
} ;
showFullPost = ( post : Post ) : void => {
this . currentPost = post ;
this . router . navigate ( [ "/post-detail" ] ) ;
} ;
HTML template uses the Angular async pipe to subscribe to the posts Observable and to unsubscribe automatically in the onDestroy lifecycle, avoiding memory leaks.
Status: Working
To-Do: Add tabs for posts categories
This project is licensed under the terms of the MIT license.