Fireship - RSS Feed

Reddit Inspired Upvoting System with Angular and Firebase NoSQL

Tue, 18 Feb 2025 23:54:46 +0000

https://angularfirebase.com/lessons/reddit-style-upvoting-in-angular-4-and-firebase-nosql/

Learn how to build a Reddit-style upvote/downvote system with Angular 4 and Firebase Realtime NoSQL database.

Autocomplete Search with Angular4 and Firebase

Tue, 18 Feb 2025 23:54:46 +0000

https://angularfirebase.com/lessons/autocomplete-search-with-angular4-and-firebase/

Learn how to grab async data from firebase and update the UI after each keypress.

Firebase Database Rules Tutorial

Tue, 18 Feb 2025 23:54:46 +0000

https://angularfirebase.com/lessons/understanding-firebase-database-rules-by-example/

Learn how to use Firebase database rules by example.

Angular 4 Transactional Email with Google Firebase Cloud Functions

Tue, 18 Feb 2025 23:54:46 +0000

https://angularfirebase.com/lessons/angular4-transactional-email-with-cloud-functions-and-sendgrid/

In this episode, I am going to show you how send transactional email in Angular as a background task in cloud. To facilitate this, the emails will be send with Google Cloud Functions for Firebase and the email service Sendgrid. You can use any email provider you want such as mailgun or postmark or even Gmail, but I will chose Sendgrid for this tutorial because they have a solid helper library and a detailed NodeJS example in their documentation. They also offer a free trail with no credit card requirements, so get your API key to follow along with this lesson.

What is a Cloud Function?

Google Cloud Functions is a serverless architecture that allows you to run isolated code in a NodeJS runtime - as opposed to deploying your own server. It is Google's answer to AWS Lambda and has only been available to the public since 2017. It's an awesome tool for Firebase developers because it allows you to run code in the background that would otherwise slow down an Angular app, and email is definitely a task that should be delegated to its own background task or micro service.

We can trigger cloud functions in many different ways, but this lesson will demonstrate the use of cloud functions via HTTP. When the function is deployed, Google Cloud Platform will give us a URL endpoint that we can hit with query params that tell SendGrid how to deliver the email. The process is no different than working with any other RESTful API.

It's also useful to know that you can trigger cloud functions on database writes, storage uploads, authentication events, and even analytic events, all of which are common use cases for transactional email. Some examples include sending a welcome email after a new user signs up or when they've reached the max capacity on file uploads. I plan on covering these scenarios in future videos.

First, I am assuming you have an Angular app started with the firebase-tools installed.

Start by run the firebase init command and select functions.

This will create a functions directory and give us an index.js file, which is were the functions are defined. The functions directory is its own isolated Node environment, completely separate from your angular app - its logic has no direct connection to angular. That's great because it keeps your frontend app lightweight and delegates CPU or Memory intensive operations to the cloud.

First we need to install the sendgrid package, so we cd into the functions directory then run NPM install.

cd functions
npm install sendgrid

First, I import the send grid package and pass it my API key.

Next, I define a parseBody helper to convert the email params into JSON with SendGrid's mail helper. This is a pretty powerful feature of SendGrid when it comes to formatting emails, so check out all the options in the documentation.

To create a function, you use the exports keyword followed by the function name, in this case, Im calling the function httpEmail. Our function will return a promise when triggered via HTTP, and if its successful, it will tell the send grid API to send an email.The request must be of type POST and should have query params that define the email addresses, subject, and content the email. Send grid will then return its own response letting us know if the email was successful or an exception occurred.

Before we can wire up the cloud function with Angular, we need to deploy it.

Run the firebase deploy command, flagging --only functions.

When deployment is complete, the console will print the URL used trigger the function via HTTP. Make a note of this url because you will need it in the next step.

In angular, we can call this function for anywhere in the app. Here I have a brand new send-email component that will trigger the function.

Import the HTTP module and create a function that sends a POST request to the URL of the deployed function. I am also going to hard code some query parameters just to show how to send data to the function over http. In this example, I am just console logging the response or error for debugging.

Now we can trigger the cloud function with a button click or any other event for that matter.

If all went according to plan, you should see an email in your inbox. If not, make sure to check the console or the Firebase cloud functions logs for any exceptions.

That's it for transactional email. Thanks for watching.

Loading Spinners for Asynchronous Firebase Data

Tue, 18 Feb 2025 23:54:46 +0000

https://angularfirebase.com/lessons/show-loading-spinners-for-firebase-data/

In this episode, I will show you how to display and hide a loading spinner when retrieving asynchronous Firebase data from an Angular application. Loading indicators are an important UI feature because they show the end user when more data is incoming.

Step 1 - Create the Spinner component

We're going to create a SpinnerComponent that can be reused throughout the application. To make it look cool, I am using Spinkit CSS library, which we can just be copied directly into the component's CSS and HTML files. You do not need to change anything in the component's TypeScript.

Step 2 - Retrieve Aschronous Data

We need to load some data from Firebase to make use of the spinner.

In this example, I am loading a `FirebaseListObservable` via the AngularFire2 package. The actual data is just and array of items from a to-do list. This code was originally created for the RealTime Database video, so check that out if you want to learn more about asynchronous data streams.

Step 3 - Show and Hide the Spinner

We want to show the spinner in the items-list component while data is being retried.

First, we define a variable called `showSpinner` in the component and set it to true by default. During `ngOnInit`, the data is requested from the service as a `FirebaseListObservable`. We can determine if the data has been loaded by subscribing to it. The function inside the subscribe call will be executed after the observable emits data, so we can simply set `showSpinner` variable to false when this happens.

In the template, we can use the `*ngIf` directive with the `showSpinner` variable to control the visibility spinner.

Going back to the app, we can see that spinner is visible for a split second before the data is loaded. The longer it takes for your data the load, the more useful this spinner will be your end users.

That's it for loading spinners, see you next time.

Sharing Data between Components in Angular

Tue, 18 Feb 2025 23:54:46 +0000

Fully documented lesson at https://angularfirebase.com/lessons/sharing-data-between-angular-components-four-methods/

In this episode, I am going to show you four different ways to share data between Angular components.

Parent to Child the Input Decorator

When you declare a variable with the Input decorator in the child component, it allows that variable to be received from a parent template. In this case, we define a message variable in the parent, then use square brackets to pass the data to the child. Now the child can display this data in its own template.

Child to Parent via ViewChild

ViewChild allows a one component to be injected into another, giving the parent access to its attributes and functions. One caveat, however, is that child won't be available until after the view has been initialized. This means we need to implement the AfterViewInit lifecycle hook to receive the data from the child.

In the AfterViewInit function we can access the message variable defined in the child

Child to Parent via Output and EventEmitter

Another way to share data is to emit data from the child, which can be listed to by the parent. This approach is ideal when you want to share data changes that occur on things like button clicks, form entires, and other user events.

In the child, we declare a messageEvent variable with the Output decorator and set it equal to a new event emitter. Then we create a function named sendMessage that calls emit on this event with the message we want to send. Lastly, we create a button to trigger this function.

In the parent, we create a function to receive the message and set it equal to the message variable.

The parent can now subscribe to this messageEvent that's outputted by the child component, then run the receive message function whenever this event occurs.

Share data between any components

When passing data between components that lack a direct connection, such as siblings, grandchildren, etc, you should you a shared service. When you have data that should aways been in sync, I find the RxJS `BehaviorSubject` very useful in this situation. The main benefit that a BehaviorSubject ensures that every component consuming the service receives the most recent data.

In the service, we create a private BehaviorSubject that will hold the current value of the message. We define a currentMessage variable handle this data stream as an observable that will be used by the components. Lastly, we create function that calls next on the BehaviorSubject to change its value.

The parent, child, and sibling components all receive the same treatment. We inject the DataService in the constructor, then subscribe to the currentMessage observable and set its value equal to the message variable.

Now if we create a function in any one of these components that changes the value of the message. when this function is executed the new data it's automatically broadcast to all other components.

That's it for data sharing. See you next time.

How to Deploy an Angular App to Firebase Hosting

Tue, 18 Feb 2025 23:54:46 +0000

https://angularfirebase.com/lessons/deploying-an-angular-app-to-firebase/
In this episode, we're going to deploy an Angular 4 app to Firebase hosting. After some initial configuration, you can deploy your app to firebase in a matter of seconds. The best part is that its free for low volume usage and you'll be prepared to scale up as your app grows.

Step 1 - Compile your App

Running the ng build command will compile and minify your code in a single package in the dist/ folder. You could drop the contents of this directory into virtually any static website hosting platform or even an S3 bucket and you’re site would be ready to serve traffic.

Step 2 - Install Firebase Tools

Firebase has a nice command line package for deployment. Install it with NPM, then log into your firebase account.

Step 3 - Initialize your Project

Make sure you are in the top level directory of your angular app, then run firebase init. This will take you through a one-time configuration for your app.

For the most part, you can stick with the default settings, except in the follow cases:

Choose hosting on the first question.
Change public folder to dist when asked (it defaults to public).
Configure as single page app? Yes
If firebase asks to overwrite your index.html file, respond with NO.

Step 4 - Deploy

Now your app should be ready to deploy. Run the firebase deploy command, then check your project URL to make sure everything looks good.

That's all for firebase deployment, see you next time.

Upload Files from Angular to Firebase Storage

Tue, 18 Feb 2025 23:54:46 +0000

UPDATE Watch the latest store video here: https://youtu.be/wRWZQwiNFnM

Full Lesson: https://angularfirebase.com/lessons/angular-file-uploads-to-firebase-storage/

In this episode we are going to implement file uploads with Angular and Firebase Storage. File storage is currently unsupported in the AngularFire2 package, but it's still possible to use Firebase storage by interacting directly with the Firebase Web API. We're still going use AngularFire2 for saving information about file uploads to the realtime database, such as the file name and its URL location.

Step 1 - Generate the Files

The structure of this feature is very similar to the Angular Firebase CRUD lesson, so make sure to check that out. It is just form that accepts files, uploads them to the storage bucket, then renders the details to a list.

ng g service uploads/shared/upload
ng g class uploads/shared/upload
ng g component uploads/uploads-list
ng g component uploads/upload-detail
ng g component uploads/upload-form

Step 2 - Define the Upload Class

The upload class will be used by the service. Notice it has a constructor for the `file` attribute, which has a type of `File`. This class is built into JavaScript and it defines files that are passed via HTML from inputs.

Step 3 - Build the Upload Service

The service needs to upload the file to Firebase Storage then save details about the file to the realtime database. First let's add the necessary imports import, including the Firebase API, and declare the variables.

Here's the push upload function works step-by-step.

1. First, Establish a reference to the firebase storage bucket.
2. Second, define the `uploadTask` as a promise to put the file in storage.
3. Third, monitor the uploadTask event using the `.on` function.
4. Last, handle the events of in progress, success, and error.

When the upload is in progress we will take a snapshot to get the number of bytes transferred. Using some simple math, we convert it to a percentage to display a progress bar for the user.

When the upload is complete, we update the database.

Before moving to the components, we need a way to delete files. Deleting a file only requires a reference to its location. Because we saved the name of the file to the database, we can use it to locate the file in storage and delete it. Here's the code to delete files from both firebase storage and the realtime database.

Step 4 - Build the Upload Form Component

Now we need to give users a way to choose files and upload or delete them. Let’s start with the UploadFormComponent because that is where most of the action is happening.

When a user selects files in an HTML file input, it fires the change event. Our template will listen the change event, then pass the event to our component, which contains the list of files the user is trying to upload.

Now we can create methods to trigger the upload function from the service. I created separate functions for handling single files and multiple files that will be connected to buttons in the template.

For the end user, we have a progress bar that changes its width based on the snapshot from the upload service.

To trigger the upload, we use a regular HTML input that fires the `detectFiles` whenever a new file is entered. This will define the "selectedFiles" variable. Then the user can click Upload files to push the file to storage.

That's it firebase file uploads, see you next time.
Step 1 - Compile your App

Running the ng build command will compile and minify your code in a single package in the dist/ folder. You could drop the contents of this directory into virtually any static website hosting platform or even an S3 bucket and you’re site would be ready to serve traffic.

Step 2 - Install Firebase Tools

Firebase has a nice command line package for deployment. Install it with NPM, then log into your firebase account.

Step 3 - Initialize your Project

Make sure you are in the top level directory of your angular app, then run firebase init. This will take you through a one-time configuration for your app.

For the most part, you can stick with the default settings, except in the follow cases:

Choose hosting on the first question.
Change public folder to dist when asked (it defaults to public).
Configure as single page app? Yes
If firebase asks to overwrite your index.html file, respond with NO.

Step 4 - Deploy

Now your app should be ready to deploy. Run the firebase deploy command, then check your project URL to make sure everything looks good.

That's all for firebase deployment, see you next time.

Angular Firebase CRUD App with NoSQL Database Tutorial

Tue, 18 Feb 2025 23:54:46 +0000

Update Oct 2017: Learn about important changes with Firestore and AngularFire v5 https://youtu.be/-GjF9pSeFTs

https://angularfirebase.com/lessons/reactive-crud-app-with-angular-and-firebase-tutorial/
In this episode we're going to build todo list feature that performs the SQL-style CRUD operations of create, read, update, and delete. NoSQL use different terms for these operations, so heres a basic translation when working with Firebase.

create -- push
read -- list or object
update -- update or set
delete -- remove

Angular apps work with asynchronous data streams using RxJS reactive extensions for JavaScript. A data stream can be anything, but in this context we are talking about objects from the Firebase realtime database.

At this point, it is assumed you have the AngularFire2 package installed and bootstrapped into your app. If not, go to the docs or checkout this video.

Step 1 - Generate the Files

Start by generating the necessary files from the command line. The feature is a simple list of todo items that can be modified by users.

ng g service items/shared/item
ng g class items/shared/item
ng g component items/items-list
ng g component items/item-detail
ng g component items/item-form

Step 2 - Define an Item Class

We will give Items their own TypeScript class to keep our data organized.

Step 3 - Building the Service

All the CRUD magic happens in the service, which performs six different operations.

1. Get a list of items
2. Get a single item
3. Create a new item
4. Update an existing item
5. Delete a single item
6. Delete an entire list of items

Let's start by importing dependencies and declaring public variables.

When we get an item or list of items, they will returned as an observable, which can then be unwrapped asynchronously in a component. The functions for getting an item or list will return the observable so it can be set as a public variable.

All other functions will return void because they operate on the items variable or take a specific key as an argument. Any component watching the items variable will be automatically updated when these functions are called.

All of these operations are defined in the AngularFire2 docs, so I recommend you check those out.

Step 4 - Build the List Component

The list component will serve as a parent component that iterates over items in the database. First, we need to define a public items variable during the NgOnInit lifecycle hook. This variable holds the Firebase List observable.

Then we use the ngFor directive with the async pipe to iterate over the observable. The async pipe is critical because the observable will be empty on initial rendering, so we need to tell angular to handle it differently than a regular JavaScript object.

Step 5 - Build the Item Detail Component

In the item detail component, we use the `@Input` decorator to pass data from the parent to the child via the template. We also crate a few functions that can be trigged by clicking buttons to operate on a single items within the list.

In the template itself, we display the item attributes and add the CRUD functions to the cooresponding buttons.

Step 6 - Build the Item Form Component

There are several different form validation methods in Angular. In this example, I am going to use a template driven approach using the if-then-else else syntax introduced in Angular 4. This method is only ideal for small simple forms because all the logic will be defined in the HTML.

We define two different templates named valid and errors. We can then display these templates conditionally based on the form state.

The final step is to submit the form to create a new item. In this case, I just use the click event to trigger the `createItem` method from the service.

That's all for Firebase CRUD, see you next time.

Angular Router Guards for Firebase Users

Tue, 18 Feb 2025 23:54:46 +0000

UPDATE: Get the latest version here https://angularfirebase.com/lessons/google-user-auth-with-firestore-custom-data/

Router Guards are used in Angular to prevent unauthorized users from navigating anywhere they want in your app. At this point our app has a working Firebase authentication system, but any visitor can access routes intended for only logged in users.

Guards handle this problem by implementing the CanActivate interface, which tells Angular whether or not to activate a route. In this example, we will protect pages for unauthenticated users and redirect them to a signin page.

Step 1 - Generate the Guard

We use the CLI in Angular 4 to generate a default guard.

Guards use the injectable decorator, so they need to be registered as a provider just like any other service in the app module.

Step 2 - Update the Auth Service

Our users are authenticating via Firebase and the AngularFire2 package. In the service we are subscribing the FirebaseAuthState, then using a getter to see if the auth object is null. Checkout the OAuth tutorial for more details on this code.

Step 3 - Implement the Guard Logic

Router guards always return a boolean type or boolean observable. The logic here is simple, if the FirebaseAuthState is defined, we activate the route. Otherwise, we return false and navigate to to the login page.

Now that the guard is complete, we just need to apply it to specific routes in the routing module.

That's it for router guards, I'll see you next time.

Anonymous Authentication with Angular and Firebase - Lazy Registration

Tue, 18 Feb 2025 23:54:46 +0000

https://angularfirebase.com/lessons/angular-firebase-authentication-tutorial-anonymous-auth/ In this episode were going to build an Anonymous Authorization service with Angular 4 and Firebase. This feature will allow a user to start using your app with going through the typical OAuth signin or Email Password registration process. This approach is also called lazy registration or gradual engagement.

It works by creating a session using only a user ID (UID). If the user signs out without updating more account details, they will be unable to log back in.

At this point, it is assumed you have the AngularFire2 package installed and bootstrapped into your app. If not, go to the docs or checkout this video.

STEP 1 - Generate the Auth Service

If starting from scratch, generate the Auth Service. I'm going to be building upon the auth service from my previous OAuth tutorial and I recommend checking that video out first.

STEP 2 - Activate Providers in Firebase

Head over to your firebase project and enable the anonymous provider.

STEP 3 - Building the Service

First, make sure to subscribe to the FirebaseAuthState in the constructor.

Then, write a function to login the user with the Anonymous provider.

Let's also add a TypeScript getter to see if a logged in user is anonymous. This will be useful when displaying content specifically for anonymous users.

STEP 4 - Create a Component

Now we can inject the service into our components to login users anonymously. In this case, we just bind the function to the click event of a button.

STEP 5 - Upgrading the Account

When an anonymous user decides to upgrade, you will need to transfer the account data. The Firebase web API can do this, but you would need to bypass the AngularFire2 package. As an alternative,you can create a new account, then transfer the User's data to it. Assuming your data is nested under a User ID, here's how you could map it to a new account.

This function works by taking a snapshot of the data nested under anonymous ID, then copies it to the new account after the User logs in with google.

That's it for Anonymous Auth. Check out the full article for more details and I'll see you next time.

OAuth with Angular and Firebase Tutorial

Tue, 18 Feb 2025 23:54:46 +0000

UPDATE Oct 10th, 2017: Fully updated tutorial for AngularFire v5 and Firestore https://youtu.be/e8GA1UOj8mE

Angular OAuth with Firebase
Tutorial https://angularfirebase.com/lessons/angular-firebase-authentication-tutorial-oauth/

In this episode, were going to build a user authentication system with Angular 4 and Firebase. Authentication is required in almost every Angular application, including this basic todo list app. The app currently has no authentication at all, but we want user to be able to log in with their Google, Facebook, Twitter, or Github account.

At this point, it is assumed you have the AngularFire2 package installed and bootstrapped into your app. If not, go to the docs or checkout this video.

STEP 1 - Generate Files

We are going to keep this feature super simple.

The Auth Service will handle interaction with the Firebase API.
The User Login Component will handle the login and logout buttons.
The User Profile Component will show details about the User.

STEP 2 - Activate Providers in Firebase

Head over to your firebase project and enable the providers you want. For non-google providers, you will need to get your own developer account and API keys.

STEP 3 - Build the Service

The way you handle authentication with Firebase is by subscribing to the AngularFire-Auth observable which returns a Firebase-Auth-State object.

Now that we have the AuthState object, we can take advantage of TypeScript accessors to get attributes. In this case, I'm interested in the User ID.

Here's the beauty of firebase - you can implement 4 social auth providers with very little code. I start by creating a reusable private function that takes the provider as an argument named `Social-Sign-In`.

When a user attempts to sign in two things can happen - success or failure. If it's a success, the `then` code will execute, if its's an error the `catch` code will execute.

You may be wondering what the `updateUserData` function is about. It's optional, but you may want to save user records to the Firebase realtime database. It can be useful if you plan on iterating over users in your app or if you collect additional data during signup.

We finish off the service by creating an action for each of the four providers. This is as simple as returning the result of the `socialSignIn` function.

STEP 4 - Frontend Components

With the auth service complete, we can inject it into components. Here's how you might create a Login Component with functions to login with each provider handleError

In the template we can then bind these functions to the click event.

The accessors we created in the service come in handy in for adding conditional logic to the template.

That wraps it up. Check out the full Firebase OAuth article more detail on code and I'll you next time.

Angular 4 Development and Production Environments with Firebase

Tue, 18 Feb 2025 23:54:46 +0000

Welcome to Angular Firebase. Today, I'm going to show you how to create separate backend environments for development and production with Angular 4. Maintaining separate environments allows you to build and test new features without screwing up data from your live production app.

Step 1 - Create two Firebase Projects

Before jumping into the code, you will need two separate Firebase projects one for development and one for production.

Step 2 Create the Environment Files

I just cloned the FireStarter App from github and the first step is to create the environment files. If you created a new app with the Angular CLI, these files will be here by default. Also, make sure to add these files to your gitignore as they will hold sensitive credentials for your app.

Step 3 paste in the firebase config using the unique API credentials from each of your projects.

Step 4 - Bootstrap the environment in the app module

Now we can import the environment anywhere in our app. In this case, we want to bootstrap firebase config in the app module. These are the necessary lines to wire up the environments with Firebase.

Step 5 - Serve or Build the App

With that done, its possible to serve our app locally using either environment. It will serve in development by default with

ng serve

or serve in product with the --prod flag

ng serve --prod

When deploying the app, make sure to always include the --prod flag.

ng build --prod

Thanks for watching. I'll see you on the other side.

NgRx + Firestore

Tue, 18 Feb 2025 23:54:35 +0000

Learn how to use Firestore as a backend for NgRx. This episode combines the power @ngrx/entity with AngularFire2 State Changes for fine-grained control over your data. https://angularfirebase.com/lessons/state-changes-angularfire2-with-ngrx/

Angular Air #135: https://youtu.be/t-auGKG1yjs
NgRx: https://github.com/ngrx/platform
Firestore: https://cloud.google.com/firestore/docs/
Inspiration: https://www.booth.fi/

Multi-Step Password Auth with Firebase and Reactive Forms

Tue, 18 Feb 2025 23:54:35 +0000

Learn how to collect custom data from users in multiple steps with Firebase email password auth https://angularfirebase.com/lessons/multi-step-signup-firebase-email-password-auth-angular-reactive-forms/

- Firebase Auth: https://firebase.google.com/docs/auth/web/password-auth
- Angular 5: https://angular.io/guide/reactive-forms

Angular SEO with Rendertron

Tue, 18 Feb 2025 23:54:35 +0000

Today I bring you an elegant search engine optimization solution for Angular progressive web apps. https://angularfirebase.com/lessons/seo-angular-part-1-rendertron-meta-tags/

Live demo: https://instafire-app.firebaseapp.com

1. This solution is fully compatible with AngularFire2
2. Will render links in twitter, facebook, etc.
3. Is crawlable by googlebot, bingbot, etc.
4. Does not require Angular Universal or any weird hacks

Rendertron: https://github.com/GoogleChrome/rendertron
Cloud Functions: https://firebase.google.com/docs/functions/
Inspiration: https://medium.com/dev-channel/solving-seo-with-headless-chrome-for-your-client-side-framework-288e66fdd2b7

Contentful - CMS for Angular Progressive Web Apps

Tue, 18 Feb 2025 23:54:35 +0000

Learn how to use Contentful as a CMS for Angular 5 Progressive Web Apps. In this episode, I show you how to use the platform, then write a Firebase Cloud Function that will broadcast push notifications when new content is published. https://angularfirebase.com/lessons/contentful-cms-progressive-web-apps/

Frantic: https://www.frantic.com/
Contentful: https://www.contentful.com/
FCM: https://firebase.google.com/docs/cloud-messaging/

Faster Firestore via Data Aggregation

Tue, 18 Feb 2025 23:54:35 +0000

Retrieve data from Firestore in a way that is faster and more cost effective with data aggregation. In this episode, we use Firebase Cloud Functions to read data from a sub-collection and write it to its parent document. https://angularfirebase.com/lessons/firestore-cloud-functions-data-aggregation/

Firestore: https://firebase.google.com/docs/firestore/
NoSQL Aggregation: https://www.thoughtworks.com/insights/blog/nosql-databases-overview

Infinite Scroll Pagination with Firestore

Tue, 18 Feb 2025 23:54:34 +0000

Use Angular and Firestore to add infinite scroll pagination to your app from scratch - both downward and upward. https://angularfirebase.com/lessons/infinite-scroll-firestore-angular/

Firestore: https://cloud.google.com/firestore/docs/
Angular Directives: https://angular.io/guide/attribute-directives

Learn @ngrx/entity and Feature Modules

Tue, 18 Feb 2025 23:54:34 +0000

Learn how to use the new ngrx entity package to build CRUD with less code. In this video, I show you how to create a feature module with ngrx, then use entity adapter methods in the reducer. https://angularfirebase.com/lessons/ngrx-entity-feature-modules-tutorial/

Medium: https://medium.com/ngrx/introducing-ngrx-entity-598176456e15
Docs: https://github.com/ngrx/platform/tree/master/docs/entity