Angular Firebase CRUD App with NoSQL Database Tutorial

Key Takeaways

in this episode we're going to build a to-do list feature that performs the SQL style crud operations of create read update and delete no SQL uses different terms for these operations so here's a basic translation when working with Firebase create equals push read equals list or object update equals update or set and delete equals remove angular apps work with asynchronous data streams using rxjs or reactive extensions for JavaScript a data stream can be pretty much anything but in this context we're talking about objects from the Firebase real-time database at this point it's assumed you have the angular Fire 2 package installed and bootstrapped into your app if not go to the docs or check out our environment setup video start by generating the necessary files from the command line the feature is just a simple list of to-do items that could be modified by users we will give items their own typescript class to keep our data nice and [Music] organized all the cred magic happens in the service which is going to perform six different operations it can get a list of items get a single item create a new item update an existing item delete an existing item and delete an entire list of items start by importing dependencies and declaring a couple public variables when we get an item or list of items they will be returned as an observable which can then be unwrapped asynchronously from the component the functions for getting an item or List will return the observable so it can then be set to a public variable all other functions are going to 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 from a component all of these operations are defined in the angular Fire 2 docs so I recommend you check those out if you're looking for more specific details on one of these functions the list component will serve as the parent component that iterates over items in the data base first we need to define a public items variable during the NG on AIT life cycle hook this variable is going to hold the Fire based list observable then we use the ng4 directive in the template along 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 just a plain JavaScript object in the item detail component we use the input decorator to pass data from the parent to the child via the template we also create a few functions that can be triggered by clicking buttons to operate on a single item within the list in the template itself we display the item attributes and add the crud functions to the corresponding buttons angular has several different form validation methods but in this example I'm going to use a template driven approach that us uses the if then lse syntax introduced in angular 4 this method is only ideal for small simple forms because all the logic is going to be defined directly in the HTML which tends to be harder to maintain than just regular typescript 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 create item method from the service that's all for Firebase crud see you next [Music] time