Fully documented lesson at https://angularfirebase.com/lessons/angular-toast-message-notifications-from-scratch/

Learn how to build a toast message system with Angular 4, then store them in the Firebase realtime database
2024-02-04T08:28:08.757Z
nova-2
2-general-nova
2024-01-09.29447
30089e05-99d1-4376-b32e-c263170674af
0c69b718-420d-4ca1-bb1f-d865e8c308a4
3c33d781817f1987ccdea8eb4bfd75e62d812f83ef5f1857e107c101dc4b7afc
67875a7f-c9c4-48a0-aa55-5bdb8a91c34a
deprecated
In this episode we're going to build toast style notification messages from scratch.
The messages will be saved on the back end in Firebase as well so we can maintain a full history of the messages that have been sent.
The messages are managed by a central service that can be injected into any component.
This makes it possible to trigger messages from anywhere in the app.
On the front end, we're using the Bulma CSS framework, but you could easily swap this out for Bootstrap or Material or your own custom classes.
Let's start by building the Toast service.
We'll first start by importing the AngularFire database.
Then we'll create a custom message class just to I model our data.
A message can have content as a string, a style, and it can also be dismissed which is a boolean value.
In the constructor, we send it the content and an optional style argument.
If the style is undefined, it'll just default to info.
In the service, we create a function to return the Firebase list observable with the messages in the database.
We wanna limit this query to the last 5 messages.
From there we create a function to create a new message.
This function can be called anywhere from any component and it'll update the Firebase list observable.
It simply takes the content and style as arguments and and builds a new message and sends that to the database.
And the last step is to give the user the ability to dismiss messages.
So we just retrieve a message as an object and then update its dismissed attribute to true.
Before we start building the component, I'm gonna build a custom pipe that will filter out the dismissed messages and then send them in reversed order so they display 1 on top the other.
First I import the filter and reverse functions from Lodash.
And the value going into this pipe will be an array of messages so we can call reverse and then we can filter out the dismissed messages.
And if there's no value, we just return null.
Now we can put the pipe to use in the component template.
The messages will be in the form of a Firebase list observable, which we can unwrap with the async pipe.
We can then chain our custom reverse pipe to that to sending them in reversed order and filtered by the a dismissed attribute.
From there, we can use ng class to display a conditional class based on the style of the message.
We pass ngClass and Object where the key is the Bulma CSS class and the value is true or false based on how the statement evaluates.
The final step is to allow the user to dismiss the message by clicking a button.
And we also display the message content.
Going into the TypeScript, we first inject the Toast service into the component, And then we get a list of messages as the Firebase list observable.
Then we set up an event handler to handle click of the button to dismiss the message.
In this example I want Toast messages to be global throughout the location.
So I put them in the app component outside the scope of the router.
So they'll still display even if the user navigates to different pages.
Now we can inject this service into any component we want.
And in this case, we'll just send a few arbitrary messages from the Read Me page component.
If we go back to the app, we can see the database is being updated after each button click.
You may or may not wanna save these messages in the database, But when you do, it opens up some possibilities to do things with Cloud Functions where you could update something in the database and then push a message right into the user's feed.
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 consulting.
Thanks for watching, and I'll see you next time.

Speaker 0: In this episode we're going to build toast style notification messages from scratch. The messages will be saved on the back end in Firebase as well so we can maintain a full history of the messages that have been sent. The messages are managed by a central service that can be injected into any component. This makes it possible to trigger messages from anywhere in the app. On the front end, we're using the Bulma CSS framework, but you could easily swap this out for Bootstrap or Material or your own custom classes.

Let's start by building the Toast service. We'll first start by importing the AngularFire database. Then we'll create a custom message class just to I model our data. A message can have content as a string, a style, and it can also be dismissed which is a boolean value. In the constructor, we send it the content and an optional style argument.

If the style is undefined, it'll just default to info. In the service, we create a function to return the Firebase list observable with the messages in the database. We wanna limit this query to the last 5 messages. From there we create a function to create a new message. This function can be called anywhere from any component and it'll update the Firebase list observable.

It simply takes the content and style as arguments and and builds a new message and sends that to the database. And the last step is to give the user the ability to dismiss messages. So we just retrieve a message as an object and then update its dismissed attribute to true. Before we start building the component, I'm gonna build a custom pipe that will filter out the dismissed messages and then send them in reversed order so they display 1 on top the other. First I import the filter and reverse functions from Lodash.

And the value going into this pipe will be an array of messages so we can call reverse and then we can filter out the dismissed messages. And if there's no value, we just return null. Now we can put the pipe to use in the component template. The messages will be in the form of a Firebase list observable, which we can unwrap with the async pipe. We can then chain our custom reverse pipe to that to sending them in reversed order and filtered by the a dismissed attribute.

From there, we can use ng class to display a conditional class based on the style of the message. We pass ngClass and Object where the key is the Bulma CSS class and the value is true or false based on how the statement evaluates. The final step is to allow the user to dismiss the message by clicking a button. And we also display the message content. Going into the TypeScript, we first inject the Toast service into the component, And then we get a list of messages as the Firebase list observable.

Then we set up an event handler to handle click of the button to dismiss the message. In this example I want Toast messages to be global throughout the location. So I put them in the app component outside the scope of the router. So they'll still display even if the user navigates to different pages. Now we can inject this service into any component we want.

And in this case, we'll just send a few arbitrary messages from the Read Me page component. If we go back to the app, we can see the database is being updated after each button click. You may or may not wanna save these messages in the database, But when you do, it opens up some possibilities to do things with Cloud Functions where you could update something in the database and then push a message right into the user's feed. 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 consulting. Thanks for watching, and I'll see you next time.
In this episode we're going to build toast style notification messages from scratch. The messages will be saved on the back end in Firebase as well so we can maintain a full history of the messages that have been sent.
The messages are managed by a central service that can be injected into any component. This makes it possible to trigger messages from anywhere in the app. On the front end, we're using the Bulma CSS framework, but you could easily swap this out for Bootstrap or Material or your own custom classes.
software
Let's start by building the Toast service. We'll first start by importing the AngularFire database. Then we'll create a custom message class just to I model our data. A message can have content as a string, a style, and it can also be dismissed which is a boolean value. In the constructor, we send it the content and an optional style argument.
programming
If the style is undefined, it'll just default to info. In the service, we create a function to return the Firebase list observable with the messages in the database. We wanna limit this query to the last 5 messages. From there we create a function to create a new message. This function can be called anywhere from any component and it'll update the Firebase list observable. It simply takes the content and style as arguments and and builds a new message and sends that to the database. And the last step is to give the user the ability to dismiss messages. So we just retrieve a message as an object and then update its dismissed attribute to true. Before we start building the component, I'm gonna build a custom pipe that will filter out the dismissed messages and then send them in reversed order so they display 1 on top the other. First I import the filter and reverse functions from Lodash. And the value going into this pipe will be an array of messages so we can call reverse and then we can filter out the dismissed messages. And if there's no value, we just return null. Now we can put the pipe to use in the component template. The messages will be in the form of a Firebase list observable, which we can unwrap with the async pipe. We can then chain our custom reverse pipe to that to sending them in reversed order and filtered by the a dismissed attribute. From there, we can use ng class to display a conditional class based on the style of the message. We pass ngClass and Object where the key is the Bulma CSS class and the value is true or false based on how the statement evaluates. The final step is to allow the user to dismiss the message by clicking a button. And we also display the message content. Going into the TypeScript, we first inject the Toast service into the component, And then we get a list of messages as the Firebase list observable. Then we set up an event handler to handle click of the button to dismiss the message. In this example I want Toast messages to be global throughout the location. So I put them in the app component outside the scope of the router. So they'll still display even if the user navigates to different pages.
Now we can inject this service into any component we want. And in this case, we'll just send a few arbitrary messages from the Read Me page component. If we go back to the app, we can see the database is being updated after each button click. You may or may not wanna save these messages in the database, But when you do, it opens up some possibilities to do things with Cloud Functions where you could update something in the database and then push a message right into the user's feed. 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 consulting.
databases
youtube
streaming
podcasts
data management
Thanks for watching, and I'll see you next time.
In this episode we're going to build toast style notification messages from scratch. The messages will be saved on the back end in Firebase as well so we can maintain a full history of the messages that have been sent. The messages are managed by a central service that can be injected into any component. This makes it possible to trigger messages from anywhere in the app. On the front end, we're using the Bulma CSS framework, but you could easily swap this out for Bootstrap or Material or your own custom classes. Let's start by building the Toast service. We'll first start by importing the AngularFire database. Then we'll create a custom message class just to I model our data. A message can have content as a string, a style, and it can also be dismissed which is a boolean value. In the constructor, we send it the content and an optional style argument. If the style is undefined, it'll just default to info. In the service, we create a function to return the Firebase list observable with the messages in the database. We wanna limit this query to the last 5 messages. From there we create a function to create a new message. This function can be called anywhere from any component and it'll update the Firebase list observable. It simply takes the content and style as arguments and and builds a new message and sends that to the database. And the last step is to give the user the ability to dismiss messages. So we just retrieve a message as an object and then update its dismissed attribute to true. Before we start building the component, I'm gonna build a custom pipe that will filter out the dismissed messages and then send them in reversed order so they display 1 on top the other. First I import the filter and reverse functions from Lodash. And the value going into this pipe will be an array of messages so we can call reverse and then we can filter out the dismissed messages. And if there's no value, we just return null. Now we can put the pipe to use in the component template. The messages will be in the form of a Firebase list observable, which we can unwrap with the async pipe. We can then chain our custom reverse pipe to that to sending them in reversed order and filtered by the a dismissed attribute. From there, we can use ng class to display a conditional class based on the style of the message. We pass ngClass and Object where the key is the Bulma CSS class and the value is true or false based on how the statement evaluates. The final step is to allow the user to dismiss the message by clicking a button. And we also display the message content. Going into the TypeScript, we first inject the Toast service into the component, And then we get a list of messages as the Firebase list observable. Then we set up an event handler to handle click of the button to dismiss the message. In this example I want Toast messages to be global throughout the location. So I put them in the app component outside the scope of the router. So they'll still display even if the user navigates to different pages. Now we can inject this service into any component we want. And in this case, we'll just send a few arbitrary messages from the Read Me page component. If we go back to the app, we can see the database is being updated after each button click. You may or may not wanna save these messages in the database, But when you do, it opens up some possibilities to do things with Cloud Functions where you could update something in the database and then push a message right into the user's feed. 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 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
toast
toast
style
style
notification
notification
messages
messages
from
from
scratch.
scratch
The
the
messages
messages
will
will
be
be
saved
saved
on
on
the
the
back
back
end
end
in
in
Firebase
firebase
as
as
well
well
so
so
we
we
can
can
maintain
maintain
a
a
full
full
history
history
of
of
the
the
messages
messages
that
that
have
have
been
been
sent.
sent
The
the
messages
messages
are
are
managed
managed
by
by
a
a
central
central
service
service
that
that
can
can
be
be
injected
injected
into
into
any
any
component.
component
This
this
makes
makes
it
it
possible
possible
to
to
trigger
trigger
messages
messages
from
from
anywhere
anywhere
in
in
the
the
app.
app
On
on
the
the
front
front
end,
end
we're
we're
using
using
the
the
Bulma
bulma
CSS
css
framework,
framework
but
but
you
you
could
could
easily
easily
swap
swap
this
this
out
out
for
for
Bootstrap
bootstrap
or
or
Material
material
or
or
your
your
own
own
custom
custom
classes.
classes
Let's
let's
start
start
by
by
building
building
the
the
Toast
toast
service.
service
We'll
we'll
first
first
start
start
by
by
importing
importing
the
the
AngularFire
angularfire
database.
database
Then
then
we'll
we'll
create
create
a
a
custom
custom
message
message
class
class
just
just
to
to
I
i
model
model
our
our
data.
data
A
a
message
message
can
can
have
have
content
content
as
as
a
a
string,
string
a
a
style,
style
and
and
it
it
can
can
also
also
be
be
dismissed
dismissed
which
which
is
is
a
a
boolean
boolean
value.
value
In
in
the
the
constructor,
constructor
we
we
send
send
it
it
the
the
content
content
and
and
an
an
optional
optional
style
style
argument.
argument
If
if
the
the
style
style
is
is
undefined,
undefined
it'll
it'll
just
just
default
default
to
to
info.
info
In
in
the
the
service,
service
we
we
create
create
a
a
function
function
to
to
return
return
the
the
Firebase
firebase
list
list
observable
observable
with
with
the
the
messages
messages
in
in
the
the
database.
database
We
we
wanna
wanna
limit
limit
this
this
query
query
to
to
the
the
last
last
5
5
messages.
messages
From
from
there
there
we
we
create
create
a
a
function
function
to
to
create
create
a
a
new
new
message.
message
This
this
function
function
can
can
be
be
called
called
anywhere
anywhere
from
from
any
any
component
component
and
and
it'll
it'll
update
update
the
the
Firebase
firebase
list
list
observable.
observable
It
it
simply
simply
takes
takes
the
the
content
content
and
and
style
style
as
as
arguments
arguments
and
and
and
and
builds
builds
a
a
new
new
message
message
and
and
sends
sends
that
that
to
to
the
the
database.
database
And
and
the
the
last
last
step
step
is
is
to
to
give
give
the
the
user
user
the
the
ability
ability
to
to
dismiss
dismiss
messages.
messages
So
so
we
we
just
just
retrieve
retrieve
a
a
message
message
as
as
an
an
object
object
and
and
then
then
update
update
its
its
dismissed
dismissed
attribute
attribute
to
to
true.
true
Before
before
we
we
start
start
building
building
the
the
component,
component
I'm
i'm
gonna
gonna
build
build
a
a
custom
custom
pipe
pipe
that
that
will
will
filter
filter
out
out
the
the
dismissed
dismissed
messages
messages
and
and
then
then
send
send
them
them
in
in
reversed
reversed
order
order
so
so
they
they
display
display
1
1
on
on
top
top
the
the
other.
other
First
first
I
i
import
import
the
the
filter
filter
and
and
reverse
reverse
functions
functions
from
from
Lodash.
lodash
And
and
the
the
value
value
going
going
into
into
this
this
pipe
pipe
will
will
be
be
an
an
array
array
of
of
messages
messages
so
so
we
we
can
can
call
call
reverse
reverse
and
and
then
then
we
we
can
can
filter
filter
out
out
the
the
dismissed
dismissed
messages.
messages
And
and
if
if
there's
there's
no
no
value,
value
we
we
just
just
return
return
null.
null
Now
now
we
we
can
can
put
put
the
the
pipe
pipe
to
to
use
use
in
in
the
the
component
component
template.
template
The
the
messages
messages
will
will
be
be
in
in
the
the
form
form
of
of
a
a
Firebase
firebase
list
list
observable,
observable
which
which
we
we
can
can
unwrap
unwrap
with
with
the
the
async
async
pipe.
pipe
We
we
can
can
then
then
chain
chain
our
our
custom
custom
reverse
reverse
pipe
pipe
to
to
that
that
to
to
sending
sending
them
them
in
in
reversed
reversed
order
order
and
and
filtered
filtered
by
by
the
the
a
a
dismissed
dismissed
attribute.
attribute
From
from
there,
there
we
we
can
can
use
use
ng
ng
class
class
to
to
display
display
a
a
conditional
conditional
class
class
based
based
on
on
the
the
style
style
of
of
the
the
message.
message
We
we
pass
pass
ngClass
ngclass
and
and
Object
object
where
where
the
the
key
key
is
is
the
the
Bulma
bulma
CSS
css
class
class
and
and
the
the
value
value
is
is
true
true
or
or
false
false
based
based
on
on
how
how
the
the
statement
statement
evaluates.
evaluates
The
the
final
final
step
step
is
is
to
to
allow
allow
the
the
user
user
to
to
dismiss
dismiss
the
the
message
message
by
by
clicking
clicking
a
a
button.
button
And
and
we
we
also
also
display
display
the
the
message
message
content.
content
Going
going
into
into
the
the
TypeScript,
typescript
we
we
first
first
inject
inject
the
the
Toast
toast
service
service
into
into
the
the
component,
component
And
and
then
then
we
we
get
get
a
a
list
list
of
of
messages
messages
as
as
the
the
Firebase
firebase
list
list
observable.
observable
Then
then
we
we
set
set
up
up
an
an
event
event
handler
handler
to
to
handle
handle
click
click
of
of
the
the
button
button
to
to
dismiss
dismiss
the
the
message.
message
In
in
this
this
example
example
I
i
want
want
Toast
toast
messages
messages
to
to
be
be
global
global
throughout
throughout
the
the
location.
location
So
so
I
i
put
put
them
them
in
in
the
the
app
app
component
component
outside
outside
the
the
scope
scope
of
of
the
the
router.
router
So
so
they'll
they'll
still
still
display
display
even
even
if
if
the
the
user
user
navigates
navigates
to
to
different
different
pages.
pages
Now
now
we
we
can
can
inject
inject
this
this
service
service
into
into
any
any
component
component
we
we
want.
want
And
and
in
in
this
this
case,
case
we'll
we'll
just
just
send
send
a
a
few
few
arbitrary
arbitrary
messages
messages
from
from
the
the
Read
read
Me
me
page
page
component.
component
If
if
we
we
go
go
back
back
to
to
the
the
app,
app
we
we
can
can
see
see
the
the
database
database
is
is
being
being
updated
updated
after
after
each
each
button
button
click.
click
You
you
may
may
or
or
may
may
not
not
wanna
wanna
save
save
these
these
messages
messages
in
in
the
the
database,
database
But
but
when
when
you
you
do,
do
it
it
opens
opens
up
up
some
some
possibilities
possibilities
to
to
do
do
things
things
with
with
Cloud
cloud
Functions
functions
where
where
you
you
could
could
update
update
something
something
in
in
the
the
database
database
and
and
then
then
push
push
a
a
message
message
right
right
into
into
the
the
user's
user's
feed.
feed
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
consulting.
consulting
Thanks
thanks
for
for
watching,
watching
and
and
I'll
i'll
see
see
you
you
next
next
time.
time
success
In this episode, the speaker explains how to build toast style notification messages and maintain a full history of them. They then proceed to import the Angularipping database, create a new message class, and use a custom pipe to filter out dismissed messages. The speaker also explains how to inject the Toast service into any component and mentions exclusive content and a free one-on-one project consulting.
Add Toast Message Notifications to your Angular App
In this episode we're going to build toast style notification messages from scratch. The messages will be saved on the back end in Firebase as well so we can maintain a full history of the messages that have been sent. The messages are managed by a central service that can be injected into any component. This makes it possible to trigger messages from anywhere in the app. On the front end, we're using the Bulma CSS framework, but you could easily swap this out for Bootstrap or Material or your own custom classes. Let's start by building the Toast service. We'll first start by importing the AngularFire database. Then we'll create a custom message class just to I model our data. A message can have content as a string, a style, and it can also be dismissed which is a boolean value. In the constructor, we send it the content and an optional style argument. If the style is undefined, it'll just default to info. In the service, we create a function to return the Firebase list observable with the messages in the database. We wanna limit this query to the last 5 messages. From there we create a function to create a new message. This function can be called anywhere from any component and it'll update the Firebase list observable. It simply takes the content and style as arguments and and builds a new message and sends that to the database. And the last step is to give the user the ability to dismiss messages. So we just retrieve a message as an object and then update its dismissed attribute to true. Before we start building the component, I'm gonna build a custom pipe that will filter out the dismissed messages and then send them in reversed order so they display 1 on top the other. First I import the filter and reverse functions from Lodash. And the value going into this pipe will be an array of messages so we can call reverse and then we can filter out the dismissed messages. And if there's no value, we just return null. Now we can put the pipe to use in the component template. The messages will be in the form of a Firebase list observable, which we can unwrap with the async pipe. We can then chain our custom reverse pipe to that to sending them in reversed order and filtered by the a dismissed attribute. From there, we can use ng class to display a conditional class based on the style of the message. We pass ngClass and Object where the key is the Bulma CSS class and the value is true or false based on how the statement evaluates. The final step is to allow the user to dismiss the message by clicking a button. And we also display the message content. Going into the TypeScript, we first inject the Toast service into the component, And then we get a list of messages as the Firebase list observable. Then we set up an event handler to handle click of the button to dismiss the message. In this example I want Toast messages to be global throughout the location. So I put them in the app component outside the scope of the router. So they'll still display even if the user navigates to different pages. Now we can inject this service into any component we want. And in this case, we'll just send a few arbitrary messages from the Read Me page component. If we go back to the app, we can see the database is being updated after each button click. You may or may not wanna save these messages in the database, But when you do, it opens up some possibilities to do things with Cloud Functions where you could update something in the database and then push a message right into the user's feed. 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 consulting. Thanks for watching, and I'll see you next time.
In this episode, the speaker explains how to build toast style notification messages and maintain a full history of them. They then proceed to import the Angularipping database, create a new message class, and use a custom pipe to filter out dismissed messages. The speaker also explains how to inject the Toast service into any component and mentions exclusive content and a free one-on-one project consulting.