With the releases of Angular 8 and Firebase 6 comes a bunch of new features in AngularFire that can extend and simplify your code https://fireship.io

Official Docs: https://github.com/angular/angularfire2

1. Schematics
2. Perf https://youtu.be/KYYjdWSrRjI
3. ID Field
4. Collection Group Query https://youtu.be/fQ4u1J717ys
5. Router Guards

#angular #firebase

Download the quiz app 🤓

iOS https://itunes.apple.com/us/app/fireship/id1462592372?mt=8
Android https://play.google.com/store/apps/details?id=io.fireship.quizapp

Upgrade to Fireship PRO at https://fireship.io/pro
Use code lORhwXd2 for 25% off your first payment.
2024-02-04T06:43:00.609Z
nova-2
2-general-nova
2024-01-09.29447
30089e05-99d1-4376-b32e-c263170674af
711f8fa1-f8b3-4c5a-abfc-5888c279041d
11f54a57e3e641c6d64e073d4a45ee4555ee12dcdb66834f48ac90cb18dbfd94
67875a7f-c9c4-48a0-aa55-5bdb8a91c34a
deprecated
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 5 brand new features in AngularFire and how they can help simplify your AngularFirebase project.
If you're new here, like and subscribe, and you can find the full write up on Fireship IO.
The first new feature you should be aware of are the new schematics that make it easy to add AngularFire to an existing project and then deploy it to Firebase Hosting.
All we have to do is run n g 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 in Angular 8, which allows us to run a command to deploy this project to Firebase Hosting.
In other words, you can go from 0 to a deployed app with just 2 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 AngularFire is not just a wrapper for performance, it Stents 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 3rd 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 Fire Store, 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 flex 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 mapped 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 in Firebase version 6.
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 in Firestore.
In AngularFire, 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 subcollections with that same name.
Now I saved the best for last, and that is the AngularFire auth guard 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 Guard to 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 resolves to false?
The guard module provides a can activate helper method that allows us to pass in a custom RX JS 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 RX JS 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 Gefguard, we're going to make sure that the user's display name contains the substring of Jeff.
And now we can use this logic by simply combining it with the can activate helper.
So overall, the AuthGuard 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.
Overall, 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 like and subscribe and Consider becoming a pro member at Fireship IO to get access to even more content.
Thanks for watching, and I will talk to you soon.

Speaker 0: 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 5 brand new features in AngularFire and how they can help simplify your AngularFirebase project. If you're new here, like and subscribe, and you can find the full write up on Fireship IO. The first new feature you should be aware of are the new schematics that make it easy to add AngularFire to an existing project and then deploy it to Firebase Hosting.

All we have to do is run n g 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 in Angular 8, which allows us to run a command to deploy this project to Firebase Hosting. In other words, you can go from 0 to a deployed app with just 2 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 AngularFire is not just a wrapper for performance, it Stents 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 3rd 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 Fire Store, 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 flex 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 mapped 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 in Firebase version 6. 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 in Firestore.

In AngularFire, 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 subcollections with that same name. Now I saved the best for last, and that is the AngularFire auth guard 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 Guard to 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 resolves to false? The guard module provides a can activate helper method that allows us to pass in a custom RX JS 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 RX JS 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 Gefguard, we're going to make sure that the user's display name contains the substring of Jeff. And now we can use this logic by simply combining it with the can activate helper.

So overall, the AuthGuard 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. Overall, 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 like and subscribe and Consider becoming a pro member at Fireship IO to get access to even more content.

Thanks for watching, and I will talk to you soon.
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 5 brand new features in AngularFire and how they can help simplify your AngularFirebase project. If you're new here, like and subscribe, and you can find the full write up on Fireship IO. The first new feature you should be aware of are the new schematics that make it easy to add AngularFire to an existing project and then deploy it to Firebase Hosting. All we have to do is run n g 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 in Angular 8, which allows us to run a command to deploy this project to Firebase Hosting.
In other words, you can go from 0 to a deployed app with just 2 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.
military
But AngularFire is not just a wrapper for performance, it Stents 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 3rd 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.
programming
The option is called ID field, and it allows you to return the document ID in addition to the document data. When working with Fire Store, 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 flex 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 mapped 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 in Firebase version 6.
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 in Firestore. In AngularFire, 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 subcollections with that same name. Now I saved the best for last, and that is the AngularFire auth guard 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 Guard to can activate on the routes that we want to apply it to.
databases
security
data management
But what if we want to redirect the user to the login page if this guard resolves to false? The guard module provides a can activate helper method that allows us to pass in a custom RX JS 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 RX JS 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 Gefguard, we're going to make sure that the user's display name contains the substring of Jeff. And now we can use this logic by simply combining it with the can activate helper. So overall, the AuthGuard 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. Overall, 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 like and subscribe and Consider becoming a pro member at Fireship IO to get access to even more content. Thanks for watching, and I will talk to you soon.
youtube
streaming
media
social media
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 5 brand new features in AngularFire and how they can help simplify your AngularFirebase project. If you're new here, like and subscribe, and you can find the full write up on Fireship IO. The first new feature you should be aware of are the new schematics that make it easy to add AngularFire to an existing project and then deploy it to Firebase Hosting. All we have to do is run n g 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 in Angular 8, which allows us to run a command to deploy this project to Firebase Hosting. In other words, you can go from 0 to a deployed app with just 2 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 AngularFire is not just a wrapper for performance, it Stents 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 3rd 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 Fire Store, 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 flex 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 mapped 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 in Firebase version 6. 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 in Firestore. In AngularFire, 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 subcollections with that same name. Now I saved the best for last, and that is the AngularFire auth guard 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 Guard to 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 resolves to false? The guard module provides a can activate helper method that allows us to pass in a custom RX JS 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 RX JS 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 Gefguard, we're going to make sure that the user's display name contains the substring of Jeff. And now we can use this logic by simply combining it with the can activate helper. So overall, the AuthGuard 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. Overall, 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 like and subscribe and Consider becoming a pro member at Fireship IO to get access to even more content. Thanks for watching, and I will talk to you soon.
Over
over
the
the
last
last
few
few
weeks
weeks
we've
we've
seen
seen
major
major
new
new
releases
releases
for
for
both
both
Angular
angular
and
and
Firebase
firebase
and
and
that
that
has
has
resulted
resulted
in
in
AngularFire
angularfire
version
version
5.2.
5.2
And
and
it
it
contains
contains
a
a
whole
whole
bunch
bunch
of
of
new
new
features
features
that
that
you
you
may
may
have
have
not
not
been
been
expecting.
expecting
In
in
today's
today's
video,
video
we'll
we'll
look
look
at
at
5
5
brand
brand
new
new
features
features
in
in
AngularFire
angularfire
and
and
how
how
they
they
can
can
help
help
simplify
simplify
your
your
AngularFirebase
angularfirebase
project.
project
If
if
you're
you're
new
new
here,
here
like
like
and
and
subscribe,
subscribe
and
and
you
you
can
can
find
find
the
the
full
full
write
write
up
up
on
on
Fireship
fireship
IO.
io
The
the
first
first
new
new
feature
feature
you
you
should
should
be
be
aware
aware
of
of
are
are
the
the
new
new
schematics
schematics
that
that
make
make
it
it
easy
easy
to
to
add
add
AngularFire
angularfire
to
to
an
an
existing
existing
project
project
and
and
then
then
deploy
deploy
it
it
to
to
Firebase
firebase
Hosting.
hosting
All
all
we
we
have
have
to
to
do
do
is
is
run
run
n
n
g
g
add
add
angular
angular
fire
fire
and
and
then
then
select
select
a
a
corresponding
corresponding
Firebase
firebase
project.
project
That
that
will
will
install
install
the
the
necessary
necessary
dependencies
dependencies
and
and
also
also
initialize
initialize
Firebase
firebase
in
in
this
this
project.
project
And
and
another
another
cool
cool
thing
thing
is
is
that
that
it
it
hooks
hooks
into
into
the
the
new
new
builder
builder
API
api
in
in
Angular
angular
8,
8
which
which
allows
allows
us
us
to
to
run
run
a
a
command
command
to
to
deploy
deploy
this
this
project
project
to
to
Firebase
firebase
Hosting.
hosting
In
in
other
other
words,
words
you
you
can
can
go
go
from
from
0
0
to
to
a
a
deployed
deployed
app
app
with
with
just
just
2
2
commands.
commands
The
the
next
next
new
new
feature
feature
you
you
should
should
be
be
aware
aware
of
of
is
is
the
the
integration
integration
of
of
Firebase
firebase
performance.
performance
I
i
already
already
have
have
an
an
entire
entire
video
video
on
on
this
this
topic,
topic
and
and
adding
adding
Firebase
firebase
Perf
perf
to
to
your
your
project
project
is
is
pretty
pretty
much
much
a
a
no
no
brainer.
brainer
But
but
AngularFire
angularfire
is
is
not
not
just
just
a
a
wrapper
wrapper
for
for
performance,
performance
it
it
Stents
stents
it
it
with
with
additional
additional
functionality
functionality
specifically
specifically
for
for
RxJS.
rxjs
You
you
can
can
get
get
basic
basic
performance
performance
reporting
reporting
with
with
a
a
single
single
line
line
of
of
code,
code
or
or
you
you
can
can
use
use
one
one
of
of
the
the
custom
custom
RxJS
rxjs
operators
operators
to
to
run
run
a
a
manual
manual
trace.
trace
This
this
makes
makes
it
it
really
really
easy
easy
to
to
measure
measure
the
the
performance
performance
of
of
things
things
like
like
HTTP
http
calls
calls
because
because
all
all
you
you
have
have
to
to
do
do
is
is
pipe
pipe
in
in
this
this
custom
custom
operator
operator
and
and
everything
everything
else
else
happens
happens
for
for
you
you
automatically.
automatically
The
the
3rd
3rd
new
new
feature
feature
is
is
my
my
favorite,
favorite
and
and
that's
that's
because
because
I
i
wrote
wrote
the
the
code
code
for
for
it.
it
And
and
it's
it's
just
just
a
a
new
new
option
option
on
on
value
value
changes
changes
when
when
listening
listening
to
to
the
the
value
value
of
of
a
a
document
document
or
or
collection.
collection
The
the
option
option
is
is
called
called
ID
id
field,
field
and
and
it
it
allows
allows
you
you
to
to
return
return
the
the
document
document
ID
id
in
in
addition
addition
to
to
the
the
document
document
data.
data
When
when
working
working
with
with
Fire
fire
Store,
store
you
you
often
often
need
need
the
the
document
document
data
data
to
to
show
show
in
in
the
the
UI,
ui
and
and
then
then
you
you
need
need
the
the
ID
id
itself
itself
to
to
make
make
updates
updates
or
or
rights
rights
to
to
the
the
database.
database
But
but
combining
combining
the
the
document
document
ID
id
with
with
the
the
data
data
is
is
an
an
overly
overly
flex
flex
process
process
in
in
my
my
opinion.
opinion
Value
value
changes
changes
returns
returns
an
an
observable
observable
that
that
emits
emits
a
a
JavaScript
javascript
object
object
or
or
an
an
array
array
of
of
objects.
objects
The
the
ID
id
field
field
argument
argument
is
is
optional,
optional
and
and
it
it
will
will
return
return
the
the
document
document
ID
id
mapped
mapped
to
to
a
a
specific
specific
property
property
on
on
the
the
object.
object
So
so
this
this
allows
allows
you
you
to
to
specify
specify
the
the
property
property
name
name
for
for
the
the
ID
id
so
so
you
you
don't
don't
accidentally
accidentally
overwrite
overwrite
some
some
underlying
underlying
data
data
that's
that's
already
already
on
on
the
the
document.
document
So
so
the
the
end
end
result
result
is
is
less
less
complexity
complexity
and
and
fewer
fewer
lines
lines
of
of
code
code
in
in
your
your
front
front
end
end
applications.
applications
Now
now
the
the
next
next
feature
feature
that
that
we'll
we'll
look
look
at
at
is
is
the
the
collection
collection
group
group
query,
query
which
which
is
is
new
new
in
in
Firebase
firebase
version
version
6.
6
This
this
feature
feature
is
is
also
also
covered
covered
in
in
detail
detail
in
in
its
its
own
own
video,
video
but
but
it's
it's
something
something
you
you
should
should
definitely
definitely
be
be
aware
aware
of
of
because
because
it
it
adds
adds
a
a
ton
ton
of
of
flexibility
flexibility
to
to
data
data
modeling
modeling
in
in
Firestore.
firestore
In
in
AngularFire,
angularfire
the
the
usage
usage
looks
looks
like
like
this
this
where
where
we
we
have
have
a
a
reference
reference
to
to
a
a
collection
collection
group
group
that
that
will
will
group
group
all
all
the
the
collections
collections
in
in
the
the
database
database
with
with
that
that
same
same
name,
name
making
making
it
it
possible
possible
to
to
run
run
queries
queries
across
across
all
all
the
the
data
data
contained
contained
in
in
all
all
the
the
subcollections
subcollections
with
with
that
that
same
same
name.
name
Now
now
I
i
saved
saved
the
the
best
best
for
for
last,
last
and
and
that
that
is
is
the
the
AngularFire
angularfire
auth
auth
guard
guard
module.
module
If
if
you've
you've
ever
ever
built
built
something
something
like
like
role
role
based
based
authorization
authorization
in
in
an
an
Angular
angular
Firebase
firebase
app,
app
there's
there's
a
a
good
good
chance
chance
that
that
you
you
have
have
a
a
lot
lot
of
of
complex
complex
code
code
living
living
in
in
your
your
router
router
guards.
guards
Apps
apps
that
that
have
have
a
a
lot
lot
of
of
custom
custom
authorization
authorization
logic
logic
typically
typically
need
need
to
to
lock
lock
down
down
specific
specific
routes
routes
based
based
on
on
a
a
user's
user's
role
role
or
or
authorization
authorization
level.
level
The
the
most
most
simple
simple
use
use
case
case
is
is
when
when
you
you
want
want
to
to
lock
lock
down
down
a
a
route
route
based
based
on
on
whether
whether
or
or
not
not
a
a
user
user
is
is
logged
logged
in.
in
We
we
can
can
now
now
easily
easily
handle
handle
that
that
logic
logic
by
by
simply
simply
dropping
dropping
in
in
the
the
AngularFire
angularfire
auth
auth
Guard
guard
to
to
can
can
activate
activate
on
on
the
the
routes
routes
that
that
we
we
want
want
to
to
apply
apply
it
it
to.
to
But
but
what
what
if
if
we
we
want
want
to
to
redirect
redirect
the
the
user
user
to
to
the
the
login
login
page
page
if
if
this
this
guard
guard
resolves
resolves
to
to
false?
false
The
the
guard
guard
module
module
provides
provides
a
a
can
can
activate
activate
helper
helper
method
method
that
that
allows
allows
us
us
to
to
pass
pass
in
in
a
a
custom
custom
RX
rx
JS
js
operator.
operator
And
and
there's
there's
a
a
bunch
bunch
of
of
built
built
in
in
operators
operators
for
for
the
the
most
most
common
common
situations,
situations
like
like
redirecting
redirecting
an
an
unauthorized
unauthorized
user
user
to
to
a
a
different
different
route,
route
and
and
you
you
can
can
even
even
do
do
the
the
opposite
opposite
of
of
redirecting
redirecting
a
a
logged
logged
in
in
user
user
to
to
a
a
new
new
route.
route
And
and
if
if
the
the
built
built
in
in
functions
functions
aren't
aren't
enough
enough
for
for
you,
you
you
you
can
can
actually
actually
build
build
your
your
own
own
because
because
they're
they're
just
just
custom
custom
RxJS
rxjs
Operators
operators
under
under
the
the
hood.
hood
And
and
a
a
custom
custom
RxJS
rxjs
Operator
operator
is
is
just
just
a
a
JavaScript
javascript
function.
function
We'll
we'll
go
go
ahead
ahead
and
and
create
create
our
our
own
own
auth
auth
pipe,
pipe
which
which
is
is
a
a
function
function
that
that
should
should
return
return
an
an
observable
observable
of
of
a
a
boolean
boolean
or
or
an
an
array
array
of
of
strings
strings
if
if
we
we
want
want
to
to
redirect
redirect
the
the
user
user
to
to
a
a
new
new
route.
route
We
we
can
can
easily
easily
do
do
this
this
by
by
using
using
the
the
RX
rx
JS
js
map
map
operator,
operator
And
and
its
its
callback
callback
function
function
will
will
give
give
us
us
access
access
to
to
the
the
Firebase
firebase
user,
user
which
which
we
we
can
can
use
use
to
to
determine
determine
whether
whether
or
or
not
not
this
this
user
user
is
is
authorized
authorized
to
to
visit
visit
this
this
route.
route
For
for
the
the
Gefguard,
gefguard
we're
we're
going
going
to
to
make
make
sure
sure
that
that
the
the
user's
user's
display
display
name
name
contains
contains
the
the
substring
substring
of
of
Jeff.
jeff
And
and
now
now
we
we
can
can
use
use
this
this
logic
logic
by
by
simply
simply
combining
combining
it
it
with
with
the
the
can
can
activate
activate
helper.
helper
So
so
overall,
overall
the
the
AuthGuard
authguard
module
module
provides
provides
a
a
much
much
simpler
simpler
and
and
concise
concise
way
way
to
to
write
write
authorization
authorization
logic
logic
with
with
the
the
Angular
angular
router.
router
In
in
most
most
Cases
cases
all
all
the
the
hard
hard
work
work
will
will
be
be
done
done
for
for
you,
you
but
but
if
if
you
you
want
want
to
to
implement
implement
your
your
own
own
custom
custom
logic,
logic
it's
it's
just
just
a
a
matter
matter
of
of
writing
writing
a
a
function.
function
Overall,
overall
Angular
angular
version
version
5.2
5.2
adds
adds
a
a
ton
ton
of
of
new
new
functionality
functionality
and
and
does
does
a
a
lot
lot
of
of
things
things
to
to
help
help
simplify
simplify
your
your
code.
code
I'm
i'm
gonna
gonna
go
go
ahead
ahead
and
and
wrap
wrap
things
things
up
up
there.
there
If
if
this
this
video
video
helped
helped
you,
you
please
please
like
like
and
and
subscribe
subscribe
and
and
Consider
consider
becoming
becoming
a
a
pro
pro
member
member
at
at
Fireship
fireship
IO
io
to
to
get
get
access
access
to
to
even
even
more
more
content.
content
Thanks
thanks
for
for
watching,
watching
and
and
I
i
will
will
talk
talk
to
to
you
you
soon.
soon
success
The speaker discusses new releases for Angular and reminded viewers to use the Fireship IO for more information. They also mention new features for AngularFinancial, including the integration of Azure performance, the use of the Sch recognize command, and the collection group query. The speaker also discusses the use of the Ross guard module for redirecting users to a new login page and the use of a custom authorization method for the Angular version 5.2. Overall, the speaker emphasizes the benefits of the Angular version 5.2 and encourages viewers to consider becoming a pro member.
5 Cool New Features in AngularFire
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 5 brand new features in AngularFire and how they can help simplify your AngularFirebase project. If you're new here, like and subscribe, and you can find the full write up on Fireship IO. The first new feature you should be aware of are the new schematics that make it easy to add AngularFire to an existing project and then deploy it to Firebase Hosting. All we have to do is run n g 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 in Angular 8, which allows us to run a command to deploy this project to Firebase Hosting. In other words, you can go from 0 to a deployed app with just 2 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 AngularFire is not just a wrapper for performance, it Stents 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 3rd 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 Fire Store, 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 flex 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 mapped 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 in Firebase version 6. 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 in Firestore. In AngularFire, 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 subcollections with that same name. Now I saved the best for last, and that is the AngularFire auth guard 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 Guard to 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 resolves to false? The guard module provides a can activate helper method that allows us to pass in a custom RX JS 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 RX JS 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 Gefguard, we're going to make sure that the user's display name contains the substring of Jeff. And now we can use this logic by simply combining it with the can activate helper. So overall, the AuthGuard 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. Overall, 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 like and subscribe and Consider becoming a pro member at Fireship IO to get access to even more content. Thanks for watching, and I will talk to you soon.
The speaker discusses new releases for Angular and reminded viewers to use the Fireship IO for more information. They also mention new features for AngularFinancial, including the integration of Azure performance, the use of the Sch recognize command, and the collection group query. The speaker also discusses the use of the Ross guard module for redirecting users to a new login page and the use of a custom authorization method for the Angular version 5.2. Overall, the speaker emphasizes the benefits of the Angular version 5.2 and encourages viewers to consider becoming a pro member.