118. [OPTIONAL] Assignment Solution

0:02

S… Speaker 1 (118. [OPTIONAL] Assignment Solution)

So, were you successful?

0:03

S… Speaker 1 (118. [OPTIONAL] Assignment Solution)

Here's my solution.

0:04

S… Speaker 1 (118. [OPTIONAL] Assignment Solution)

I would create this user's service as we are asked

0:09

S… Speaker 1 (118. [OPTIONAL] Assignment Solution)

to. And in there,

0:10

S… Speaker 1 (118. [OPTIONAL] Assignment Solution)

we of course export a class,

0:13

S… Speaker 1 (118. [OPTIONAL] Assignment Solution)

the user's service.

0:14

S… Speaker 1 (118. [OPTIONAL] Assignment Solution)

We don't need to add add injectable right now because right now we're

0:18

S… Speaker 1 (118. [OPTIONAL] Assignment Solution)

not injecting a service in there.

0:20

S… Speaker 1 (118. [OPTIONAL] Assignment Solution)

And here I now want to manage my users.

0:23

S… Speaker 1 (118. [OPTIONAL] Assignment Solution)

Now you could create one array of users and their store

0:27

S… Speaker 1 (118. [OPTIONAL] Assignment Solution)

objects,

0:27

S… Speaker 1 (118. [OPTIONAL] Assignment Solution)

which for each object also tracks the state of the user.

0:32

S… Speaker 1 (118. [OPTIONAL] Assignment Solution)

I will go with two arrays.

0:34

S… Speaker 1 (118. [OPTIONAL] Assignment Solution)

So I will have my active and my inactive users,

0:36

S… Speaker 1 (118. [OPTIONAL] Assignment Solution)

the two arrays from the app component.

0:38

S… Speaker 1 (118. [OPTIONAL] Assignment Solution)

So I'll copy it from there and paste it into my user service.

0:42

S… Speaker 1 (118. [OPTIONAL] Assignment Solution)

But again, as an improvement,

0:44

S… Speaker 1 (118. [OPTIONAL] Assignment Solution)

you could store objects in one single.

0:46

S… Speaker 1 (118. [OPTIONAL] Assignment Solution)

array there,

0:47

S… Speaker 1 (118. [OPTIONAL] Assignment Solution)

which then allows you to switch the status for each object,

0:50

S… Speaker 1 (118. [OPTIONAL] Assignment Solution)

for each user.

0:51

S… Speaker 1 (118. [OPTIONAL] Assignment Solution)

So this is this.

0:54

S… Speaker 1 (118. [OPTIONAL] Assignment Solution)

And then I want to add a setToActive method.

0:58

S… Speaker 1 (118. [OPTIONAL] Assignment Solution)

Here I expect to get the ID of the element

1:02

S… Speaker 1 (118. [OPTIONAL] Assignment Solution)

I should switch and a setToInactive method.

1:05

S… Speaker 1 (118. [OPTIONAL] Assignment Solution)

And here, of course,

1:06

S… Speaker 1 (118. [OPTIONAL] Assignment Solution)

also you could optimize this by having one method which does both and which

1:10

S… Speaker 1 (118. [OPTIONAL] Assignment Solution)

receives an additional argument which determines whether you want to switch active

1:14

S… Speaker 1 (118. [OPTIONAL] Assignment Solution)

to inactive or the other way around.

1:16

S… Speaker 1 (118. [OPTIONAL] Assignment Solution)

Well,

1:17

S… Speaker 1 (118. [OPTIONAL] Assignment Solution)

in setToActive,

1:19

S… Speaker 1 (118. [OPTIONAL] Assignment Solution)

I want to reach out to my active users and push a

1:23

S… Speaker 1 (118. [OPTIONAL] Assignment Solution)

new element to them.

1:24

S… Speaker 1 (118. [OPTIONAL] Assignment Solution)

That new element is in my inactive users,

1:27

S… Speaker 1 (118. [OPTIONAL] Assignment Solution)

the user with the ID I'm receiving there.

1:30

S… Speaker 1 (118. [OPTIONAL] Assignment Solution)

And thereafter,

1:31

S… Speaker 1 (118. [OPTIONAL] Assignment Solution)

I can simply splice that user.

1:34

S… Speaker 1 (118. [OPTIONAL] Assignment Solution)

Splice will simply remove this one element in this case here.

1:37

S… Speaker 1 (118. [OPTIONAL] Assignment Solution)

Well,

1:38

S… Speaker 1 (118. [OPTIONAL] Assignment Solution)

now I can copy that code,

1:41

S… Speaker 1 (118. [OPTIONAL] Assignment Solution)

paste it in here and reverse it.

1:43

S… Speaker 1 (118. [OPTIONAL] Assignment Solution)

push it to the inactive users,

1:45

S… Speaker 1 (118. [OPTIONAL] Assignment Solution)

from the active users and splice it from the active users.

1:49

S… Speaker 1 (118. [OPTIONAL] Assignment Solution)

Now this service is prepared.

1:51

S… Speaker 1 (118. [OPTIONAL] Assignment Solution)

And now in my app component,

1:53

S… Speaker 1 (118. [OPTIONAL] Assignment Solution)

I can get rid of these two methods.

1:55

S… Speaker 1 (118. [OPTIONAL] Assignment Solution)

I also can delete my users here.

1:59

S… Speaker 1 (118. [OPTIONAL] Assignment Solution)

So we can completely clean this component and we can clean everything

2:03

S… Speaker 1 (118. [OPTIONAL] Assignment Solution)

in the template of the app component.

2:05

S… Speaker 1 (118. [OPTIONAL] Assignment Solution)

We don't need to pass the properties to our components there because

2:09

S… Speaker 1 (118. [OPTIONAL] Assignment Solution)

these components can reach out to the service on their own.

2:13

S… Speaker 1 (118. [OPTIONAL] Assignment Solution)

Now, it is important to make sure that we provide the service on

2:17

S… Speaker 1 (118. [OPTIONAL] Assignment Solution)

the right level.

2:18

S… Speaker 1 (118. [OPTIONAL] Assignment Solution)

If we would provide it in the inactive user component and the active

2:22

S… Speaker 1 (118. [OPTIONAL] Assignment Solution)

user component,

2:23

S… Speaker 1 (118. [OPTIONAL] Assignment Solution)

we would have two different instances of that service and therefore

2:27

S… Speaker 1 (118. [OPTIONAL] Assignment Solution)

it would not work.

2:28

S… Speaker 1 (118. [OPTIONAL] Assignment Solution)

We could not switch because we would work with two different arrays.

2:32

S… Speaker 1 (118. [OPTIONAL] Assignment Solution)

So with four different arrays actually.

2:35

S… Speaker 1 (118. [OPTIONAL] Assignment Solution)

So therefore,

2:36

S… Speaker 1 (118. [OPTIONAL] Assignment Solution)

this is not the right place to provide it.

2:38

S… Speaker 1 (118. [OPTIONAL] Assignment Solution)

We could provide it here in the app component or in the app module.

2:42

S… Speaker 1 (118. [OPTIONAL] Assignment Solution)

Now, since we don't plan on injecting this service in another service

2:46

S… Speaker 1 (118. [OPTIONAL] Assignment Solution)

or something like this,

2:47

S… Speaker 1 (118. [OPTIONAL] Assignment Solution)

there is no reason to provide it application -wide,

2:50

S… Speaker 1 (118. [OPTIONAL] Assignment Solution)

though you could do that.

2:51

S… Speaker 1 (118. [OPTIONAL] Assignment Solution)

That's not wrong,

2:52

S… Speaker 1 (118. [OPTIONAL] Assignment Solution)

not bad.

2:52

S… Speaker 1 (118. [OPTIONAL] Assignment Solution)

But I will simply provide it here in the app component.

2:56

S… Speaker 1 (118. [OPTIONAL] Assignment Solution)

But again, just to highlight this,

2:57

S… Speaker 1 (118. [OPTIONAL] Assignment Solution)

it's not bad or wrong to provide it in the app module.

3:01

S… Speaker 1 (118. [OPTIONAL] Assignment Solution)

So here I will provide my users service.

3:05

S… Speaker 1 (118. [OPTIONAL] Assignment Solution)

Make sure to also add the import.

3:08

S… Speaker 1 (118. [OPTIONAL] Assignment Solution)

With that provided on this level,

3:10

S… Speaker 1 (118. [OPTIONAL] Assignment Solution)

active users and inactive users will actually share the same service,

3:15

S… Speaker 1 (118. [OPTIONAL] Assignment Solution)

the same instance of the service.

3:16

S… Speaker 1 (118. [OPTIONAL] Assignment Solution)

So now I can go to inactive users,

3:19

S… Speaker 1 (118. [OPTIONAL] Assignment Solution)

add a constructor here and get my users

3:23

S… Speaker 1 (118. [OPTIONAL] Assignment Solution)

service here.

3:25

S… Speaker 1 (118. [OPTIONAL] Assignment Solution)

So of type users service,

3:27

S… Speaker 1 (118. [OPTIONAL] Assignment Solution)

of course, user service is the name actually.

3:31

S… Speaker 1 (118. [OPTIONAL] Assignment Solution)

make sure to add the import here too.

3:34

S… Speaker 1 (118. [OPTIONAL] Assignment Solution)

You always need to add this.

3:36

S… Speaker 1 (118. [OPTIONAL] Assignment Solution)

That's a TypeScript feature,

3:37

S… Speaker 1 (118. [OPTIONAL] Assignment Solution)

not related to Angular.

3:38

S… Speaker 1 (118. [OPTIONAL] Assignment Solution)

And then I can remove the input here.

3:41

S… Speaker 1 (118. [OPTIONAL] Assignment Solution)

We're not receiving it from outside anymore.

3:43

S… Speaker 1 (118. [OPTIONAL] Assignment Solution)

I can remove my whole output,

3:45

S… Speaker 1 (118. [OPTIONAL] Assignment Solution)

my whole event here.

3:47

S… Speaker 1 (118. [OPTIONAL] Assignment Solution)

And also remove this where I emit it.

3:50

S… Speaker 1 (118. [OPTIONAL] Assignment Solution)

Remove all these imports therefore.

3:52

S… Speaker 1 (118. [OPTIONAL] Assignment Solution)

And now I want to initialize my user's array.

3:56

S… Speaker 1 (118. [OPTIONAL] Assignment Solution)

i will do it on init as again it is a good practice to do initialization

4:01

S… Speaker 1 (118. [OPTIONAL] Assignment Solution)

work in there so let's implement on in it make sure to import it and

4:06

S… Speaker 1 (118. [OPTIONAL] Assignment Solution)

then we need to add the ng on in that method and in there i can set my users

4:10

S… Speaker 1 (118. [OPTIONAL] Assignment Solution)

equal to the users i fetched from my user service and

4:14

S… Speaker 1 (118. [OPTIONAL] Assignment Solution)

we're in the inactive component here so i should get my inactive users

4:20

S… Speaker 1 (118. [OPTIONAL] Assignment Solution)

Now with that,

4:20

S… Speaker 1 (118. [OPTIONAL] Assignment Solution)

I can simply copy that code over to the active users,

4:24

S… Speaker 1 (118. [OPTIONAL] Assignment Solution)

replace my input and my output here too,

4:27

S… Speaker 1 (118. [OPTIONAL] Assignment Solution)

and remove the input string,

4:30

S… Speaker 1 (118. [OPTIONAL] Assignment Solution)

remove all these imports,

4:32

S… Speaker 1 (118. [OPTIONAL] Assignment Solution)

but on the other hand,

4:33

S… Speaker 1 (118. [OPTIONAL] Assignment Solution)

make sure to import user service and implement on init.

4:37

S… Speaker 1 (118. [OPTIONAL] Assignment Solution)

So just like in the other component,

4:38

S… Speaker 1 (118. [OPTIONAL] Assignment Solution)

make sure to import on init too and import the service.

4:44

S… Speaker 1 (118. [OPTIONAL] Assignment Solution)

And here we don't have to emit this event anymore.

4:47

S… Speaker 1 (118. [OPTIONAL] Assignment Solution)

Instead,

4:48

S… Speaker 1 (118. [OPTIONAL] Assignment Solution)

make sure that now users is not the inactive users,

4:51

S… Speaker 1 (118. [OPTIONAL] Assignment Solution)

but the active users,

4:52

S… Speaker 1 (118. [OPTIONAL] Assignment Solution)

since we're in the active users component.

4:54

S… Speaker 1 (118. [OPTIONAL] Assignment Solution)

And if we click on set to inactive,

4:57

S… Speaker 1 (118. [OPTIONAL] Assignment Solution)

I want to reach out to the user service and call set

5:01

S… Speaker 1 (118. [OPTIONAL] Assignment Solution)

to inactive and pass on this ID.

5:04

S… Speaker 1 (118. [OPTIONAL] Assignment Solution)

And on the other hand,

5:05

S… Speaker 1 (118. [OPTIONAL] Assignment Solution)

in the inactive service,

5:07

S… Speaker 1 (118. [OPTIONAL] Assignment Solution)

I want to do the same.

5:08

S… Speaker 1 (118. [OPTIONAL] Assignment Solution)

Reach out to the user service and here call set

5:12

S… Speaker 1 (118. [OPTIONAL] Assignment Solution)

to active and pass the ID.

5:15

S… Speaker 1 (118. [OPTIONAL] Assignment Solution)

That should be all.

5:17

S… Speaker 1 (118. [OPTIONAL] Assignment Solution)

Let's see if this works.

5:19

S… Speaker 1 (118. [OPTIONAL] Assignment Solution)

If our app here is reloaded,

5:21

S… Speaker 1 (118. [OPTIONAL] Assignment Solution)

I can still switch my users around.

5:25

S… Speaker 1 (118. [OPTIONAL] Assignment Solution)

So this first part does work,

5:27

S… Speaker 1 (118. [OPTIONAL] Assignment Solution)

but boy,

5:28

S… Speaker 1 (118. [OPTIONAL] Assignment Solution)

is it leaner,

5:29

S… Speaker 1 (118. [OPTIONAL] Assignment Solution)

much less passing around instead having a clean central service.

5:34

S… Speaker 1 (118. [OPTIONAL] Assignment Solution)

Now, the other part of the task was to add this counter service.

5:38

S… Speaker 1 (118. [OPTIONAL] Assignment Solution)

So let's add this to the counter service dot TS

5:42

S… Speaker 1 (118. [OPTIONAL] Assignment Solution)

file.

5:42

S… Speaker 1 (118. [OPTIONAL] Assignment Solution)

Let's export a class here,

5:45

S… Speaker 1 (118. [OPTIONAL] Assignment Solution)

the counter service like this.

5:48

S… Speaker 1 (118. [OPTIONAL] Assignment Solution)

And here I simply want to manage my active to inactive

5:53

S… Speaker 1 (118. [OPTIONAL] Assignment Solution)

counter,

5:54

S… Speaker 1 (118. [OPTIONAL] Assignment Solution)

which starts at zero.

5:55

S… Speaker 1 (118. [OPTIONAL] Assignment Solution)

And,

5:56

S… Speaker 1 (118. [OPTIONAL] Assignment Solution)

well, you guessed it,

5:57

S… Speaker 1 (118. [OPTIONAL] Assignment Solution)

inactive to active counter,

5:59

S… Speaker 1 (118. [OPTIONAL] Assignment Solution)

which also starts at zero.

6:00

S… Speaker 1 (118. [OPTIONAL] Assignment Solution)

And now I simply want to add two

6:05

S… Speaker 1 (118. [OPTIONAL] Assignment Solution)

methods where I say...

6:08

S… Speaker 1 (118. [OPTIONAL] Assignment Solution)

increment active to inactive of

6:12

S… Speaker 1 (118. [OPTIONAL] Assignment Solution)

course you can choose another name and here I will simply say active to

6:16

S… Speaker 1 (118. [OPTIONAL] Assignment Solution)

inactive counter plus plus and lock the new counter so the

6:21

S… Speaker 1 (118. [OPTIONAL] Assignment Solution)

active to inactive counter

6:23

S… Speaker 1 (118. [OPTIONAL] Assignment Solution)

And then I will just duplicate this to also have

6:27

S… Speaker 1 (118. [OPTIONAL] Assignment Solution)

my inactive to active counter where I

6:31

S… Speaker 1 (118. [OPTIONAL] Assignment Solution)

increase the inactive to active counter property and lock

6:35

S… Speaker 1 (118. [OPTIONAL] Assignment Solution)

the inactive to active counter property.

6:38

S… Speaker 1 (118. [OPTIONAL] Assignment Solution)

You probably dream about inactive to active this night.

6:41

S… Speaker 1 (118. [OPTIONAL] Assignment Solution)

But this is our counter service.

6:44

S… Speaker 1 (118. [OPTIONAL] Assignment Solution)

Now here...

6:45

S… Speaker 1 (118. [OPTIONAL] Assignment Solution)

You could add it in multiple places.

6:47

S… Speaker 1 (118. [OPTIONAL] Assignment Solution)

You could add it here in the onsetToActive or the onsetToInactive

6:52

S… Speaker 1 (118. [OPTIONAL] Assignment Solution)

method.

6:53

S… Speaker 1 (118. [OPTIONAL] Assignment Solution)

That would be all right.

6:54

S… Speaker 1 (118. [OPTIONAL] Assignment Solution)

But I want to add it here in my user service.

6:57

S… Speaker 1 (118. [OPTIONAL] Assignment Solution)

So I want to inject it into a service.

7:00

S… Speaker 1 (118. [OPTIONAL] Assignment Solution)

And for this,

7:01

S… Speaker 1 (118. [OPTIONAL] Assignment Solution)

we have to take two things into account.

7:04

S… Speaker 1 (118. [OPTIONAL] Assignment Solution)

First of all,

7:04

S… Speaker 1 (118. [OPTIONAL] Assignment Solution)

we have to make sure that we provide the counter service

7:09

S… Speaker 1 (118. [OPTIONAL] Assignment Solution)

here in the app module.

7:10

S… Speaker 1 (118. [OPTIONAL] Assignment Solution)

So counter service.

7:12

S… Speaker 1 (118. [OPTIONAL] Assignment Solution)

Make sure to add the import here too.

7:14

S… Speaker 1 (118. [OPTIONAL] Assignment Solution)

Now it's available application -wide and therefore can also

7:19

S… Speaker 1 (118. [OPTIONAL] Assignment Solution)

be injected into other services.

7:21

S… Speaker 1 (118. [OPTIONAL] Assignment Solution)

Second,

7:22

S… Speaker 1 (118. [OPTIONAL] Assignment Solution)

to inject a service into a service,

7:25

S… Speaker 1 (118. [OPTIONAL] Assignment Solution)

what would you need to do?

7:26

S… Speaker 1 (118. [OPTIONAL] Assignment Solution)

You need to add add injectable to

7:30

S… Speaker 1 (118. [OPTIONAL] Assignment Solution)

the service.

7:32

S… Speaker 1 (118. [OPTIONAL] Assignment Solution)

where you want to inject it in,

7:34

S… Speaker 1 (118. [OPTIONAL] Assignment Solution)

right?

7:34

S… Speaker 1 (118. [OPTIONAL] Assignment Solution)

So to the user's service here,

7:37

S… Speaker 1 (118. [OPTIONAL] Assignment Solution)

not to counter service,

7:38

S… Speaker 1 (118. [OPTIONAL] Assignment Solution)

to user service,

7:40

S… Speaker 1 (118. [OPTIONAL] Assignment Solution)

to the receiving service.

7:42

S… Speaker 1 (118. [OPTIONAL] Assignment Solution)

So here I will add add injectable.

7:45

S… Speaker 1 (118. [OPTIONAL] Assignment Solution)

Don't forget the parentheses,

7:47

S… Speaker 1 (118. [OPTIONAL] Assignment Solution)

that's a common mistake.

7:48

S… Speaker 1 (118. [OPTIONAL] Assignment Solution)

Add the import.

7:50

S… Speaker 1 (118. [OPTIONAL] Assignment Solution)

And with that,

7:52

S… Speaker 1 (118. [OPTIONAL] Assignment Solution)

I can now inject the counter service in the

7:56

S… Speaker 1 (118. [OPTIONAL] Assignment Solution)

user's service.

7:57

S… Speaker 1 (118. [OPTIONAL] Assignment Solution)

So here,

7:58

S… Speaker 1 (118. [OPTIONAL] Assignment Solution)

counter.

8:00

S… Speaker 1 (118. [OPTIONAL] Assignment Solution)

whoops counter service of type counter service make

8:04

S… Speaker 1 (118. [OPTIONAL] Assignment Solution)

sure to import this type here at the top two and with

8:09

S… Speaker 1 (118. [OPTIONAL] Assignment Solution)

that injected here in set to active I can call this

8:13

S… Speaker 1 (118. [OPTIONAL] Assignment Solution)

counter service and since we set something to active I want to

8:17

S… Speaker 1 (118. [OPTIONAL] Assignment Solution)

call the increment inactive to active because

8:21

S… Speaker 1 (118. [OPTIONAL] Assignment Solution)

we set something from inactive to active and on

8:26

S… Speaker 1 (118. [OPTIONAL] Assignment Solution)

the other hand in the set to inactive I want to increment the

8:31

S… Speaker 1 (118. [OPTIONAL] Assignment Solution)

Well, active to inactive.

8:34

S… Speaker 1 (118. [OPTIONAL] Assignment Solution)

So this one here.

8:35

S… Speaker 1 (118. [OPTIONAL] Assignment Solution)

With that,

8:38

S… Speaker 1 (118. [OPTIONAL] Assignment Solution)

if we now save this and let our app reload and I click to

8:42

S… Speaker 1 (118. [OPTIONAL] Assignment Solution)

set to inactive,

8:43

S… Speaker 1 (118. [OPTIONAL] Assignment Solution)

we see that is one.

8:44

S… Speaker 1 (118. [OPTIONAL] Assignment Solution)

Maybe improve the output here that we say active

8:50

S… Speaker 1 (118. [OPTIONAL] Assignment Solution)

to inactive and then we output the

8:54

S… Speaker 1 (118. [OPTIONAL] Assignment Solution)

number.

8:55

S… Speaker 1 (118. [OPTIONAL] Assignment Solution)

And on the other hand down here,

8:56

S… Speaker 1 (118. [OPTIONAL] Assignment Solution)

we have inactive

9:01

S… Speaker 1 (118. [OPTIONAL] Assignment Solution)

to active.

9:03

S… Speaker 1 (118. [OPTIONAL] Assignment Solution)

So now let's just reload.

9:06

S… Speaker 1 (118. [OPTIONAL] Assignment Solution)

active to inactive one,

9:08

S… Speaker 1 (118. [OPTIONAL] Assignment Solution)

two,

9:08

S… Speaker 1 (118. [OPTIONAL] Assignment Solution)

and now we should add four to the inactive to active side and

9:13

S… Speaker 1 (118. [OPTIONAL] Assignment Solution)

some to the active to inactive.

9:15

S… Speaker 1 (118. [OPTIONAL] Assignment Solution)

So this is working.

9:16

S… Speaker 1 (118. [OPTIONAL] Assignment Solution)

Everything seems to work as intended.

9:19

S… Speaker 1 (118. [OPTIONAL] Assignment Solution)

This is my solution.

9:20

S… Speaker 1 (118. [OPTIONAL] Assignment Solution)

Of course, you might have a different solution.

9:22

S… Speaker 1 (118. [OPTIONAL] Assignment Solution)

There are different ways of achieving the same.

9:24

S… Speaker 1 (118. [OPTIONAL] Assignment Solution)

Overall,

9:26

S… Speaker 1 (118. [OPTIONAL] Assignment Solution)

you should feel confident using services now.

9:28

S… Speaker 1 (118. [OPTIONAL] Assignment Solution)

You should see their benefits and how you might use them in your next

9:32

S… Speaker 1 (118. [OPTIONAL] Assignment Solution)

project.

9:33

S… Speaker 1 (118. [OPTIONAL] Assignment Solution)

Let's move on.

118. [OPTIONAL] Assignment Solution

Περίληψη

Ρωτήστε τον Αλ γι' αυτό το σενάριο.