Fully documented lesson at https://angularfirebase.com/lessons/facebook-inspired-reactions-from-scratch-with-angular-and-firebase/

Learn how to create Facebook style reactions with Angular 4 and Firebase NoSQL  from scratch.
2024-02-04T08:27:23.883Z
nova-2
2-general-nova
2024-01-09.29447
30089e05-99d1-4376-b32e-c263170674af
9f7be4b2-7628-4f4e-8d66-80004ea86ebf
fc6973ec14186d9af9786c63cb3610e2b55a24e0b23eadaba9ec8729a4ab4b60
67875a7f-c9c4-48a0-aa55-5bdb8a91c34a
deprecated
In this episode, we're going to replicate Facebook reactions using Angular 4 and Firebase.
1st, let's head over to Facebook just to see how it works.
You can hover over a like button which brings up a tooltip with all the different reactions.
When you click a reaction it update your own as well as the list of other users' reactions below that.
First thing we're gonna do is import the graphics into our project.
I found some free Facebook icons on iconfinder.com and then saved them under the assets folder in the Angular project.
Now we can generate the reaction service and import the AngularFire auth module as well as the database module.
We're also gonna make heavy use of Lodash to handle the sorting and counting of reactions.
We'll keep track of the user ID on the service, and then we create an array of the actual emoji graphics.
We want each emoji to be tied to a specific index, and we'll save that index in the database.
In this case, like will be 0, love 1, wow 2, etcetera.
So our database is a collection of item IDs, things that can be reacted to, and each document is the keys of the users and the number that corresponds to their reaction.
The first thing we'll do is get the associated reactions for an item as a Firebase object observable.
Next, we create a function that allows the user to update their reaction, which has a default value of 0 for like.
We format the data by passing the user ID as the key and the reaction as the value, and then we just update that object in Firebase.
Following the same idea, we create another function that allows a user to remove their reaction from the database.
Now we create a utility function to count the reactions that come back from Firebase.
It returns a JavaScript object where the key is the value of the reaction, and the value is the number of reactions for that type.
We'll use it to display the total count for each reaction type in the component template.
The final step is you determine the current user's reaction, so we just check the object for that specific user ID.
Now we can start building the front end component.
First we're going to need the input decorator as well as on destroy.
And we'll also inject the reaction service, and we'll use Lodash in here as well.
The component will accept an input variable, which represents a parent's ID, that can be any kind of content that can be reacted to.
Then we'll declare a few other variables that represent the data we're gonna be showing in the template.
During n g on a net, we first get the list of emoji, then we subscribe to the object observable.
When it emits a value, it'll be a JavaScript object of user IDs and their reactions.
We can use this object to count the total reactions for each type, as well as determine the current user's reaction.
From there, we create an event handler that will actually update or remove a reaction.
If the user already has a reaction with a matching value, then we'll go ahead and delete that reaction.
If the value is different.
It means the user's updating or creating a new reaction, so we go ahead and update that in the database.
Next, we create another event handler that will fire when the user hovers over the like button, which will show the emojis.
And we create a utility method to return the emoji image path in the assets folder.
And one more utility method to see if a reaction type has reactions, so we know whether or not to display it in the template.
Then we unsubscribe when the component's destroyed to avoid memory leaks.
Now let's put this all together in the component HTML.
First, we create a wrapper around everything and use the mouse enter mouse leave events to toggle the visibility of the emojis.
Inside this div, we loop over the 6 emojis and use our emoji path helper to find that associated graphic in the assets folder.
Notice how we also get the index while looping through this array because that will be the value we saved to the database corresponding to this reaction type.
Next, we'll add a like button that the user can click that will add just a generic like.
If the user has liked this piece of content, we'll go ahead and add a conditional class that will color it blue and make it bold.
And, also, we wanna display the type of reaction the user has had.
In both cases, we check to see if the user reaction is not null.
We can use the value of the reaction to get the corresponding emoji from the emoji list and its index.
Now we need to display the total reaction count.
We do this by looping over the emoji list again and we'll see if a reaction has taken place, and then we'll get the total count for that reaction.
Just like before, we use the emoji path helper to play the corresponding image.
Then we can get the count from our reaction count object by just passing it that index.
Let's try it out in the app.
If we hover over the like button.
It should bring up the emojis.
And if we click it, it should add a like telling us what the like type is.
The reaction counts are all kept up to date in real time.
So if we have multiple users reacting to the same piece of content, we'll see the reaction counts be updated in real time.
When looking into the database console, we can see that when a user clicks a reaction, it adds their user ID key and the value for that reaction to the database.
That's it for this episode.
If you found the video helpful, please like and subscribe.
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 insulting.
Thanks for watching, and I'll see you next time.

Speaker 0: In this episode, we're going to replicate Facebook reactions using Angular 4 and Firebase. 1st, let's head over to Facebook just to see how it works. You can hover over a like button which brings up a tooltip with all the different reactions. When you click a reaction it update your own as well as the list of other users' reactions below that. First thing we're gonna do is import the graphics into our project.

I found some free Facebook icons on iconfinder.com and then saved them under the assets folder in the Angular project. Now we can generate the reaction service and import the AngularFire auth module as well as the database module. We're also gonna make heavy use of Lodash to handle the sorting and counting of reactions. We'll keep track of the user ID on the service, and then we create an array of the actual emoji graphics. We want each emoji to be tied to a specific index, and we'll save that index in the database.

In this case, like will be 0, love 1, wow 2, etcetera. So our database is a collection of item IDs, things that can be reacted to, and each document is the keys of the users and the number that corresponds to their reaction. The first thing we'll do is get the associated reactions for an item as a Firebase object observable. Next, we create a function that allows the user to update their reaction, which has a default value of 0 for like. We format the data by passing the user ID as the key and the reaction as the value, and then we just update that object in Firebase.

Following the same idea, we create another function that allows a user to remove their reaction from the database. Now we create a utility function to count the reactions that come back from Firebase. It returns a JavaScript object where the key is the value of the reaction, and the value is the number of reactions for that type. We'll use it to display the total count for each reaction type in the component template. The final step is you determine the current user's reaction, so we just check the object for that specific user ID.

Now we can start building the front end component. First we're going to need the input decorator as well as on destroy. And we'll also inject the reaction service, and we'll use Lodash in here as well. The component will accept an input variable, which represents a parent's ID, that can be any kind of content that can be reacted to. Then we'll declare a few other variables that represent the data we're gonna be showing in the template.

During n g on a net, we first get the list of emoji, then we subscribe to the object observable. When it emits a value, it'll be a JavaScript object of user IDs and their reactions. We can use this object to count the total reactions for each type, as well as determine the current user's reaction. From there, we create an event handler that will actually update or remove a reaction. If the user already has a reaction with a matching value, then we'll go ahead and delete that reaction.

If the value is different. It means the user's updating or creating a new reaction, so we go ahead and update that in the database. Next, we create another event handler that will fire when the user hovers over the like button, which will show the emojis. And we create a utility method to return the emoji image path in the assets folder. And one more utility method to see if a reaction type has reactions, so we know whether or not to display it in the template.

Then we unsubscribe when the component's destroyed to avoid memory leaks. Now let's put this all together in the component HTML. First, we create a wrapper around everything and use the mouse enter mouse leave events to toggle the visibility of the emojis. Inside this div, we loop over the 6 emojis and use our emoji path helper to find that associated graphic in the assets folder. Notice how we also get the index while looping through this array because that will be the value we saved to the database corresponding to this reaction type.

Next, we'll add a like button that the user can click that will add just a generic like. If the user has liked this piece of content, we'll go ahead and add a conditional class that will color it blue and make it bold. And, also, we wanna display the type of reaction the user has had. In both cases, we check to see if the user reaction is not null. We can use the value of the reaction to get the corresponding emoji from the emoji list and its index.

Now we need to display the total reaction count. We do this by looping over the emoji list again and we'll see if a reaction has taken place, and then we'll get the total count for that reaction. Just like before, we use the emoji path helper to play the corresponding image. Then we can get the count from our reaction count object by just passing it that index. Let's try it out in the app.

If we hover over the like button. It should bring up the emojis. And if we click it, it should add a like telling us what the like type is. The reaction counts are all kept up to date in real time. So if we have multiple users reacting to the same piece of content, we'll see the reaction counts be updated in real time.

When looking into the database console, we can see that when a user clicks a reaction, it adds their user ID key and the value for that reaction to the database. That's it for this episode. If you found the video helpful, please like and subscribe. 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 insulting.

Thanks for watching, and I'll see you next time.
In this episode, we're going to replicate Facebook reactions using Angular 4 and Firebase. 1st, let's head over to Facebook just to see how it works.
You can hover over a like button which brings up a tooltip with all the different reactions. When you click a reaction it update your own as well as the list of other users' reactions below that. First thing we're gonna do is import the graphics into our project. I found some free Facebook icons on iconfinder.com and then saved them under the assets folder in the Angular project.
animation
Now we can generate the reaction service and import the AngularFire auth module as well as the database module. We're also gonna make heavy use of Lodash to handle the sorting and counting of reactions. We'll keep track of the user ID on the service, and then we create an array of the actual emoji graphics. We want each emoji to be tied to a specific index, and we'll save that index in the database.
In this case, like will be 0, love 1, wow 2, etcetera. So our database is a collection of item IDs, things that can be reacted to, and each document is the keys of the users and the number that corresponds to their reaction. The first thing we'll do is get the associated reactions for an item as a Firebase object observable.
databases
data
Next, we create a function that allows the user to update their reaction, which has a default value of 0 for like. We format the data by passing the user ID as the key and the reaction as the value, and then we just update that object in Firebase.
Following the same idea, we create another function that allows a user to remove their reaction from the database. Now we create a utility function to count the reactions that come back from Firebase. It returns a JavaScript object where the key is the value of the reaction, and the value is the number of reactions for that type.
operations
We'll use it to display the total count for each reaction type in the component template. The final step is you determine the current user's reaction, so we just check the object for that specific user ID. Now we can start building the front end component. First we're going to need the input decorator as well as on destroy. And we'll also inject the reaction service, and we'll use Lodash in here as well. The component will accept an input variable, which represents a parent's ID, that can be any kind of content that can be reacted to. Then we'll declare a few other variables that represent the data we're gonna be showing in the template. During n g on a net, we first get the list of emoji, then we subscribe to the object observable. When it emits a value, it'll be a JavaScript object of user IDs and their reactions. We can use this object to count the total reactions for each type, as well as determine the current user's reaction. From there, we create an event handler that will actually update or remove a reaction. If the user already has a reaction with a matching value, then we'll go ahead and delete that reaction. If the value is different. It means the user's updating or creating a new reaction, so we go ahead and update that in the database. Next, we create another event handler that will fire when the user hovers over the like button, which will show the emojis. And we create a utility method to return the emoji image path in the assets folder.
And one more utility method to see if a reaction type has reactions, so we know whether or not to display it in the template. Then we unsubscribe when the component's destroyed to avoid memory leaks. Now let's put this all together in the component HTML. First, we create a wrapper around everything and use the mouse enter mouse leave events to toggle the visibility of the emojis. Inside this div, we loop over the 6 emojis and use our emoji path helper to find that associated graphic in the assets folder.
animation
Notice how we also get the index while looping through this array because that will be the value we saved to the database corresponding to this reaction type. Next, we'll add a like button that the user can click that will add just a generic like. If the user has liked this piece of content, we'll go ahead and add a conditional class that will color it blue and make it bold. And, also, we wanna display the type of reaction the user has had. In both cases, we check to see if the user reaction is not null. We can use the value of the reaction to get the corresponding emoji from the emoji list and its index. Now we need to display the total reaction count. We do this by looping over the emoji list again and we'll see if a reaction has taken place, and then we'll get the total count for that reaction. Just like before, we use the emoji path helper to play the corresponding image. Then we can get the count from our reaction count object by just passing it that index. Let's try it out in the app. If we hover over the like button. It should bring up the emojis. And if we click it, it should add a like telling us what the like type is. The reaction counts are all kept up to date in real time. So if we have multiple users reacting to the same piece of content, we'll see the reaction counts be updated in real time.
When looking into the database console, we can see that when a user clicks a reaction, it adds their user ID key and the value for that reaction to the database. That's it for this episode. If you found the video helpful, please like and subscribe. 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 insulting. Thanks for watching, and I'll see you next time.
youtube
databases
copyright
streaming
websites
podcasts
internet
In this episode, we're going to replicate Facebook reactions using Angular 4 and Firebase. 1st, let's head over to Facebook just to see how it works. You can hover over a like button which brings up a tooltip with all the different reactions. When you click a reaction it update your own as well as the list of other users' reactions below that. First thing we're gonna do is import the graphics into our project. I found some free Facebook icons on iconfinder.com and then saved them under the assets folder in the Angular project. Now we can generate the reaction service and import the AngularFire auth module as well as the database module. We're also gonna make heavy use of Lodash to handle the sorting and counting of reactions. We'll keep track of the user ID on the service, and then we create an array of the actual emoji graphics. We want each emoji to be tied to a specific index, and we'll save that index in the database. In this case, like will be 0, love 1, wow 2, etcetera. So our database is a collection of item IDs, things that can be reacted to, and each document is the keys of the users and the number that corresponds to their reaction. The first thing we'll do is get the associated reactions for an item as a Firebase object observable. Next, we create a function that allows the user to update their reaction, which has a default value of 0 for like. We format the data by passing the user ID as the key and the reaction as the value, and then we just update that object in Firebase. Following the same idea, we create another function that allows a user to remove their reaction from the database. Now we create a utility function to count the reactions that come back from Firebase. It returns a JavaScript object where the key is the value of the reaction, and the value is the number of reactions for that type. We'll use it to display the total count for each reaction type in the component template. The final step is you determine the current user's reaction, so we just check the object for that specific user ID. Now we can start building the front end component. First we're going to need the input decorator as well as on destroy. And we'll also inject the reaction service, and we'll use Lodash in here as well. The component will accept an input variable, which represents a parent's ID, that can be any kind of content that can be reacted to. Then we'll declare a few other variables that represent the data we're gonna be showing in the template. During n g on a net, we first get the list of emoji, then we subscribe to the object observable. When it emits a value, it'll be a JavaScript object of user IDs and their reactions. We can use this object to count the total reactions for each type, as well as determine the current user's reaction. From there, we create an event handler that will actually update or remove a reaction. If the user already has a reaction with a matching value, then we'll go ahead and delete that reaction. If the value is different. It means the user's updating or creating a new reaction, so we go ahead and update that in the database. Next, we create another event handler that will fire when the user hovers over the like button, which will show the emojis. And we create a utility method to return the emoji image path in the assets folder. And one more utility method to see if a reaction type has reactions, so we know whether or not to display it in the template. Then we unsubscribe when the component's destroyed to avoid memory leaks. Now let's put this all together in the component HTML. First, we create a wrapper around everything and use the mouse enter mouse leave events to toggle the visibility of the emojis. Inside this div, we loop over the 6 emojis and use our emoji path helper to find that associated graphic in the assets folder. Notice how we also get the index while looping through this array because that will be the value we saved to the database corresponding to this reaction type. Next, we'll add a like button that the user can click that will add just a generic like. If the user has liked this piece of content, we'll go ahead and add a conditional class that will color it blue and make it bold. And, also, we wanna display the type of reaction the user has had. In both cases, we check to see if the user reaction is not null. We can use the value of the reaction to get the corresponding emoji from the emoji list and its index. Now we need to display the total reaction count. We do this by looping over the emoji list again and we'll see if a reaction has taken place, and then we'll get the total count for that reaction. Just like before, we use the emoji path helper to play the corresponding image. Then we can get the count from our reaction count object by just passing it that index. Let's try it out in the app. If we hover over the like button. It should bring up the emojis. And if we click it, it should add a like telling us what the like type is. The reaction counts are all kept up to date in real time. So if we have multiple users reacting to the same piece of content, we'll see the reaction counts be updated in real time. When looking into the database console, we can see that when a user clicks a reaction, it adds their user ID key and the value for that reaction to the database. That's it for this episode. If you found the video helpful, please like and subscribe. 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 insulting. Thanks for watching, and I'll see you next time.
In
in
this
this
episode,
episode
we're
we're
going
going
to
to
replicate
replicate
Facebook
facebook
reactions
reactions
using
using
Angular
angular
4
4
and
and
Firebase.
firebase
1st,
1st
let's
let's
head
head
over
over
to
to
Facebook
facebook
just
just
to
to
see
see
how
how
it
it
works.
works
You
you
can
can
hover
hover
over
over
a
a
like
like
button
button
which
which
brings
brings
up
up
a
a
tooltip
tooltip
with
with
all
all
the
the
different
different
reactions.
reactions
When
when
you
you
click
click
a
a
reaction
reaction
it
it
update
update
your
your
own
own
as
as
well
well
as
as
the
the
list
list
of
of
other
other
users'
users'
reactions
reactions
below
below
that.
that
First
first
thing
thing
we're
we're
gonna
gonna
do
do
is
is
import
import
the
the
graphics
graphics
into
into
our
our
project.
project
I
i
found
found
some
some
free
free
Facebook
facebook
icons
icons
on
on
iconfinder.com
iconfinder.com
and
and
then
then
saved
saved
them
them
under
under
the
the
assets
assets
folder
folder
in
in
the
the
Angular
angular
project.
project
Now
now
we
we
can
can
generate
generate
the
the
reaction
reaction
service
service
and
and
import
import
the
the
AngularFire
angularfire
auth
auth
module
module
as
as
well
well
as
as
the
the
database
database
module.
module
We're
we're
also
also
gonna
gonna
make
make
heavy
heavy
use
use
of
of
Lodash
lodash
to
to
handle
handle
the
the
sorting
sorting
and
and
counting
counting
of
of
reactions.
reactions
We'll
we'll
keep
keep
track
track
of
of
the
the
user
user
ID
id
on
on
the
the
service,
service
and
and
then
then
we
we
create
create
an
an
array
array
of
of
the
the
actual
actual
emoji
emoji
graphics.
graphics
We
we
want
want
each
each
emoji
emoji
to
to
be
be
tied
tied
to
to
a
a
specific
specific
index,
index
and
and
we'll
we'll
save
save
that
that
index
index
in
in
the
the
database.
database
In
in
this
this
case,
case
like
like
will
will
be
be
0,
0
love
love
1,
1
wow
wow
2,
2
etcetera.
etcetera
So
so
our
our
database
database
is
is
a
a
collection
collection
of
of
item
item
IDs,
ids
things
things
that
that
can
can
be
be
reacted
reacted
to,
to
and
and
each
each
document
document
is
is
the
the
keys
keys
of
of
the
the
users
users
and
and
the
the
number
number
that
that
corresponds
corresponds
to
to
their
their
reaction.
reaction
The
the
first
first
thing
thing
we'll
we'll
do
do
is
is
get
get
the
the
associated
associated
reactions
reactions
for
for
an
an
item
item
as
as
a
a
Firebase
firebase
object
object
observable.
observable
Next,
next
we
we
create
create
a
a
function
function
that
that
allows
allows
the
the
user
user
to
to
update
update
their
their
reaction,
reaction
which
which
has
has
a
a
default
default
value
value
of
of
0
0
for
for
like.
like
We
we
format
format
the
the
data
data
by
by
passing
passing
the
the
user
user
ID
id
as
as
the
the
key
key
and
and
the
the
reaction
reaction
as
as
the
the
value,
value
and
and
then
then
we
we
just
just
update
update
that
that
object
object
in
in
Firebase.
firebase
Following
following
the
the
same
same
idea,
idea
we
we
create
create
another
another
function
function
that
that
allows
allows
a
a
user
user
to
to
remove
remove
their
their
reaction
reaction
from
from
the
the
database.
database
Now
now
we
we
create
create
a
a
utility
utility
function
function
to
to
count
count
the
the
reactions
reactions
that
that
come
come
back
back
from
from
Firebase.
firebase
It
it
returns
returns
a
a
JavaScript
javascript
object
object
where
where
the
the
key
key
is
is
the
the
value
value
of
of
the
the
reaction,
reaction
and
and
the
the
value
value
is
is
the
the
number
number
of
of
reactions
reactions
for
for
that
that
type.
type
We'll
we'll
use
use
it
it
to
to
display
display
the
the
total
total
count
count
for
for
each
each
reaction
reaction
type
type
in
in
the
the
component
component
template.
template
The
the
final
final
step
step
is
is
you
you
determine
determine
the
the
current
current
user's
user's
reaction,
reaction
so
so
we
we
just
just
check
check
the
the
object
object
for
for
that
that
specific
specific
user
user
ID.
id
Now
now
we
we
can
can
start
start
building
building
the
the
front
front
end
end
component.
component
First
first
we're
we're
going
going
to
to
need
need
the
the
input
input
decorator
decorator
as
as
well
well
as
as
on
on
destroy.
destroy
And
and
we'll
we'll
also
also
inject
inject
the
the
reaction
reaction
service,
service
and
and
we'll
we'll
use
use
Lodash
lodash
in
in
here
here
as
as
well.
well
The
the
component
component
will
will
accept
accept
an
an
input
input
variable,
variable
which
which
represents
represents
a
a
parent's
parent's
ID,
id
that
that
can
can
be
be
any
any
kind
kind
of
of
content
content
that
that
can
can
be
be
reacted
reacted
to.
to
Then
then
we'll
we'll
declare
declare
a
a
few
few
other
other
variables
variables
that
that
represent
represent
the
the
data
data
we're
we're
gonna
gonna
be
be
showing
showing
in
in
the
the
template.
template
During
during
n
n
g
g
on
on
a
a
net,
net
we
we
first
first
get
get
the
the
list
list
of
of
emoji,
emoji
then
then
we
we
subscribe
subscribe
to
to
the
the
object
object
observable.
observable
When
when
it
it
emits
emits
a
a
value,
value
it'll
it'll
be
be
a
a
JavaScript
javascript
object
object
of
of
user
user
IDs
ids
and
and
their
their
reactions.
reactions
We
we
can
can
use
use
this
this
object
object
to
to
count
count
the
the
total
total
reactions
reactions
for
for
each
each
type,
type
as
as
well
well
as
as
determine
determine
the
the
current
current
user's
user's
reaction.
reaction
From
from
there,
there
we
we
create
create
an
an
event
event
handler
handler
that
that
will
will
actually
actually
update
update
or
or
remove
remove
a
a
reaction.
reaction
If
if
the
the
user
user
already
already
has
has
a
a
reaction
reaction
with
with
a
a
matching
matching
value,
value
then
then
we'll
we'll
go
go
ahead
ahead
and
and
delete
delete
that
that
reaction.
reaction
If
if
the
the
value
value
is
is
different.
different
It
it
means
means
the
the
user's
user's
updating
updating
or
or
creating
creating
a
a
new
new
reaction,
reaction
so
so
we
we
go
go
ahead
ahead
and
and
update
update
that
that
in
in
the
the
database.
database
Next,
next
we
we
create
create
another
another
event
event
handler
handler
that
that
will
will
fire
fire
when
when
the
the
user
user
hovers
hovers
over
over
the
the
like
like
button,
button
which
which
will
will
show
show
the
the
emojis.
emojis
And
and
we
we
create
create
a
a
utility
utility
method
method
to
to
return
return
the
the
emoji
emoji
image
image
path
path
in
in
the
the
assets
assets
folder.
folder
And
and
one
one
more
more
utility
utility
method
method
to
to
see
see
if
if
a
a
reaction
reaction
type
type
has
has
reactions,
reactions
so
so
we
we
know
know
whether
whether
or
or
not
not
to
to
display
display
it
it
in
in
the
the
template.
template
Then
then
we
we
unsubscribe
unsubscribe
when
when
the
the
component's
component's
destroyed
destroyed
to
to
avoid
avoid
memory
memory
leaks.
leaks
Now
now
let's
let's
put
put
this
this
all
all
together
together
in
in
the
the
component
component
HTML.
html
First,
first
we
we
create
create
a
a
wrapper
wrapper
around
around
everything
everything
and
and
use
use
the
the
mouse
mouse
enter
enter
mouse
mouse
leave
leave
events
events
to
to
toggle
toggle
the
the
visibility
visibility
of
of
the
the
emojis.
emojis
Inside
inside
this
this
div,
div
we
we
loop
loop
over
over
the
the
6
6
emojis
emojis
and
and
use
use
our
our
emoji
emoji
path
path
helper
helper
to
to
find
find
that
that
associated
associated
graphic
graphic
in
in
the
the
assets
assets
folder.
folder
Notice
notice
how
how
we
we
also
also
get
get
the
the
index
index
while
while
looping
looping
through
through
this
this
array
array
because
because
that
that
will
will
be
be
the
the
value
value
we
we
saved
saved
to
to
the
the
database
database
corresponding
corresponding
to
to
this
this
reaction
reaction
type.
type
Next,
next
we'll
we'll
add
add
a
a
like
like
button
button
that
that
the
the
user
user
can
can
click
click
that
that
will
will
add
add
just
just
a
a
generic
generic
like.
like
If
if
the
the
user
user
has
has
liked
liked
this
this
piece
piece
of
of
content,
content
we'll
we'll
go
go
ahead
ahead
and
and
add
add
a
a
conditional
conditional
class
class
that
that
will
will
color
color
it
it
blue
blue
and
and
make
make
it
it
bold.
bold
And,
and
also,
also
we
we
wanna
wanna
display
display
the
the
type
type
of
of
reaction
reaction
the
the
user
user
has
has
had.
had
In
in
both
both
cases,
cases
we
we
check
check
to
to
see
see
if
if
the
the
user
user
reaction
reaction
is
is
not
not
null.
null
We
we
can
can
use
use
the
the
value
value
of
of
the
the
reaction
reaction
to
to
get
get
the
the
corresponding
corresponding
emoji
emoji
from
from
the
the
emoji
emoji
list
list
and
and
its
its
index.
index
Now
now
we
we
need
need
to
to
display
display
the
the
total
total
reaction
reaction
count.
count
We
we
do
do
this
this
by
by
looping
looping
over
over
the
the
emoji
emoji
list
list
again
again
and
and
we'll
we'll
see
see
if
if
a
a
reaction
reaction
has
has
taken
taken
place,
place
and
and
then
then
we'll
we'll
get
get
the
the
total
total
count
count
for
for
that
that
reaction.
reaction
Just
just
like
like
before,
before
we
we
use
use
the
the
emoji
emoji
path
path
helper
helper
to
to
play
play
the
the
corresponding
corresponding
image.
image
Then
then
we
we
can
can
get
get
the
the
count
count
from
from
our
our
reaction
reaction
count
count
object
object
by
by
just
just
passing
passing
it
it
that
that
index.
index
Let's
let's
try
try
it
it
out
out
in
in
the
the
app.
app
If
if
we
we
hover
hover
over
over
the
the
like
like
button.
button
It
it
should
should
bring
bring
up
up
the
the
emojis.
emojis
And
and
if
if
we
we
click
click
it,
it
it
it
should
should
add
add
a
a
like
like
telling
telling
us
us
what
what
the
the
like
like
type
type
is.
is
The
the
reaction
reaction
counts
counts
are
are
all
all
kept
kept
up
up
to
to
date
date
in
in
real
real
time.
time
So
so
if
if
we
we
have
have
multiple
multiple
users
users
reacting
reacting
to
to
the
the
same
same
piece
piece
of
of
content,
content
we'll
we'll
see
see
the
the
reaction
reaction
counts
counts
be
be
updated
updated
in
in
real
real
time.
time
When
when
looking
looking
into
into
the
the
database
database
console,
console
we
we
can
can
see
see
that
that
when
when
a
a
user
user
clicks
clicks
a
a
reaction,
reaction
it
it
adds
adds
their
their
user
user
ID
id
key
key
and
and
the
the
value
value
for
for
that
that
reaction
reaction
to
to
the
the
database.
database
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
subscribe.
subscribe
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
insulting.
insulting
Thanks
thanks
for
for
watching,
watching
and
and
I'll
i'll
see
see
you
you
next
next
time.
time
success
In this video, the speaker explains how to use Facebook's Angular 4 and elsewhere to generate reactions for a social media platform. They demonstrate how to import graphics and use the reaction service, create a function to update and remove reactions, and create a front end component. The speaker also explains how to use the emojis and the reactions count in the database and how to access the reaction count in the app.
Facebook-Inspired Reactions System with Angular and Firebase
In this episode, we're going to replicate Facebook reactions using Angular 4 and Firebase. 1st, let's head over to Facebook just to see how it works. You can hover over a like button which brings up a tooltip with all the different reactions. When you click a reaction it update your own as well as the list of other users' reactions below that. First thing we're gonna do is import the graphics into our project. I found some free Facebook icons on iconfinder.com and then saved them under the assets folder in the Angular project. Now we can generate the reaction service and import the AngularFire auth module as well as the database module. We're also gonna make heavy use of Lodash to handle the sorting and counting of reactions. We'll keep track of the user ID on the service, and then we create an array of the actual emoji graphics. We want each emoji to be tied to a specific index, and we'll save that index in the database. In this case, like will be 0, love 1, wow 2, etcetera. So our database is a collection of item IDs, things that can be reacted to, and each document is the keys of the users and the number that corresponds to their reaction. The first thing we'll do is get the associated reactions for an item as a Firebase object observable. Next, we create a function that allows the user to update their reaction, which has a default value of 0 for like. We format the data by passing the user ID as the key and the reaction as the value, and then we just update that object in Firebase. Following the same idea, we create another function that allows a user to remove their reaction from the database. Now we create a utility function to count the reactions that come back from Firebase. It returns a JavaScript object where the key is the value of the reaction, and the value is the number of reactions for that type. We'll use it to display the total count for each reaction type in the component template. The final step is you determine the current user's reaction, so we just check the object for that specific user ID. Now we can start building the front end component. First we're going to need the input decorator as well as on destroy. And we'll also inject the reaction service, and we'll use Lodash in here as well. The component will accept an input variable, which represents a parent's ID, that can be any kind of content that can be reacted to. Then we'll declare a few other variables that represent the data we're gonna be showing in the template. During n g on a net, we first get the list of emoji, then we subscribe to the object observable. When it emits a value, it'll be a JavaScript object of user IDs and their reactions. We can use this object to count the total reactions for each type, as well as determine the current user's reaction. From there, we create an event handler that will actually update or remove a reaction. If the user already has a reaction with a matching value, then we'll go ahead and delete that reaction. If the value is different. It means the user's updating or creating a new reaction, so we go ahead and update that in the database. Next, we create another event handler that will fire when the user hovers over the like button, which will show the emojis. And we create a utility method to return the emoji image path in the assets folder. And one more utility method to see if a reaction type has reactions, so we know whether or not to display it in the template. Then we unsubscribe when the component's destroyed to avoid memory leaks. Now let's put this all together in the component HTML. First, we create a wrapper around everything and use the mouse enter mouse leave events to toggle the visibility of the emojis. Inside this div, we loop over the 6 emojis and use our emoji path helper to find that associated graphic in the assets folder. Notice how we also get the index while looping through this array because that will be the value we saved to the database corresponding to this reaction type. Next, we'll add a like button that the user can click that will add just a generic like. If the user has liked this piece of content, we'll go ahead and add a conditional class that will color it blue and make it bold. And, also, we wanna display the type of reaction the user has had. In both cases, we check to see if the user reaction is not null. We can use the value of the reaction to get the corresponding emoji from the emoji list and its index. Now we need to display the total reaction count. We do this by looping over the emoji list again and we'll see if a reaction has taken place, and then we'll get the total count for that reaction. Just like before, we use the emoji path helper to play the corresponding image. Then we can get the count from our reaction count object by just passing it that index. Let's try it out in the app. If we hover over the like button. It should bring up the emojis. And if we click it, it should add a like telling us what the like type is. The reaction counts are all kept up to date in real time. So if we have multiple users reacting to the same piece of content, we'll see the reaction counts be updated in real time. When looking into the database console, we can see that when a user clicks a reaction, it adds their user ID key and the value for that reaction to the database. That's it for this episode. If you found the video helpful, please like and subscribe. 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 insulting. Thanks for watching, and I'll see you next time.
In this video, the speaker explains how to use Facebook's Angular 4 and elsewhere to generate reactions for a social media platform. They demonstrate how to import graphics and use the reaction service, create a function to update and remove reactions, and create a front end component. The speaker also explains how to use the emojis and the reactions count in the database and how to access the reaction count in the app.