Angular Singleton Service Video Lecture | Angular 2 tutorial - Front-End Programming

they say spot 34 of Angela to tutorial
in our previous video we discussed why
should we use dependency injection and
the benefits it provide one of the
benefits of dependency injection is it
allows us to share data and
functionality very easily as the angular
injector provides a singleton that is a
single instance of the service so in
this video let's see how we can make use
of dependency injection and angular
services to create a singleton that is a
single instance of the service so we can
see how we can share data and
functionality across multiple components
in our application let's understand this
with a very simple example
here we have a service called user
preferences service if you look at this
service code it's very straightforward
to understand first we are importing
injectible from angular core and then we
are decorating our service class with
injectable decorator and within this
class we have just one property color
preference of type string with the
default value Orange so first let's go
ahead and create a service let's flip
over to visual studio right click on the
employee folder and add a new type
script file and let's name or file user
preferences start service dot TS let's
click OK and let me paste the service
class code there's the same code that we
have seen on the slide and here is what
we want to do we want to retrieve the
color preference property value and use
it on both these components on our
Employee List component and on our home
component notice on both the components
we have a text box and at the moment the
text box displays the default color
preference property value which is
orange the background color of the text
boxes is also set to orange and we want
these components to be also able to
change the color preference property
value and when one component changes the
value to a different color the other
component should be able to see that
change for example if the home component
changes the color preference property
value from orange to yellow and when we
navigate to employee list component this
component should be able to see that
change
so let's see how to share data using
this angular service between these two
components home and employee list
component so first let's use this user
preferences service within our home
component here is the home component
type script file within our home
component class let's first create a
private variable of type user
preferences service as you can see we
have a syntax error here
so let's include the required import
statement now let's try to use this user
preference service without using a
dependency injection so within our class
I'm going to introduce a constructor for
this home component and then within the
constructor I'm going to create a new
instance of this user preference service
using the new keyword so new user
preferences service and the service
class doesn't take any parameter so we
can use the empty constructor so here
we're using the new keyword to create an
instance of this user preferences
service so this instance is local to
this home component and we cannot use
this instance to share data with other
components let's actually prove that but
before that let's include a getter and a
setter within our home component to get
and set this color preference property
value of this user preference service
so first let's include a getter in
typescript to include educator we use
the get keyword and then followed by
that the name of the property in this
case we are dealing with color so let's
call it color you can give it any
meaningful name we want and the color is
of type string so it's going to return a
string type and from the property all
we're going to do is return the color
preference property value of our user
preference service similarly let's
include a setter for a setter we use the
set key word instead of cat and we use a
setter to set the color preference
property value to a different value so
we have to pass that value as a
parameter to this property so let's pass
that value is going to be of type string
and since this is a setter will not
specify any return value
and we don't have to use this written
keyword so at the moment we have a
getter and a setter next we need to
modify the template to include the
textbox so we have an inline mu template
within our home component first of all
let's use backticks instead of single
quotes so of our HTML can be on multiple
lines and then after the h1 element
let's include a development and we need
to close this development as well so
let's close it and then let's include
this literal text color preference and
that's what we see right here so we have
that color preference text and then we
want a text box so after the text let's
include an input element of type text
and then we want to use two-way
data-binding
to use two-way data-binding paid raw
banana in a box and we use ng model and
let's bind the text box to this color
property that we have defined so this
two-way data binding is going to keep
the property value and the value that we
type in the text box in sync and then we
also want to change the background color
of the text box to the value that we
have in the color preference property of
the service so what we are going to do
is style binding to your style binding
we use parentheses we use the style
keyword and the style that we want to
set is background of the text box and
let's say that two color property and
then let's close the input element so we
need to do similar changes within our
employee list component as well first
let's do the changes within the
component class of our employee list
component let's include the required
import statement to import user
preference service next let's include a
private field within our employee list
component class off type user prevent
service and then within the constructor
we are going to use the new keyword
instead of dependency injection
you create a new instance of user
preference service so this dot
underscore user preference service
equals new user preference service and
we already discussed the instance that
we create using the new keyword is going
to be local to this component and we
cannot use it to share data with other
components will prove that ingest well
now just like how we have getter and
setter within our home component
let's also include them within our
Employee List component so this
component is also able to get and set
the color preference property value of
our user preference service finally we
need to modify the view template of our
Employee List component here is the HTML
file of employee list component so just
after the table let's include a break
element and then this HTML right here so
here we have a text box and we are
binding to the color property we are
using to a data binding just like how we
did within our home component and we are
setting the background color of the text
box to the color property we have within
our Employee List component so with all
these changes in place let's run our
application by pressing ctrl f5 we are
on the home page and notice we can see
the default color preference property
value which is orange now let's navigate
to Employee List component and here also
we see the default value which is orange
so it looks like both these components
are sharing the color preference
property value of our user preferences
service but that's not true if you look
at what we are doing within our home
component and employee list component we
are using new keyword to create an
instance of the user preference service
so when we do this we are actually
creating an instance which is local to
that component meaning we cannot use
these local instances to share data
let's actually prove this at the moment
we are on Employee List component let's
change the color from orange to yellow
not at the moment we do that the
background color is changed to yellow
and if you look at our Employee List
component class
they have the setter which gets called
and what is it doing it's changing the
color preference property value of the
user preference service so now the color
preference property value within this
service instance should be yellow and
then we have a getter here which is
going to retrieve that color preference
property value which is ello and if you
look at the HTML they using two-way
data-binding with the color property and
we also have set the background color of
the text box to the value that we have
in the color property so that's the
reason why it changes to ello now the
instance that we have within our
employee component which is this user
preference service instance it's local
to this component so obviously it cannot
be used to share data within home
component so when we navigate to home
component let's see if we see this
yellow color so let me click on home
notice we still see orange there so
let's understand why we can't see that
yellow color here now first of all when
we navigated away from employee list
component to home component will lost
this local instance of user preference
object that this employee list component
has created and now we are on the home
component right so when we are on the
home component an instance of the home
component is created and when the
instance of home component is created
its constructor gets called and here
within the constructor we are creating
another local instance
of user preference service so here we
are creating a brand new instance of
user preference service and what is the
default value the default value is
orange and that's what we see within the
home component textbox now look at
what's going to happen and we navigate
to employees component notice here we
see orange and not the ellow color that
we have said before why is that that's
because when we navigated away from
employee list component to home
component we lost that local instance
and when we came back to employee list
component from the home component a new
instance of this component is created
and when that instance is created its
constructor is called
and within the constructor we are
creating a brand-new service of the user
preference of
so we get its default value with that
brand-new instance so now let's see how
all this is going to change with
dependency injection but before that
let's actually prove that a brand new
instance of user preferences service is
created every time we navigate from
employee list component to home
component and vice versa now within our
user preference service I am going to
include a constructor and all this
constructor is going to do is log a
message to the console saying new
instance of service created so every
time an instance of this user preference
service is created this constructor gets
called and it's going to log this
message new instance of service created
to the console so let's save these
changes and launch browser developer
tools and then let's reload this webpage
notice we are on the Employee List
component and we get that message new
instance of service created because this
component needs an instance of user
preference service now let's navigate
away from employee list component to
home component notice we see another
message log new instance of service
created and now when we come back to
employee list component it's going to
create another brand new local instance
of service so every time we navigate
between these two components and new
instance of services created which is
local to that specific component and
these local instances cannot be used to
share data now let's see how things are
going to change with dependency
injection remember the two steps to use
dependency injection but discuss those
two steps in detail in part 32 so if
you're new to dependency injection
please watch that video the first step
is to register our service with the
angular injector and then within the
components where we need an instance of
that service we specify a dependency
using the component constructor so first
let's register our user preferences
service with the angular injector so
let's go to our route module which is
apt of module dot TS and then here first
let's include the required import
statement
and then we are going to use the
providers property of the ng module
decorator to register our user
preference service with the angular
injector next within our home component
and employee list component we need to
specify a dependency on this service so
let's do the change first within the
home component we don't need this
private variable so I'm going to get rid
of that and we don't need to create an
instance of the user preference service
using the new keyword like that instead
we specify a dependency on the service
using a constructor parameter like this
but discuss this in detail and part 32
of our another two tutorial and then
let's do the same change within our
Employee List component as well so we
know don't need this private field and
we don't need to initialize this within
the constructor and then all we need to
do is specify a constructor parameter so
with all these changes in place let's
run our application one more time by
pressing ctrl f5 we're on the home page
and we see the default color orange
now let's launch browser developer tools
here on the console tab and notice we
see this message new instance of service
created we know the home component needs
an instance of user preferences service
but we are not creating a new instance
of the service within the component
instead we are using dependency
injection and we have already registered
our user preference service with the
angular injector so the angular injector
is going to provide the instance to our
home component so the first thing the
angular injector does is it checks
though I already have an instance of
user preference service it doesn't
because this is the first time we have
requested for it so it's going to create
a brand new instance and provide it to
the home component with a brand new
instance we get its default value which
is orange and that's what we see within
the home component and we also see this
message new instance of service created
now let's change this color from orange
to yellow now we have that single
instance with the angular injector and
we are changing the color from
orange 2l Oh so the color preference
within that instance has changed now -
hello now that's navigate to employee
list component and notice first of all
within the console we don't see another
message saying new instance of service
created but then if you look at our
employee list component we see the color
right here hello which the home
component has set now the angular
injector is going to check do I already
have an instance of user preference
service it does so it's going to provide
that same service instance to employee
list component as well okay and that's
how we are able to see the yellow color
which the home component has said and
the fact that we don't see new instance
of service created message logged in the
console again we can be certain that the
angular injector is injecting the same
instance into both home and employee
list component now if this component
changes this to red and if we go back to
home component we should see that red
color so the summary is with dependency
injection it is easy to share data and
functionality as the angular injector
provides a singleton that is a single
instance of the service thank you for
listening and have a great day