5 Cool New Features in AngularFire

Key Takeaways

over the last few weeks we've seen major new releases for both angular and firebase and that has resulted in angularfire version 5.2 and it contains a whole bunch of new features that you may have not been expecting in today's video we'll look at five brand new features in angular fire and how they can help simplify your angular firebase project if you're new here like and subscribe and you can find the full write-up on fire ship IO the first new feature you should be aware of are the new schematics that make it easy to add angular fire to an existing project and then deploy it to firebase hosting all we have to do is run ng add angular fire and then select a corresponding firebase project that will install the necessary dependencies and also initialize firebase in this project and another cool thing is that it hooks into the new builder API at angular 8 which allows us to run a command to deploy this project to firebase hosting in other words you can go from zero to a deployed app with just two commands the next new feature you should be aware of is the integration of firebase performance I already have an entire video on this topic and adding firebase perf to your project is pretty much a no-brainer but angular fire is not just a wrapper for performance it extends it with additional functionality specifically for rxjs you can get basic performance reporting with a single line of code or you can use one of the custom rxjs operators to run a manual trace this makes it really easy to measure the performance of things like HTTP calls because all you have to do is pipe in this custom operator and everything else happens for you automatically the third new feature is my favorite and that's because I wrote the code for it and it's just a new option on value changes when listening to the value of a document or collection the option is called ID field and it allows you to return the document ID in addition to the document data when working with firestore you often need the document data to show in the UI and then you need the ID itself to make updates or rights to the database but combining the document ID with the data is an overly complex process in my opinion value changes returns an observable that emits a JavaScript object or an array of objects the ID field argument is optional and it will return the document ID map to a specific property on the object so this allows you to specify the property name for the ID so you don't accidentally overwrite some underlying data that's already on the document so the end result is less complexity and fewer lines of code in your front-end applications now the next feature that we'll look at is the collection group query which is new and firebase version six this feature is also covered in detail in its own video but it's something you should definitely be aware of because it adds a ton of flexibility to data modeling and firestore in angular fire the usage looks like this where we have a reference to a collection group that will group all the collections in the database with that same name making it possible to run queries across all the data contained in all the sub collections with that same name now I save the best for last and that is the angular fire auth card module if you've ever built something like role based authorization in an angular firebase app there's a good chance that you have a lot of complex code living in your router guards apps that have a lot of custom authorization logic typically need to lock down specific routes based on a user's role or authorization level the most simple use case is when you want to lock down a route based on whether or not a user is logged in we can now easily handle that logic by simply dropping in the angularfire auth guards you can activate on the routes that we want to apply it to but what if we want to redirect the user to the login page if this guard results to false the guard module provides they can activate helper method that allows us to pass in a custom rxjs operator and there's a bunch of built-in operators for the most common situations like redirecting an unauthorized user to a different route and you can even do the opposite of redirecting a logged in user to a new route and if the built-in functions aren't enough for you you can actually build your own because they're just custom rxjs operators under the hood and a custom rxjs operator is just a JavaScript function we'll go ahead and create our own auth pipe which is a function that should return an observable of a boolean or an array of strings if we want to redirect the user to a new route we can easily do this by using the rxjs map operator and its callback function will give us access to the firebase user which we can use to determine whether or not this user is authorized to visit this route for the Jeff guard we're going to make sure that the users display name contains the substring of Jeff and now we can use this logic by simply combining it with the can activate helper so over all the auth guard module provides a much simpler and concise way to write authorization logic with the angular router in most cases all the hard work will be done for you but if you want to implement your own custom logic it's just a matter of writing a function over all angular version 5.2 adds a ton of new functionality and does a lot of things to help simplify your code I'm gonna go ahead and wrap things up there if this video helped you please I can subscribe and consider becoming a pro member at fire ship IO to get access to even more content thanks for watching and I will talk to you soon [Music]