2024-02-04T08:30:28.025Z
nova-2
2-general-nova
2024-01-09.29447
30089e05-99d1-4376-b32e-c263170674af
3b9da5b6-3735-4ea5-b4c5-8b2c4264b955
dba92bcfe60d11fa3baaadef0ad11406dea951ab325016510d4ce654eef6df8a
67875a7f-c9c4-48a0-aa55-5bdb8a91c34a
deprecated
In this episode, we're going to build a follow, unfollow feature similar to Twitter using Angular 4 on the front end and Firebase NoSQL on the back end.
In order to get started with this lesson, you'll need to have Firebase authentication already wired up in your Angular app.
If If you don't have that done, check out the link in the top right corner for a lesson completely dedicated to authentication.
Let's start by modeling the data.
In a standard SQL database, you could set up a many to many relationship.
But since we're dealing with NoSQL, we have to do things a little differently.
The database needs to answer 2 fundamental questions.
1st, is the current user following any other given user?
And second, what is a user's follower count?
The first question can be answered by saving a user's followers under their own user ID.
And the second question can be answered by doing the exact opposite, saving each followed user ID under their around user ID.
Let's start putting this together in a service that we'll call the follow service.
First, we import the AngularFire 2 database.
Then we create a function to get a user's as followers.
This will be used primarily to build the follower count.
It simply requests the database object based on the user ID that's passed as an argument.
Next, we create a function that will tell us whether or not user a is following user b.
It gets passed 2 user IDs as arguments and will query the database for that specific key value pair.
If it returns true, we know that That relationship exists and if it returns null then we know that that user is not following the other user.
From there, we can start building our follow-up function, which will update the database with the relationship when the user decides to follow another user.
This will make 2 separate database operations for each of the 2 collections that we've created.
The unfollow method follows the Same approach, but instead of updating the database, we just remove that key value pair.
Now let's go ahead and build out the component.
It's important to first point out that we have The Firebase list observable of users that we've pulled from the database, and we're gonna pass that to the child user profile component.
And we're also gonna pass in the current user that's authenticated in our app.
In the user Profile component, we start by injecting the follow service and we also import the size function from Lodash which will help us with the follower count.
The Input decorator can be used to accept the variables from the parent component.
And we also set a follower count and is following variable.
As well as variables for the subscriptions themselves that we can unsubscribe to to prevent memory leaks.
First I set the current user ID and the profile user ID at constants just to make the code more readable.
Then we can subscribe to the Firebase Object Observable we've defined in the service to see if The current user is following the user in this profile.
It'll emit a true value if the current user is following this user.
And if not, it'll just emit null.
Then a second subscription is set up to get the follower count.
I set up a separate function to perform the follower count because there's one small caveat that you'll wanna be aware of.
When a Firebase object observable returns null, it still has a value key on it.
And so the lodash size functional return 1 when the real user count should actually be 0.
From there, a function is set up to toggle the relationship between the current user and that user's profile.
If isFollowing is true, Then we trigger the unfollow function and if it's false we trigger the follow function.
The final step is to tear down these subscriptions during the onDestroy lifecycle hook.
In the template, we start by building just a basic user profile.
And then we can use the ng if directive along with the new if then else syntax in Angular 4 to display a conditional template.
When the isFollowing variable is true, we want to display the unfollow button and when it's false we want to display the opposite follow button.
From there we can create a couple NG templates each one that has its own button and will fire the toggle follow function when the click event occurs.
Now if we go back to the app we can see the follow and unfollow buttons are updating the database in real time.
That's it for this episode.
If you found the video helpful, please like and scribe.
And if you wanna support the channel, consider becoming a pro subscriber at angularfirebase.com.
For just a few bucks a month, you'll get access to exclusive content as well as free 1 on 1 project consulting.
Thanks for watching and I'll see you next time.

Speaker 0: In this episode, we're going to build a follow, unfollow feature similar to Twitter using Angular 4 on the front end and Firebase NoSQL on the back end. In order to get started with this lesson, you'll need to have Firebase authentication already wired up in your Angular app. If If you don't have that done, check out the link in the top right corner for a lesson completely dedicated to authentication. Let's start by modeling the data. In a standard SQL database, you could set up a many to many relationship.

But since we're dealing with NoSQL, we have to do things a little differently. The database needs to answer 2 fundamental questions. 1st, is the current user following any other given user? And second, what is a user's follower count? The first question can be answered by saving a user's followers under their own user ID.

And the second question can be answered by doing the exact opposite, saving each followed user ID under their around user ID. Let's start putting this together in a service that we'll call the follow service. First, we import the AngularFire 2 database. Then we create a function to get a user's as followers. This will be used primarily to build the follower count.

It simply requests the database object based on the user ID that's passed as an argument. Next, we create a function that will tell us whether or not user a is following user b. It gets passed 2 user IDs as arguments and will query the database for that specific key value pair. If it returns true, we know that That relationship exists and if it returns null then we know that that user is not following the other user. From there, we can start building our follow-up function, which will update the database with the relationship when the user decides to follow another user.

This will make 2 separate database operations for each of the 2 collections that we've created. The unfollow method follows the Same approach, but instead of updating the database, we just remove that key value pair. Now let's go ahead and build out the component. It's important to first point out that we have The Firebase list observable of users that we've pulled from the database, and we're gonna pass that to the child user profile component. And we're also gonna pass in the current user that's authenticated in our app.

In the user Profile component, we start by injecting the follow service and we also import the size function from Lodash which will help us with the follower count. The Input decorator can be used to accept the variables from the parent component. And we also set a follower count and is following variable. As well as variables for the subscriptions themselves that we can unsubscribe to to prevent memory leaks. First I set the current user ID and the profile user ID at constants just to make the code more readable.

Then we can subscribe to the Firebase Object Observable we've defined in the service to see if The current user is following the user in this profile. It'll emit a true value if the current user is following this user. And if not, it'll just emit null. Then a second subscription is set up to get the follower count. I set up a separate function to perform the follower count because there's one small caveat that you'll wanna be aware of.

When a Firebase object observable returns null, it still has a value key on it. And so the lodash size functional return 1 when the real user count should actually be 0. From there, a function is set up to toggle the relationship between the current user and that user's profile. If isFollowing is true, Then we trigger the unfollow function and if it's false we trigger the follow function. The final step is to tear down these subscriptions during the onDestroy lifecycle hook.

In the template, we start by building just a basic user profile. And then we can use the ng if directive along with the new if then else syntax in Angular 4 to display a conditional template. When the isFollowing variable is true, we want to display the unfollow button and when it's false we want to display the opposite follow button. From there we can create a couple NG templates each one that has its own button and will fire the toggle follow function when the click event occurs. Now if we go back to the app we can see the follow and unfollow buttons are updating the database in real time.

That's it for this episode. If you found the video helpful, please like and scribe. And if you wanna support the channel, consider becoming a pro subscriber at angularfirebase.com. For just a few bucks a month, you'll get access to exclusive content as well as free 1 on 1 project consulting. Thanks for watching and I'll see you next time.
In this episode, we're going to build a follow, unfollow feature similar to Twitter using Angular 4 on the front end and Firebase NoSQL on the back end. In order to get started with this lesson, you'll need to have Firebase authentication already wired up in your Angular app. If If you don't have that done, check out the link in the top right corner for a lesson completely dedicated to authentication.
Let's start by modeling the data. In a standard SQL database, you could set up a many to many relationship. But since we're dealing with NoSQL, we have to do things a little differently. The database needs to answer 2 fundamental questions. 1st, is the current user following any other given user?
databases
data management
data
And second, what is a user's follower count? The first question can be answered by saving a user's followers under their own user ID. And the second question can be answered by doing the exact opposite, saving each followed user ID under their around user ID. Let's start putting this together in a service that we'll call the follow service. First, we import the AngularFire 2 database. Then we create a function to get a user's as followers. This will be used primarily to build the follower count. It simply requests the database object based on the user ID that's passed as an argument. Next, we create a function that will tell us whether or not user a is following user b. It gets passed 2 user IDs as arguments and will query the database for that specific key value pair. If it returns true, we know that That relationship exists and if it returns null then we know that that user is not following the other user.
From there, we can start building our follow-up function, which will update the database with the relationship when the user decides to follow another user. This will make 2 separate database operations for each of the 2 collections that we've created. The unfollow method follows the Same approach, but instead of updating the database, we just remove that key value pair. Now let's go ahead and build out the component. It's important to first point out that we have The Firebase list observable of users that we've pulled from the database, and we're gonna pass that to the child user profile component.
databases
data management
And we're also gonna pass in the current user that's authenticated in our app. In the user Profile component, we start by injecting the follow service and we also import the size function from Lodash which will help us with the follower count. The Input decorator can be used to accept the variables from the parent component. And we also set a follower count and is following variable. As well as variables for the subscriptions themselves that we can unsubscribe to to prevent memory leaks. First I set the current user ID and the profile user ID at constants just to make the code more readable. Then we can subscribe to the Firebase Object Observable we've defined in the service to see if The current user is following the user in this profile. It'll emit a true value if the current user is following this user. And if not, it'll just emit null. Then a second subscription is set up to get the follower count. I set up a separate function to perform the follower count because there's one small caveat that you'll wanna be aware of. When a Firebase object observable returns null, it still has a value key on it. And so the lodash size functional return 1 when the real user count should actually be 0. From there, a function is set up to toggle the relationship between the current user and that user's profile. If isFollowing is true, Then we trigger the unfollow function and if it's false we trigger the follow function. The final step is to tear down these subscriptions during the onDestroy lifecycle hook. In the template, we start by building just a basic user profile. And then we can use the ng if directive along with the new if then else syntax in Angular 4 to display a conditional template. When the isFollowing variable is true, we want to display the unfollow button and when it's false we want to display the opposite follow button. From there we can create a couple NG templates each one that has its own button and will fire the toggle follow function when the click event occurs.
Now if we go back to the app we can see the follow and unfollow buttons are updating the database in real time. That's it for this episode. If you found the video helpful, please like and scribe. And if you wanna support the channel, consider becoming a pro subscriber at angularfirebase.com. For just a few bucks a month, you'll get access to exclusive content as well as free 1 on 1 project consulting. Thanks for watching and I'll see you next time.
youtube
streaming
customer support
podcasts
In this episode, we're going to build a follow, unfollow feature similar to Twitter using Angular 4 on the front end and Firebase NoSQL on the back end. In order to get started with this lesson, you'll need to have Firebase authentication already wired up in your Angular app. If If you don't have that done, check out the link in the top right corner for a lesson completely dedicated to authentication. Let's start by modeling the data. In a standard SQL database, you could set up a many to many relationship. But since we're dealing with NoSQL, we have to do things a little differently. The database needs to answer 2 fundamental questions. 1st, is the current user following any other given user? And second, what is a user's follower count? The first question can be answered by saving a user's followers under their own user ID. And the second question can be answered by doing the exact opposite, saving each followed user ID under their around user ID. Let's start putting this together in a service that we'll call the follow service. First, we import the AngularFire 2 database. Then we create a function to get a user's as followers. This will be used primarily to build the follower count. It simply requests the database object based on the user ID that's passed as an argument. Next, we create a function that will tell us whether or not user a is following user b. It gets passed 2 user IDs as arguments and will query the database for that specific key value pair. If it returns true, we know that That relationship exists and if it returns null then we know that that user is not following the other user. From there, we can start building our follow-up function, which will update the database with the relationship when the user decides to follow another user. This will make 2 separate database operations for each of the 2 collections that we've created. The unfollow method follows the Same approach, but instead of updating the database, we just remove that key value pair. Now let's go ahead and build out the component. It's important to first point out that we have The Firebase list observable of users that we've pulled from the database, and we're gonna pass that to the child user profile component. And we're also gonna pass in the current user that's authenticated in our app. In the user Profile component, we start by injecting the follow service and we also import the size function from Lodash which will help us with the follower count. The Input decorator can be used to accept the variables from the parent component. And we also set a follower count and is following variable. As well as variables for the subscriptions themselves that we can unsubscribe to to prevent memory leaks. First I set the current user ID and the profile user ID at constants just to make the code more readable. Then we can subscribe to the Firebase Object Observable we've defined in the service to see if The current user is following the user in this profile. It'll emit a true value if the current user is following this user. And if not, it'll just emit null. Then a second subscription is set up to get the follower count. I set up a separate function to perform the follower count because there's one small caveat that you'll wanna be aware of. When a Firebase object observable returns null, it still has a value key on it. And so the lodash size functional return 1 when the real user count should actually be 0. From there, a function is set up to toggle the relationship between the current user and that user's profile. If isFollowing is true, Then we trigger the unfollow function and if it's false we trigger the follow function. The final step is to tear down these subscriptions during the onDestroy lifecycle hook. In the template, we start by building just a basic user profile. And then we can use the ng if directive along with the new if then else syntax in Angular 4 to display a conditional template. When the isFollowing variable is true, we want to display the unfollow button and when it's false we want to display the opposite follow button. From there we can create a couple NG templates each one that has its own button and will fire the toggle follow function when the click event occurs. Now if we go back to the app we can see the follow and unfollow buttons are updating the database in real time. That's it for this episode. If you found the video helpful, please like and scribe. And if you wanna support the channel, consider becoming a pro subscriber at angularfirebase.com. For just a few bucks a month, you'll get access to exclusive content as well as free 1 on 1 project consulting. Thanks for watching and I'll see you next time.
In
in
this
this
episode,
episode
we're
we're
going
going
to
to
build
build
a
a
follow,
follow
unfollow
unfollow
feature
feature
similar
similar
to
to
Twitter
twitter
using
using
Angular
angular
4
4
on
on
the
the
front
front
end
end
and
and
Firebase
firebase
NoSQL
nosql
on
on
the
the
back
back
end.
end
In
in
order
order
to
to
get
get
started
started
with
with
this
this
lesson,
lesson
you'll
you'll
need
need
to
to
have
have
Firebase
firebase
authentication
authentication
already
already
wired
wired
up
up
in
in
your
your
Angular
angular
app.
app
If
if
If
if
you
you
don't
don't
have
have
that
that
done,
done
check
check
out
out
the
the
link
link
in
in
the
the
top
top
right
right
corner
corner
for
for
a
a
lesson
lesson
completely
completely
dedicated
dedicated
to
to
authentication.
authentication
Let's
let's
start
start
by
by
modeling
modeling
the
the
data.
data
In
in
a
a
standard
standard
SQL
sql
database,
database
you
you
could
could
set
set
up
up
a
a
many
many
to
to
many
many
relationship.
relationship
But
but
since
since
we're
we're
dealing
dealing
with
with
NoSQL,
nosql
we
we
have
have
to
to
do
do
things
things
a
a
little
little
differently.
differently
The
the
database
database
needs
needs
to
to
answer
answer
2
2
fundamental
fundamental
questions.
questions
1st,
1st
is
is
the
the
current
current
user
user
following
following
any
any
other
other
given
given
user?
user
And
and
second,
second
what
what
is
is
a
a
user's
user's
follower
follower
count?
count
The
the
first
first
question
question
can
can
be
be
answered
answered
by
by
saving
saving
a
a
user's
user's
followers
followers
under
under
their
their
own
own
user
user
ID.
id
And
and
the
the
second
second
question
question
can
can
be
be
answered
answered
by
by
doing
doing
the
the
exact
exact
opposite,
opposite
saving
saving
each
each
followed
followed
user
user
ID
id
under
under
their
their
around
around
user
user
ID.
id
Let's
let's
start
start
putting
putting
this
this
together
together
in
in
a
a
service
service
that
that
we'll
we'll
call
call
the
the
follow
follow
service.
service
First,
first
we
we
import
import
the
the
AngularFire
angularfire
2
2
database.
database
Then
then
we
we
create
create
a
a
function
function
to
to
get
get
a
a
user's
user's
as
as
followers.
followers
This
this
will
will
be
be
used
used
primarily
primarily
to
to
build
build
the
the
follower
follower
count.
count
It
it
simply
simply
requests
requests
the
the
database
database
object
object
based
based
on
on
the
the
user
user
ID
id
that's
that's
passed
passed
as
as
an
an
argument.
argument
Next,
next
we
we
create
create
a
a
function
function
that
that
will
will
tell
tell
us
us
whether
whether
or
or
not
not
user
user
a
a
is
is
following
following
user
user
b.
b
It
it
gets
gets
passed
passed
2
2
user
user
IDs
ids
as
as
arguments
arguments
and
and
will
will
query
query
the
the
database
database
for
for
that
that
specific
specific
key
key
value
value
pair.
pair
If
if
it
it
returns
returns
true,
true
we
we
know
know
that
that
That
that
relationship
relationship
exists
exists
and
and
if
if
it
it
returns
returns
null
null
then
then
we
we
know
know
that
that
that
that
user
user
is
is
not
not
following
following
the
the
other
other
user.
user
From
from
there,
there
we
we
can
can
start
start
building
building
our
our
follow-up
follow-up
function,
function
which
which
will
will
update
update
the
the
database
database
with
with
the
the
relationship
relationship
when
when
the
the
user
user
decides
decides
to
to
follow
follow
another
another
user.
user
This
this
will
will
make
make
2
2
separate
separate
database
database
operations
operations
for
for
each
each
of
of
the
the
2
2
collections
collections
that
that
we've
we've
created.
created
The
the
unfollow
unfollow
method
method
follows
follows
the
the
Same
same
approach,
approach
but
but
instead
instead
of
of
updating
updating
the
the
database,
database
we
we
just
just
remove
remove
that
that
key
key
value
value
pair.
pair
Now
now
let's
let's
go
go
ahead
ahead
and
and
build
build
out
out
the
the
component.
component
It's
it's
important
important
to
to
first
first
point
point
out
out
that
that
we
we
have
have
The
the
Firebase
firebase
list
list
observable
observable
of
of
users
users
that
that
we've
we've
pulled
pulled
from
from
the
the
database,
database
and
and
we're
we're
gonna
gonna
pass
pass
that
that
to
to
the
the
child
child
user
user
profile
profile
component.
component
And
and
we're
we're
also
also
gonna
gonna
pass
pass
in
in
the
the
current
current
user
user
that's
that's
authenticated
authenticated
in
in
our
our
app.
app
In
in
the
the
user
user
Profile
profile
component,
component
we
we
start
start
by
by
injecting
injecting
the
the
follow
follow
service
service
and
and
we
we
also
also
import
import
the
the
size
size
function
function
from
from
Lodash
lodash
which
which
will
will
help
help
us
us
with
with
the
the
follower
follower
count.
count
The
the
Input
input
decorator
decorator
can
can
be
be
used
used
to
to
accept
accept
the
the
variables
variables
from
from
the
the
parent
parent
component.
component
And
and
we
we
also
also
set
set
a
a
follower
follower
count
count
and
and
is
is
following
following
variable.
variable
As
as
well
well
as
as
variables
variables
for
for
the
the
subscriptions
subscriptions
themselves
themselves
that
that
we
we
can
can
unsubscribe
unsubscribe
to
to
to
to
prevent
prevent
memory
memory
leaks.
leaks
First
first
I
i
set
set
the
the
current
current
user
user
ID
id
and
and
the
the
profile
profile
user
user
ID
id
at
at
constants
constants
just
just
to
to
make
make
the
the
code
code
more
more
readable.
readable
Then
then
we
we
can
can
subscribe
subscribe
to
to
the
the
Firebase
firebase
Object
object
Observable
observable
we've
we've
defined
defined
in
in
the
the
service
service
to
to
see
see
if
if
The
the
current
current
user
user
is
is
following
following
the
the
user
user
in
in
this
this
profile.
profile
It'll
it'll
emit
emit
a
a
true
true
value
value
if
if
the
the
current
current
user
user
is
is
following
following
this
this
user.
user
And
and
if
if
not,
not
it'll
it'll
just
just
emit
emit
null.
null
Then
then
a
a
second
second
subscription
subscription
is
is
set
set
up
up
to
to
get
get
the
the
follower
follower
count.
count
I
i
set
set
up
up
a
a
separate
separate
function
function
to
to
perform
perform
the
the
follower
follower
count
count
because
because
there's
there's
one
one
small
small
caveat
caveat
that
that
you'll
you'll
wanna
wanna
be
be
aware
aware
of.
of
When
when
a
a
Firebase
firebase
object
object
observable
observable
returns
returns
null,
null
it
it
still
still
has
has
a
a
value
value
key
key
on
on
it.
it
And
and
so
so
the
the
lodash
lodash
size
size
functional
functional
return
return
1
1
when
when
the
the
real
real
user
user
count
count
should
should
actually
actually
be
be
0.
0
From
from
there,
there
a
a
function
function
is
is
set
set
up
up
to
to
toggle
toggle
the
the
relationship
relationship
between
between
the
the
current
current
user
user
and
and
that
that
user's
user's
profile.
profile
If
if
isFollowing
isfollowing
is
is
true,
true
Then
then
we
we
trigger
trigger
the
the
unfollow
unfollow
function
function
and
and
if
if
it's
it's
false
false
we
we
trigger
trigger
the
the
follow
follow
function.
function
The
the
final
final
step
step
is
is
to
to
tear
tear
down
down
these
these
subscriptions
subscriptions
during
during
the
the
onDestroy
ondestroy
lifecycle
lifecycle
hook.
hook
In
in
the
the
template,
template
we
we
start
start
by
by
building
building
just
just
a
a
basic
basic
user
user
profile.
profile
And
and
then
then
we
we
can
can
use
use
the
the
ng
ng
if
if
directive
directive
along
along
with
with
the
the
new
new
if
if
then
then
else
else
syntax
syntax
in
in
Angular
angular
4
4
to
to
display
display
a
a
conditional
conditional
template.
template
When
when
the
the
isFollowing
isfollowing
variable
variable
is
is
true,
true
we
we
want
want
to
to
display
display
the
the
unfollow
unfollow
button
button
and
and
when
when
it's
it's
false
false
we
we
want
want
to
to
display
display
the
the
opposite
opposite
follow
follow
button.
button
From
from
there
there
we
we
can
can
create
create
a
a
couple
couple
NG
ng
templates
templates
each
each
one
one
that
that
has
has
its
its
own
own
button
button
and
and
will
will
fire
fire
the
the
toggle
toggle
follow
follow
function
function
when
when
the
the
click
click
event
event
occurs.
occurs
Now
now
if
if
we
we
go
go
back
back
to
to
the
the
app
app
we
we
can
can
see
see
the
the
follow
follow
and
and
unfollow
unfollow
buttons
buttons
are
are
updating
updating
the
the
database
database
in
in
real
real
time.
time
That's
that's
it
it
for
for
this
this
episode.
episode
If
if
you
you
found
found
the
the
video
video
helpful,
helpful
please
please
like
like
and
and
scribe.
scribe
And
and
if
if
you
you
wanna
wanna
support
support
the
the
channel,
channel
consider
consider
becoming
becoming
a
a
pro
pro
subscriber
subscriber
at
at
angularfirebase.com.
angularfirebase.com
For
for
just
just
a
a
few
few
bucks
bucks
a
a
month,
month
you'll
you'll
get
get
access
access
to
to
exclusive
exclusive
content
content
as
as
well
well
as
as
free
free
1
1
on
on
1
1
project
project
consulting.
consulting
Thanks
thanks
for
for
watching
watching
and
and
I'll
i'll
see
see
you
you
next
next
time.
time
success
The speaker explains how to build a follow-up feature for the Angular app using the Angularipping and reminded viewers to have their They're already wired up in the Angular app. They then proceed to model the data and create a follow-up service, including importing the Angular assumption 2 database and creating a function to get a user's followers. They then build a user profile component, including injecting the follow service and setting up a subscription to the user's profile. The speaker explains the subscriptions and the use of the beater count function to read the database and update the database.
Twitter-Inspired Follow Unfollow Feature with Firebase and Angular 4
https://angularfirebase.com/lessons/twitter-inspired-follow-system-with-firebase-and-angular/

Learn how to build a Twitter-style follow/unfollow feature for Firebase uses in Angular 4.