Update Oct 2017: Learn about important changes with Firestore and AngularFire v5 https://youtu.be/-GjF9pSeFTs

https://angularfirebase.com/lessons/reactive-crud-app-with-angular-and-firebase-tutorial/
In this episode we're going to build todo list feature that performs the SQL-style CRUD operations of create, read, update, and delete. NoSQL use different terms for these operations, so heres a basic translation when working with Firebase. 

create -- push
read -- list or object
update -- update or set
delete -- remove

Angular apps work with asynchronous data streams using RxJS reactive extensions for JavaScript. A data stream can be anything, but in this context we are talking about objects from the Firebase realtime database.

At this point, it is assumed you have the AngularFire2 package installed and bootstrapped into your app. If not, go to the docs or checkout this video. 

Step 1 - Generate the Files

Start by generating the necessary files from the command line. The feature is a simple list of todo items that can be modified by users. 

ng g service items/shared/item
ng g class items/shared/item
ng g component items/items-list
ng g component items/item-detail
ng g component items/item-form

Step 2 - Define an Item Class

We will give Items their own TypeScript class to keep our data organized. 

Step 3 - Building the Service

All the CRUD magic happens in the service, which performs six different operations. 

1. Get a list of items
2. Get a single item
3. Create a new item
4. Update an existing item
5. Delete a single item
6. Delete an entire list of items

Let's start by importing dependencies and declaring public variables. 

When we get an item or list of items, they will returned as an observable, which can then be unwrapped asynchronously in a component. The functions for getting an item or list will return the observable so it can be set as a public variable. 

All other functions will return void because they operate on the items variable or take a specific key as an argument. Any component watching the items variable will be automatically updated when these functions are called.

All of these operations are defined in the AngularFire2 docs, so I recommend you check those out. 

Step 4 - Build the List Component

The list component will serve as a parent component that iterates over items in the database. First, we need to define a public items variable during the NgOnInit lifecycle hook. This variable holds the Firebase List observable. 

Then we use the ngFor directive with the async pipe to iterate over the observable. The async pipe is critical because the observable will be empty on initial rendering, so we need to tell angular to handle it differently than a regular JavaScript object. 

Step 5 - Build the Item Detail Component

In the item detail component, we use the `@Input` decorator to pass data from the parent to the child via the template. We also crate a few functions that can be trigged by clicking buttons to operate on a single items within the list. 

In the template itself, we display the item attributes and add the CRUD functions to the cooresponding buttons.   

Step 6 - Build the Item Form Component

There are several different form validation methods in Angular. In this example, I am going to use a template driven approach using the if-then-else else syntax introduced in Angular 4. This method is only ideal for small simple forms because all the logic will be defined in the HTML. 

We define two different templates named valid and errors. We can then display these templates conditionally based on the form state. 

The final step is to submit the form to create a new item. In this case, I just use the click event to trigger the `createItem` method from the service. 

That's all for Firebase CRUD, see you next time.
2024-02-04T08:39:44.904Z
nova-2
2-general-nova
2024-01-09.29447
30089e05-99d1-4376-b32e-c263170674af
6a56d41b-ef97-49c3-b278-4305cd739c70
202f1f4ebde344dbea9b873c9937c269fbc0261d7643ffa5e9dc83300a1f53e6
67875a7f-c9c4-48a0-aa55-5bdb8a91c34a
deprecated
In this episode, we're going to build a to do list feature that performs the SQL style CRUD operations of create, read, update, and delete.
NoSQL uses different terms for these operations, so here's a basic translation when working with Firebase.
Create equals push, Read equals list or object.
Update equals update or set, and delete equals remove.
Angular apps work with asynchronous data streams using RxJS or reactive extensions for JavaScript.
A data stream can be pretty much anything, but in this context, we're talking about objects from the Firebase real time database.
At this point, it's assumed you have the AngularFire 2 package installed and bootstrapped into your app.
If not, go to the docs or check out our environment setup video.
Start by generating the necessary files from the command line.
The feature is just a simple list of to do items that could be modified by users.
We will give items their own TypeScript class to keep our data nice and organized.
All the CRUD magic happens in the service, which is going to perform 6 different operations.
It can get a list of items, get a single item, create a new item, update an existing item, delete an existing item, and delete an entire list of items.
Start by importing dependencies and declaring a couple public variables.
When we get an item or list of items, they will be returned as an observable, which can then be unwrapped asynchronously from the component.
The functions for getting an item or list will return the observable so it can then be set to a public variable.
All other functions are going to return void because they operate on the item's variable or take a specific key as an argument.
Any component watching the item's variable will will be automatically updated when these functions are called from a component.
All of these operations are defined in the AngularFire 2 docs, so I recommend you check those out if you're looking for more specific details on one of these functions.
The list component will serve as the parent component that iterates over items in the database.
First, we need to define a public items variable during the n g on a net life cycle hook.
This variable is going to hold the Firebase list observable.
Then we use the n g four directive in the template along with the async pipe to iterate over the observable.
The async pipe is critical because the observable will be empty on initial rendering, so we need to tell Angular to handle it differently than just a plain JavaScript object.
In the item detail component, we use the input decorator to pass data from the parent to the child via the template.
We also create a few functions that can be triggered by clicking buttons to operate on a single item within the list.
In the template itself, we Display the item attributes and add the CRUD functions to the corresponding buttons.
Angular has several different form validation methods.
But in this example, I'm gonna use a template driven approach that uses the if then else syntax introduced in Angular 4.
This method is only ideal for small, simple forms because all the logic's gonna be defined directly in the HTML, which tends to be harder to maintain than just regular TypeScript.
We define 2 different templates named valid and errors.
We can then display these templates conditionally based on the form state.
The final step is to submit the form to create a new item.
In this case, I just use the click event to trigger the create item method from the service.
That's all for Firebase CRUD.
See you next time.

Speaker 0: In this episode, we're going to build a to do list feature that performs the SQL style CRUD operations of create, read, update, and delete. NoSQL uses different terms for these operations, so here's a basic translation when working with Firebase. Create equals push, Read equals list or object. Update equals update or set, and delete equals remove. Angular apps work with asynchronous data streams using RxJS or reactive extensions for JavaScript.

A data stream can be pretty much anything, but in this context, we're talking about objects from the Firebase real time database. At this point, it's assumed you have the AngularFire 2 package installed and bootstrapped into your app. If not, go to the docs or check out our environment setup video. Start by generating the necessary files from the command line. The feature is just a simple list of to do items that could be modified by users.

We will give items their own TypeScript class to keep our data nice and organized. All the CRUD magic happens in the service, which is going to perform 6 different operations. It can get a list of items, get a single item, create a new item, update an existing item, delete an existing item, and delete an entire list of items. Start by importing dependencies and declaring a couple public variables. When we get an item or list of items, they will be returned as an observable, which can then be unwrapped asynchronously from the component.

The functions for getting an item or list will return the observable so it can then be set to a public variable. All other functions are going to return void because they operate on the item's variable or take a specific key as an argument. Any component watching the item's variable will will be automatically updated when these functions are called from a component. All of these operations are defined in the AngularFire 2 docs, so I recommend you check those out if you're looking for more specific details on one of these functions. The list component will serve as the parent component that iterates over items in the database.

First, we need to define a public items variable during the n g on a net life cycle hook. This variable is going to hold the Firebase list observable. Then we use the n g four directive in the template along with the async pipe to iterate over the observable. The async pipe is critical because the observable will be empty on initial rendering, so we need to tell Angular to handle it differently than just a plain JavaScript object. In the item detail component, we use the input decorator to pass data from the parent to the child via the template.

We also create a few functions that can be triggered by clicking buttons to operate on a single item within the list. In the template itself, we Display the item attributes and add the CRUD functions to the corresponding buttons. Angular has several different form validation methods. But in this example, I'm gonna use a template driven approach that uses the if then else syntax introduced in Angular 4. This method is only ideal for small, simple forms because all the logic's gonna be defined directly in the HTML, which tends to be harder to maintain than just regular TypeScript.

We define 2 different templates named valid and errors. We can then display these templates conditionally based on the form state. The final step is to submit the form to create a new item. In this case, I just use the click event to trigger the create item method from the service. That's all for Firebase CRUD.

See you next time.
In this episode, we're going to build a to do list feature that performs the SQL style CRUD operations of create, read, update, and delete. NoSQL uses different terms for these operations, so here's a basic translation when working with Firebase. Create equals push, Read equals list or object. Update equals update or set, and delete equals remove.
databases
Angular apps work with asynchronous data streams using RxJS or reactive extensions for JavaScript. A data stream can be pretty much anything, but in this context, we're talking about objects from the Firebase real time database.
At this point, it's assumed you have the AngularFire 2 package installed and bootstrapped into your app. If not, go to the docs or check out our environment setup video. Start by generating the necessary files from the command line. The feature is just a simple list of to do items that could be modified by users. We will give items their own TypeScript class to keep our data nice and organized. All the CRUD magic happens in the service, which is going to perform 6 different operations.
software
programming
software development
It can get a list of items, get a single item, create a new item, update an existing item, delete an existing item, and delete an entire list of items. Start by importing dependencies and declaring a couple public variables. When we get an item or list of items, they will be returned as an observable, which can then be unwrapped asynchronously from the component. The functions for getting an item or list will return the observable so it can then be set to a public variable. All other functions are going to return void because they operate on the item's variable or take a specific key as an argument. Any component watching the item's variable will will be automatically updated when these functions are called from a component. All of these operations are defined in the AngularFire 2 docs, so I recommend you check those out if you're looking for more specific details on one of these functions.
The list component will serve as the parent component that iterates over items in the database. First, we need to define a public items variable during the n g on a net life cycle hook. This variable is going to hold the Firebase list observable. Then we use the n g four directive in the template along with the async pipe to iterate over the observable.
data
databases
The async pipe is critical because the observable will be empty on initial rendering, so we need to tell Angular to handle it differently than just a plain JavaScript object. In the item detail component, we use the input decorator to pass data from the parent to the child via the template. We also create a few functions that can be triggered by clicking buttons to operate on a single item within the list. In the template itself, we Display the item attributes and add the CRUD functions to the corresponding buttons. Angular has several different form validation methods. But in this example, I'm gonna use a template driven approach that uses the if then else syntax introduced in Angular 4. This method is only ideal for small, simple forms because all the logic's gonna be defined directly in the HTML, which tends to be harder to maintain than just regular TypeScript. We define 2 different templates named valid and errors. We can then display these templates conditionally based on the form state. The final step is to submit the form to create a new item. In this case, I just use the click event to trigger the create item method from the service. That's all for Firebase CRUD. See you next time.
In this episode, we're going to build a to do list feature that performs the SQL style CRUD operations of create, read, update, and delete. NoSQL uses different terms for these operations, so here's a basic translation when working with Firebase. Create equals push, Read equals list or object. Update equals update or set, and delete equals remove. Angular apps work with asynchronous data streams using RxJS or reactive extensions for JavaScript. A data stream can be pretty much anything, but in this context, we're talking about objects from the Firebase real time database. At this point, it's assumed you have the AngularFire 2 package installed and bootstrapped into your app. If not, go to the docs or check out our environment setup video. Start by generating the necessary files from the command line. The feature is just a simple list of to do items that could be modified by users. We will give items their own TypeScript class to keep our data nice and organized. All the CRUD magic happens in the service, which is going to perform 6 different operations. It can get a list of items, get a single item, create a new item, update an existing item, delete an existing item, and delete an entire list of items. Start by importing dependencies and declaring a couple public variables. When we get an item or list of items, they will be returned as an observable, which can then be unwrapped asynchronously from the component. The functions for getting an item or list will return the observable so it can then be set to a public variable. All other functions are going to return void because they operate on the item's variable or take a specific key as an argument. Any component watching the item's variable will will be automatically updated when these functions are called from a component. All of these operations are defined in the AngularFire 2 docs, so I recommend you check those out if you're looking for more specific details on one of these functions. The list component will serve as the parent component that iterates over items in the database. First, we need to define a public items variable during the n g on a net life cycle hook. This variable is going to hold the Firebase list observable. Then we use the n g four directive in the template along with the async pipe to iterate over the observable. The async pipe is critical because the observable will be empty on initial rendering, so we need to tell Angular to handle it differently than just a plain JavaScript object. In the item detail component, we use the input decorator to pass data from the parent to the child via the template. We also create a few functions that can be triggered by clicking buttons to operate on a single item within the list. In the template itself, we Display the item attributes and add the CRUD functions to the corresponding buttons. Angular has several different form validation methods. But in this example, I'm gonna use a template driven approach that uses the if then else syntax introduced in Angular 4. This method is only ideal for small, simple forms because all the logic's gonna be defined directly in the HTML, which tends to be harder to maintain than just regular TypeScript. We define 2 different templates named valid and errors. We can then display these templates conditionally based on the form state. The final step is to submit the form to create a new item. In this case, I just use the click event to trigger the create item method from the service. That's all for Firebase CRUD. See you next time.
In
in
this
this
episode,
episode
we're
we're
going
going
to
to
build
build
a
a
to
to
do
do
list
list
feature
feature
that
that
performs
performs
the
the
SQL
sql
style
style
CRUD
crud
operations
operations
of
of
create,
create
read,
read
update,
update
and
and
delete.
delete
NoSQL
nosql
uses
uses
different
different
terms
terms
for
for
these
these
operations,
operations
so
so
here's
here's
a
a
basic
basic
translation
translation
when
when
working
working
with
with
Firebase.
firebase
Create
create
equals
equals
push,
push
Read
read
equals
equals
list
list
or
or
object.
object
Update
update
equals
equals
update
update
or
or
set,
set
and
and
delete
delete
equals
equals
remove.
remove
Angular
angular
apps
apps
work
work
with
with
asynchronous
asynchronous
data
data
streams
streams
using
using
RxJS
rxjs
or
or
reactive
reactive
extensions
extensions
for
for
JavaScript.
javascript
A
a
data
data
stream
stream
can
can
be
be
pretty
pretty
much
much
anything,
anything
but
but
in
in
this
this
context,
context
we're
we're
talking
talking
about
about
objects
objects
from
from
the
the
Firebase
firebase
real
real
time
time
database.
database
At
at
this
this
point,
point
it's
it's
assumed
assumed
you
you
have
have
the
the
AngularFire
angularfire
2
2
package
package
installed
installed
and
and
bootstrapped
bootstrapped
into
into
your
your
app.
app
If
if
not,
not
go
go
to
to
the
the
docs
docs
or
or
check
check
out
out
our
our
environment
environment
setup
setup
video.
video
Start
start
by
by
generating
generating
the
the
necessary
necessary
files
files
from
from
the
the
command
command
line.
line
The
the
feature
feature
is
is
just
just
a
a
simple
simple
list
list
of
of
to
to
do
do
items
items
that
that
could
could
be
be
modified
modified
by
by
users.
users
We
we
will
will
give
give
items
items
their
their
own
own
TypeScript
typescript
class
class
to
to
keep
keep
our
our
data
data
nice
nice
and
and
organized.
organized
All
all
the
the
CRUD
crud
magic
magic
happens
happens
in
in
the
the
service,
service
which
which
is
is
going
going
to
to
perform
perform
6
6
different
different
operations.
operations
It
it
can
can
get
get
a
a
list
list
of
of
items,
items
get
get
a
a
single
single
item,
item
create
create
a
a
new
new
item,
item
update
update
an
an
existing
existing
item,
item
delete
delete
an
an
existing
existing
item,
item
and
and
delete
delete
an
an
entire
entire
list
list
of
of
items.
items
Start
start
by
by
importing
importing
dependencies
dependencies
and
and
declaring
declaring
a
a
couple
couple
public
public
variables.
variables
When
when
we
we
get
get
an
an
item
item
or
or
list
list
of
of
items,
items
they
they
will
will
be
be
returned
returned
as
as
an
an
observable,
observable
which
which
can
can
then
then
be
be
unwrapped
unwrapped
asynchronously
asynchronously
from
from
the
the
component.
component
The
the
functions
functions
for
for
getting
getting
an
an
item
item
or
or
list
list
will
will
return
return
the
the
observable
observable
so
so
it
it
can
can
then
then
be
be
set
set
to
to
a
a
public
public
variable.
variable
All
all
other
other
functions
functions
are
are
going
going
to
to
return
return
void
void
because
because
they
they
operate
operate
on
on
the
the
item's
item's
variable
variable
or
or
take
take
a
a
specific
specific
key
key
as
as
an
an
argument.
argument
Any
any
component
component
watching
watching
the
the
item's
item's
variable
variable
will
will
will
will
be
be
automatically
automatically
updated
updated
when
when
these
these
functions
functions
are
are
called
called
from
from
a
a
component.
component
All
all
of
of
these
these
operations
operations
are
are
defined
defined
in
in
the
the
AngularFire
angularfire
2
2
docs,
docs
so
so
I
i
recommend
recommend
you
you
check
check
those
those
out
out
if
if
you're
you're
looking
looking
for
for
more
more
specific
specific
details
details
on
on
one
one
of
of
these
these
functions.
functions
The
the
list
list
component
component
will
will
serve
serve
as
as
the
the
parent
parent
component
component
that
that
iterates
iterates
over
over
items
items
in
in
the
the
database.
database
First,
first
we
we
need
need
to
to
define
define
a
a
public
public
items
items
variable
variable
during
during
the
the
n
n
g
g
on
on
a
a
net
net
life
life
cycle
cycle
hook.
hook
This
this
variable
variable
is
is
going
going
to
to
hold
hold
the
the
Firebase
firebase
list
list
observable.
observable
Then
then
we
we
use
use
the
the
n
n
g
g
four
four
directive
directive
in
in
the
the
template
template
along
along
with
with
the
the
async
async
pipe
pipe
to
to
iterate
iterate
over
over
the
the
observable.
observable
The
the
async
async
pipe
pipe
is
is
critical
critical
because
because
the
the
observable
observable
will
will
be
be
empty
empty
on
on
initial
initial
rendering,
rendering
so
so
we
we
need
need
to
to
tell
tell
Angular
angular
to
to
handle
handle
it
it
differently
differently
than
than
just
just
a
a
plain
plain
JavaScript
javascript
object.
object
In
in
the
the
item
item
detail
detail
component,
component
we
we
use
use
the
the
input
input
decorator
decorator
to
to
pass
pass
data
data
from
from
the
the
parent
parent
to
to
the
the
child
child
via
via
the
the
template.
template
We
we
also
also
create
create
a
a
few
few
functions
functions
that
that
can
can
be
be
triggered
triggered
by
by
clicking
clicking
buttons
buttons
to
to
operate
operate
on
on
a
a
single
single
item
item
within
within
the
the
list.
list
In
in
the
the
template
template
itself,
itself
we
we
Display
display
the
the
item
item
attributes
attributes
and
and
add
add
the
the
CRUD
crud
functions
functions
to
to
the
the
corresponding
corresponding
buttons.
buttons
Angular
angular
has
has
several
several
different
different
form
form
validation
validation
methods.
methods
But
but
in
in
this
this
example,
example
I'm
i'm
gonna
gonna
use
use
a
a
template
template
driven
driven
approach
approach
that
that
uses
uses
the
the
if
if
then
then
else
else
syntax
syntax
introduced
introduced
in
in
Angular
angular
4.
4
This
this
method
method
is
is
only
only
ideal
ideal
for
for
small,
small
simple
simple
forms
forms
because
because
all
all
the
the
logic's
logic's
gonna
gonna
be
be
defined
defined
directly
directly
in
in
the
the
HTML,
html
which
which
tends
tends
to
to
be
be
harder
harder
to
to
maintain
maintain
than
than
just
just
regular
regular
TypeScript.
typescript
We
we
define
define
2
2
different
different
templates
templates
named
named
valid
valid
and
and
errors.
errors
We
we
can
can
then
then
display
display
these
these
templates
templates
conditionally
conditionally
based
based
on
on
the
the
form
form
state.
state
The
the
final
final
step
step
is
is
to
to
submit
submit
the
the
form
form
to
to
create
create
a
a
new
new
item.
item
In
in
this
this
case,
case
I
i
just
just
use
use
the
the
click
click
event
event
to
to
trigger
trigger
the
the
create
create
item
item
method
method
from
from
the
the
service.
service
That's
that's
all
all
for
for
Firebase
firebase
CRUD.
crud
See
see
you
you
next
next
time.
time
success
The speaker explains the process of creating a to-do list feature in the Angular app, including import dependencies and declare variables. They also provide an example of how to use the create item method in the template and explain the use of async pipe for updating items. The speaker emphasizes the importance of valid and errors in the template and provides a link to a document on valid and errors in the Angular 4 code.
Angular Firebase CRUD App with NoSQL Database Tutorial
In this episode, we're going to build a to do list feature that performs the SQL style CRUD operations of create, read, update, and delete. NoSQL uses different terms for these operations, so here's a basic translation when working with Firebase. Create equals push, Read equals list or object. Update equals update or set, and delete equals remove. Angular apps work with asynchronous data streams using RxJS or reactive extensions for JavaScript. A data stream can be pretty much anything, but in this context, we're talking about objects from the Firebase real time database. At this point, it's assumed you have the AngularFire 2 package installed and bootstrapped into your app. If not, go to the docs or check out our environment setup video. Start by generating the necessary files from the command line. The feature is just a simple list of to do items that could be modified by users. We will give items their own TypeScript class to keep our data nice and organized. All the CRUD magic happens in the service, which is going to perform 6 different operations. It can get a list of items, get a single item, create a new item, update an existing item, delete an existing item, and delete an entire list of items. Start by importing dependencies and declaring a couple public variables. When we get an item or list of items, they will be returned as an observable, which can then be unwrapped asynchronously from the component. The functions for getting an item or list will return the observable so it can then be set to a public variable. All other functions are going to return void because they operate on the item's variable or take a specific key as an argument. Any component watching the item's variable will will be automatically updated when these functions are called from a component. All of these operations are defined in the AngularFire 2 docs, so I recommend you check those out if you're looking for more specific details on one of these functions. The list component will serve as the parent component that iterates over items in the database. First, we need to define a public items variable during the n g on a net life cycle hook. This variable is going to hold the Firebase list observable. Then we use the n g four directive in the template along with the async pipe to iterate over the observable. The async pipe is critical because the observable will be empty on initial rendering, so we need to tell Angular to handle it differently than just a plain JavaScript object. In the item detail component, we use the input decorator to pass data from the parent to the child via the template. We also create a few functions that can be triggered by clicking buttons to operate on a single item within the list. In the template itself, we Display the item attributes and add the CRUD functions to the corresponding buttons. Angular has several different form validation methods. But in this example, I'm gonna use a template driven approach that uses the if then else syntax introduced in Angular 4. This method is only ideal for small, simple forms because all the logic's gonna be defined directly in the HTML, which tends to be harder to maintain than just regular TypeScript. We define 2 different templates named valid and errors. We can then display these templates conditionally based on the form state. The final step is to submit the form to create a new item. In this case, I just use the click event to trigger the create item method from the service. That's all for Firebase CRUD. See you next time.
The speaker explains the process of creating a to-do list feature in the Angular app, including import dependencies and declare variables. They also provide an example of how to use the create item method in the template and explain the use of async pipe for updating items. The speaker emphasizes the importance of valid and errors in the template and provides a link to a document on valid and errors in the Angular 4 code.