Fully documented lesson at https://angularfirebase.com/lessons/sharing-data-between-angular-components-four-methods/

In this episode, I am going to show you four different ways to share data between Angular components. 

Parent to Child the Input Decorator

When you declare a variable with the Input decorator in the child component, it allows that variable to be received from a parent template. In this case, we define a message variable in the parent, then use square brackets to pass the data to the child. Now the child can display this data in its own template.

Child to Parent via ViewChild

ViewChild allows a one component to be injected into another, giving the parent access to its attributes and functions. One caveat, however, is that child won't be available until after the view has been initialized. This means we need to implement the AfterViewInit lifecycle hook to receive the data from the child.  

In the AfterViewInit function we can access the message variable defined in the child

Child to Parent via Output and EventEmitter

Another way to share data is to emit data from the child, which can be listed to by the parent. This approach is ideal when you want to share data changes that occur on things like button clicks, form entires, and other user events. 

In the child, we declare a messageEvent variable with the Output decorator and set it equal to a new event emitter. Then we create a function named sendMessage that calls emit on this event with the message we want to send. Lastly, we create a button to trigger this function.

In the parent, we create a function to receive the message and set it equal to the message variable. 

The parent can now subscribe to this messageEvent that's outputted by the child component, then run the receive message function whenever this event occurs. 

Share data between any components

When passing data between components that lack a direct connection, such as siblings, grandchildren, etc, you should you a shared service. When you have data that should aways been in sync, I find the RxJS `BehaviorSubject` very useful in this situation. The main benefit that a BehaviorSubject ensures that every component consuming the service receives the most recent data. 
    

In the service, we create a private BehaviorSubject that will hold the current value of the message. We define a currentMessage variable handle this data stream as an observable that will be used by the components. Lastly, we create function that calls next on the BehaviorSubject to change its value. 

The parent, child, and sibling components all receive the same treatment. We inject the DataService in the constructor, then subscribe to the currentMessage observable and set its value equal to the message variable. 

Now if we create a function in any one of these components that changes the value of the message. when this function is executed the new data it's automatically broadcast to all other components. 

That's it for data sharing. See you next time.
2024-02-04T08:37:29.357Z
nova-2
2-general-nova
2024-01-09.29447
30089e05-99d1-4376-b32e-c263170674af
a2579bd9-631e-4cb7-be0a-e443c4ec0e14
ee89d6948dfb7d74c879adb9f507a8031987d8311389d7154707db919addcfe1
67875a7f-c9c4-48a0-aa55-5bdb8a91c34a
deprecated
In this episode, I'm going to show you 4 different ways to share data between Angular components.
Parent to child via the input decorator.
When you declare a variable with the input decorator in the child component, it allows that variable to be received from the parent component template.
In this case, we define a message variable in the parent then use square brackets to pass the data to the child.
Now the child component can display the data in its own template.
Child to parent via output and event emitter.
Another way to share data is to emit it from the child, which can be listened to by the parent.
This approach is ideal when you want to share data changes that occur on things like button clicks, form entries, and other user events.
In the child, we declare a message event variable with the output decorator and set it equal to a new event emitter.
Then we create a function named send message that calls emit on this event with the message we wanna send.
Lastly, we create a button to trigger this function in the HTML.
In the parent, we create a function to receive the message and set it equal to the message variable.
The parent can now subscribe to this message event that's outputted by the child component, then run the receive message function whenever that event occurs.
Child to parent via view child.
ViewChild allows one component to be injected into another, giving the parent access to all of its attributes and functions.
One caveat, however, is that the child won't be available until after the view is fully initialized.
This means we need to implement the after through view and knit life cycle hook to receive the data from the child.
Inside the after view init function, we can then access the message variable that was defined inside the child component.
Share data between any unrelated components.
When passing data between components that Like a direct connection such as siblings, grandchildren, etcetera, you should use a shared service.
When you have data that always needs to be in sync, I find that the RxJS behavior subject is very useful in this situation.
The main benefit of a behavior subject is that it ensures every component consuming the service receives the most recent up to date data.
In the service, we create a private behavior subject that will hold the current value of the message.
Then we define a current message variable set to an observable that will be used by the components.
Lastly, we create a function that calls next on the behavior subject to change its current value.
The parent, child, and simile components all receive the same treatment.
We inject The service in the constructor then subscribe to the current message observable and set its value equal to the message variable.
Now we can create a function in any one of these components that changes the value of the message.
When this function is executed, the new data will automatically be broadcast all other components.
That's it for data sharing.
See you next time.

Speaker 0: In this episode, I'm going to show you 4 different ways to share data between Angular components. Parent to child via the input decorator. When you declare a variable with the input decorator in the child component, it allows that variable to be received from the parent component template. In this case, we define a message variable in the parent then use square brackets to pass the data to the child. Now the child component can display the data in its own template.

Child to parent via output and event emitter. Another way to share data is to emit it from the child, which can be listened to by the parent. This approach is ideal when you want to share data changes that occur on things like button clicks, form entries, and other user events. In the child, we declare a message event variable with the output decorator and set it equal to a new event emitter. Then we create a function named send message that calls emit on this event with the message we wanna send.

Lastly, we create a button to trigger this function in the HTML. In the parent, we create a function to receive the message and set it equal to the message variable. The parent can now subscribe to this message event that's outputted by the child component, then run the receive message function whenever that event occurs. Child to parent via view child. ViewChild allows one component to be injected into another, giving the parent access to all of its attributes and functions.

One caveat, however, is that the child won't be available until after the view is fully initialized. This means we need to implement the after through view and knit life cycle hook to receive the data from the child. Inside the after view init function, we can then access the message variable that was defined inside the child component. Share data between any unrelated components. When passing data between components that Like a direct connection such as siblings, grandchildren, etcetera, you should use a shared service.

When you have data that always needs to be in sync, I find that the RxJS behavior subject is very useful in this situation. The main benefit of a behavior subject is that it ensures every component consuming the service receives the most recent up to date data. In the service, we create a private behavior subject that will hold the current value of the message. Then we define a current message variable set to an observable that will be used by the components. Lastly, we create a function that calls next on the behavior subject to change its current value.

The parent, child, and simile components all receive the same treatment. We inject The service in the constructor then subscribe to the current message observable and set its value equal to the message variable. Now we can create a function in any one of these components that changes the value of the message. When this function is executed, the new data will automatically be broadcast all other components. That's it for data sharing.

See you next time.
In this episode, I'm going to show you 4 different ways to share data between Angular components. Parent to child via the input decorator. When you declare a variable with the input decorator in the child component, it allows that variable to be received from the parent component template. In this case, we define a message variable in the parent then use square brackets to pass the data to the child. Now the child component can display the data in its own template. Child to parent via output and event emitter. Another way to share data is to emit it from the child, which can be listened to by the parent. This approach is ideal when you want to share data changes that occur on things like button clicks, form entries, and other user events. In the child, we declare a message event variable with the output decorator and set it equal to a new event emitter. Then we create a function named send message that calls emit on this event with the message we wanna send.
data
parenting
Lastly, we create a button to trigger this function in the HTML. In the parent, we create a function to receive the message and set it equal to the message variable. The parent can now subscribe to this message event that's outputted by the child component, then run the receive message function whenever that event occurs.
Child to parent via view child. ViewChild allows one component to be injected into another, giving the parent access to all of its attributes and functions. One caveat, however, is that the child won't be available until after the view is fully initialized. This means we need to implement the after through view and knit life cycle hook to receive the data from the child.
parenting
visualization
Inside the after view init function, we can then access the message variable that was defined inside the child component. Share data between any unrelated components.
When passing data between components that Like a direct connection such as siblings, grandchildren, etcetera, you should use a shared service. When you have data that always needs to be in sync, I find that the RxJS behavior subject is very useful in this situation. The main benefit of a behavior subject is that it ensures every component consuming the service receives the most recent up to date data. In the service, we create a private behavior subject that will hold the current value of the message. Then we define a current message variable set to an observable that will be used by the components. Lastly, we create a function that calls next on the behavior subject to change its current value. The parent, child, and simile components all receive the same treatment. We inject The service in the constructor then subscribe to the current message observable and set its value equal to the message variable.
programming
data
data management
Now we can create a function in any one of these components that changes the value of the message. When this function is executed, the new data will automatically be broadcast all other components. That's it for data sharing. See you next time.
data management
data
data analysis
databases
programming
In this episode, I'm going to show you 4 different ways to share data between Angular components. Parent to child via the input decorator. When you declare a variable with the input decorator in the child component, it allows that variable to be received from the parent component template. In this case, we define a message variable in the parent then use square brackets to pass the data to the child. Now the child component can display the data in its own template. Child to parent via output and event emitter. Another way to share data is to emit it from the child, which can be listened to by the parent. This approach is ideal when you want to share data changes that occur on things like button clicks, form entries, and other user events. In the child, we declare a message event variable with the output decorator and set it equal to a new event emitter. Then we create a function named send message that calls emit on this event with the message we wanna send. Lastly, we create a button to trigger this function in the HTML. In the parent, we create a function to receive the message and set it equal to the message variable. The parent can now subscribe to this message event that's outputted by the child component, then run the receive message function whenever that event occurs. Child to parent via view child. ViewChild allows one component to be injected into another, giving the parent access to all of its attributes and functions. One caveat, however, is that the child won't be available until after the view is fully initialized. This means we need to implement the after through view and knit life cycle hook to receive the data from the child. Inside the after view init function, we can then access the message variable that was defined inside the child component. Share data between any unrelated components. When passing data between components that Like a direct connection such as siblings, grandchildren, etcetera, you should use a shared service. When you have data that always needs to be in sync, I find that the RxJS behavior subject is very useful in this situation. The main benefit of a behavior subject is that it ensures every component consuming the service receives the most recent up to date data. In the service, we create a private behavior subject that will hold the current value of the message. Then we define a current message variable set to an observable that will be used by the components. Lastly, we create a function that calls next on the behavior subject to change its current value. The parent, child, and simile components all receive the same treatment. We inject The service in the constructor then subscribe to the current message observable and set its value equal to the message variable. Now we can create a function in any one of these components that changes the value of the message. When this function is executed, the new data will automatically be broadcast all other components. That's it for data sharing. See you next time.
In
in
this
this
episode,
episode
I'm
i'm
going
going
to
to
show
show
you
you
4
4
different
different
ways
ways
to
to
share
share
data
data
between
between
Angular
angular
components.
components
Parent
parent
to
to
child
child
via
via
the
the
input
input
decorator.
decorator
When
when
you
you
declare
declare
a
a
variable
variable
with
with
the
the
input
input
decorator
decorator
in
in
the
the
child
child
component,
component
it
it
allows
allows
that
that
variable
variable
to
to
be
be
received
received
from
from
the
the
parent
parent
component
component
template.
template
In
in
this
this
case,
case
we
we
define
define
a
a
message
message
variable
variable
in
in
the
the
parent
parent
then
then
use
use
square
square
brackets
brackets
to
to
pass
pass
the
the
data
data
to
to
the
the
child.
child
Now
now
the
the
child
child
component
component
can
can
display
display
the
the
data
data
in
in
its
its
own
own
template.
template
Child
child
to
to
parent
parent
via
via
output
output
and
and
event
event
emitter.
emitter
Another
another
way
way
to
to
share
share
data
data
is
is
to
to
emit
emit
it
it
from
from
the
the
child,
child
which
which
can
can
be
be
listened
listened
to
to
by
by
the
the
parent.
parent
This
this
approach
approach
is
is
ideal
ideal
when
when
you
you
want
want
to
to
share
share
data
data
changes
changes
that
that
occur
occur
on
on
things
things
like
like
button
button
clicks,
clicks
form
form
entries,
entries
and
and
other
other
user
user
events.
events
In
in
the
the
child,
child
we
we
declare
declare
a
a
message
message
event
event
variable
variable
with
with
the
the
output
output
decorator
decorator
and
and
set
set
it
it
equal
equal
to
to
a
a
new
new
event
event
emitter.
emitter
Then
then
we
we
create
create
a
a
function
function
named
named
send
send
message
message
that
that
calls
calls
emit
emit
on
on
this
this
event
event
with
with
the
the
message
message
we
we
wanna
wanna
send.
send
Lastly,
lastly
we
we
create
create
a
a
button
button
to
to
trigger
trigger
this
this
function
function
in
in
the
the
HTML.
html
In
in
the
the
parent,
parent
we
we
create
create
a
a
function
function
to
to
receive
receive
the
the
message
message
and
and
set
set
it
it
equal
equal
to
to
the
the
message
message
variable.
variable
The
the
parent
parent
can
can
now
now
subscribe
subscribe
to
to
this
this
message
message
event
event
that's
that's
outputted
outputted
by
by
the
the
child
child
component,
component
then
then
run
run
the
the
receive
receive
message
message
function
function
whenever
whenever
that
that
event
event
occurs.
occurs
Child
child
to
to
parent
parent
via
via
view
view
child.
child
ViewChild
viewchild
allows
allows
one
one
component
component
to
to
be
be
injected
injected
into
into
another,
another
giving
giving
the
the
parent
parent
access
access
to
to
all
all
of
of
its
its
attributes
attributes
and
and
functions.
functions
One
one
caveat,
caveat
however,
however
is
is
that
that
the
the
child
child
won't
won't
be
be
available
available
until
until
after
after
the
the
view
view
is
is
fully
fully
initialized.
initialized
This
this
means
means
we
we
need
need
to
to
implement
implement
the
the
after
after
through
through
view
view
and
and
knit
knit
life
life
cycle
cycle
hook
hook
to
to
receive
receive
the
the
data
data
from
from
the
the
child.
child
Inside
inside
the
the
after
after
view
view
init
init
function,
function
we
we
can
can
then
then
access
access
the
the
message
message
variable
variable
that
that
was
was
defined
defined
inside
inside
the
the
child
child
component.
component
Share
share
data
data
between
between
any
any
unrelated
unrelated
components.
components
When
when
passing
passing
data
data
between
between
components
components
that
that
Like
like
a
a
direct
direct
connection
connection
such
such
as
as
siblings,
siblings
grandchildren,
grandchildren
etcetera,
etcetera
you
you
should
should
use
use
a
a
shared
shared
service.
service
When
when
you
you
have
have
data
data
that
that
always
always
needs
needs
to
to
be
be
in
in
sync,
sync
I
i
find
find
that
that
the
the
RxJS
rxjs
behavior
behavior
subject
subject
is
is
very
very
useful
useful
in
in
this
this
situation.
situation
The
the
main
main
benefit
benefit
of
of
a
a
behavior
behavior
subject
subject
is
is
that
that
it
it
ensures
ensures
every
every
component
component
consuming
consuming
the
the
service
service
receives
receives
the
the
most
most
recent
recent
up
up
to
to
date
date
data.
data
In
in
the
the
service,
service
we
we
create
create
a
a
private
private
behavior
behavior
subject
subject
that
that
will
will
hold
hold
the
the
current
current
value
value
of
of
the
the
message.
message
Then
then
we
we
define
define
a
a
current
current
message
message
variable
variable
set
set
to
to
an
an
observable
observable
that
that
will
will
be
be
used
used
by
by
the
the
components.
components
Lastly,
lastly
we
we
create
create
a
a
function
function
that
that
calls
calls
next
next
on
on
the
the
behavior
behavior
subject
subject
to
to
change
change
its
its
current
current
value.
value
The
the
parent,
parent
child,
child
and
and
simile
simile
components
components
all
all
receive
receive
the
the
same
same
treatment.
treatment
We
we
inject
inject
The
the
service
service
in
in
the
the
constructor
constructor
then
then
subscribe
subscribe
to
to
the
the
current
current
message
message
observable
observable
and
and
set
set
its
its
value
value
equal
equal
to
to
the
the
message
message
variable.
variable
Now
now
we
we
can
can
create
create
a
a
function
function
in
in
any
any
one
one
of
of
these
these
components
components
that
that
changes
changes
the
the
value
value
of
of
the
the
message.
message
When
when
this
this
function
function
is
is
executed,
executed
the
the
new
new
data
data
will
will
automatically
automatically
be
be
broadcast
broadcast
all
all
other
other
components.
components
That's
that's
it
it
for
for
data
data
sharing.
sharing
See
see
you
you
next
next
time.
time
success
The speaker explains how to share data between Angular components, including the output decorator and eventatera, and how to do so through the parent component template. They also explain how to share data between unrelated components and provide a example of a service that injects a private behavior subject to change its current value. Finally, they explain how to change the current value of a message by executing a function in any one of the components.
Sharing Data between Components in Angular
In this episode, I'm going to show you 4 different ways to share data between Angular components. Parent to child via the input decorator. When you declare a variable with the input decorator in the child component, it allows that variable to be received from the parent component template. In this case, we define a message variable in the parent then use square brackets to pass the data to the child. Now the child component can display the data in its own template. Child to parent via output and event emitter. Another way to share data is to emit it from the child, which can be listened to by the parent. This approach is ideal when you want to share data changes that occur on things like button clicks, form entries, and other user events. In the child, we declare a message event variable with the output decorator and set it equal to a new event emitter. Then we create a function named send message that calls emit on this event with the message we wanna send. Lastly, we create a button to trigger this function in the HTML. In the parent, we create a function to receive the message and set it equal to the message variable. The parent can now subscribe to this message event that's outputted by the child component, then run the receive message function whenever that event occurs. Child to parent via view child. ViewChild allows one component to be injected into another, giving the parent access to all of its attributes and functions. One caveat, however, is that the child won't be available until after the view is fully initialized. This means we need to implement the after through view and knit life cycle hook to receive the data from the child. Inside the after view init function, we can then access the message variable that was defined inside the child component. Share data between any unrelated components. When passing data between components that Like a direct connection such as siblings, grandchildren, etcetera, you should use a shared service. When you have data that always needs to be in sync, I find that the RxJS behavior subject is very useful in this situation. The main benefit of a behavior subject is that it ensures every component consuming the service receives the most recent up to date data. In the service, we create a private behavior subject that will hold the current value of the message. Then we define a current message variable set to an observable that will be used by the components. Lastly, we create a function that calls next on the behavior subject to change its current value. The parent, child, and simile components all receive the same treatment. We inject The service in the constructor then subscribe to the current message observable and set its value equal to the message variable. Now we can create a function in any one of these components that changes the value of the message. When this function is executed, the new data will automatically be broadcast all other components. That's it for data sharing. See you next time.
The speaker explains how to share data between Angular components, including the output decorator and eventatera, and how to do so through the parent component template. They also explain how to share data between unrelated components and provide a example of a service that injects a private behavior subject to change its current value. Finally, they explain how to change the current value of a message by executing a function in any one of the components.