109. Creating a Logging Service

Jul 15, 2026 04:40 · 3:32 · English · Whisper Turbo · 2 ተናጋሪ

ይህ ትረካ ዛሬ ይቋረጣል ለዘለቄታው ማስቀመጫ ማሻሻል →

የጽሑፍ መደርደሪያ

0:02

S… Speaker 1 (109. Creating a Logging Service)

As mentioned at the end of the last lecture,

0:04

S… Speaker 1 (109. Creating a Logging Service)

I want to start by building our first service here,

0:07

S… Speaker 1 (109. Creating a Logging Service)

a service which takes over this logging task here.

0:11

S… Speaker 1 (109. Creating a Logging Service)

So a service where we can log data.

0:13

S… Speaker 2 (109. Creating a Logging Service)

Now,

0:14

S… Speaker 1 (109. Creating a Logging Service)

how do we create a new service?

0:15

S… Speaker 1 (109. Creating a Logging Service)

How does a service look like in Angular?

0:17

S… Speaker 1 (109. Creating a Logging Service)

Creating it is super simple.

0:19

S… Speaker 1 (109. Creating a Logging Service)

First,

0:20

S… Speaker 1 (109. Creating a Logging Service)

we have to choose a fitting place.

0:21

S… Speaker 1 (109. Creating a Logging Service)

Now, since this service will do some generic task,

0:24

S… Speaker 1 (109. Creating a Logging Service)

I will place it in the app folder.

0:26

S… Speaker 1 (109. Creating a Logging Service)

You could also create a shared subfolder there.

0:29

S… Speaker 1 (109. Creating a Logging Service)

I will again place it right in the...

0:31

S… Speaker 1 (109. Creating a Logging Service)

app main folder and i will simply name it logging and

0:36

S… Speaker 1 (109. Creating a Logging Service)

the file name should be logging .service .ts to follow this convention

0:40

S… Speaker 1 (109. Creating a Logging Service)

of being pretty clear about what's in a file so here this

0:44

S… Speaker 1 (109. Creating a Logging Service)

file will hold a service so that's why i'll name it like this there i will

0:48

S… Speaker 1 (109. Creating a Logging Service)

export a typescript class and i will name this class logging service

0:53

S… Speaker 1 (109. Creating a Logging Service)

2 again to be explicit about what this class does

0:56

S… Speaker 2 (109. Creating a Logging Service)

Now,

0:57

S… Speaker 1 (109. Creating a Logging Service)

a component becomes a component because we attach this at

1:01

S… Speaker 1 (109. Creating a Logging Service)

component decorator.

1:03

S… Speaker 1 (109. Creating a Logging Service)

A directive becomes a directive because we attach at directive.

1:06

S… Speaker 1 (109. Creating a Logging Service)

You could think that we now simply add at service,

1:10

S… Speaker 1 (109. Creating a Logging Service)

right?

1:11

S… Speaker 1 (109. Creating a Logging Service)

but we don't do that a service is just a normal typescript class

1:15

S… Speaker 1 (109. Creating a Logging Service)

like this this can already be used as a service so here

1:19

S… Speaker 1 (109. Creating a Logging Service)

we could create a helper method log to console and

1:23

S… Speaker 1 (109. Creating a Logging Service)

simply pass the message but since we know that we simply

1:27

S… Speaker 1 (109. Creating a Logging Service)

want to log the change of account status here

1:32

S… Speaker 1 (109. Creating a Logging Service)

i will simply say log status change

1:36

S… Speaker 1 (109. Creating a Logging Service)

like this and take the new status which will be a string

1:40

S… Speaker 1 (109. Creating a Logging Service)

as an argument.

1:41

S… Speaker 1 (109. Creating a Logging Service)

Here I can then simply copy the code I do

1:45

S… Speaker 1 (109. Creating a Logging Service)

have in one of my components right now,

1:47

S… Speaker 1 (109. Creating a Logging Service)

this console .log code here,

1:49

S… Speaker 1 (109. Creating a Logging Service)

and copy it into my logging service here.

1:53

S… Speaker 1 (109. Creating a Logging Service)

Of course,

1:54

S… Speaker 1 (109. Creating a Logging Service)

account status now is just status here,

1:57

S… Speaker 1 (109. Creating a Logging Service)

this argument we're getting.

1:59

S… Speaker 1 (109. Creating a Logging Service)

So with that,

2:00

S… Speaker 1 (109. Creating a Logging Service)

remove the colon,

2:01

S… Speaker 1 (109. Creating a Logging Service)

semicolon.

2:01

S… Speaker 1 (109. Creating a Logging Service)

With that,

2:02

S… Speaker 1 (109. Creating a Logging Service)

I centralized this code.

2:04

S… Speaker 1 (109. Creating a Logging Service)

Now we need to use this service in our other components.

2:09

S… Speaker 1 (109. Creating a Logging Service)

So everywhere where we console log.

2:11

S… Speaker 1 (109. Creating a Logging Service)

Now you could think that we simply use it by importing

2:16

S… Speaker 1 (109. Creating a Logging Service)

it at the top of our file.

2:17

S… Speaker 1 (109. Creating a Logging Service)

So here we could import the logging service.

2:21

S… Speaker 1 (109. Creating a Logging Service)

from and now let's move up to the main folder and then

2:25

S… Speaker 1 (109. Creating a Logging Service)

here from the logging service TS file and then we could simply create

2:29

S… Speaker 1 (109. Creating a Logging Service)

our service like this new logging service and

2:34

S… Speaker 1 (109. Creating a Logging Service)

on our service here we could call log status change and pass

2:38

S… Speaker 1 (109. Creating a Logging Service)

the new account status and actually if I

2:42

S… Speaker 1 (109. Creating a Logging Service)

get rid of this code here this

2:47

S… Speaker 1 (109. Creating a Logging Service)

will work let it recompile and if I

2:51

S… Speaker 1 (109. Creating a Logging Service)

now create a new

2:53

S… Speaker 1 (109. Creating a Logging Service)

service here you see I do log it to the console so this

2:57

S… Speaker 1 (109. Creating a Logging Service)

would work and still this is wrong this is not and this is super important

3:01

S… Speaker 1 (109. Creating a Logging Service)

this is not how you use a service in angular the

3:05

S… Speaker 1 (109. Creating a Logging Service)

reason for this will become more clearer throughout this module but generally angular

3:10

S… Speaker 1 (109. Creating a Logging Service)

provides a much better way of getting access to your services

3:14

S… Speaker 1 (109. Creating a Logging Service)

and therefore you should not create the instances

3:18

S… Speaker 1 (109. Creating a Logging Service)

manually.

3:19

S… Speaker 1 (109. Creating a Logging Service)

So let's get rid of the import and of that instantiation.

3:22

S… Speaker 1 (109. Creating a Logging Service)

And let's learn in the next video,

3:24

S… Speaker 1 (109. Creating a Logging Service)

which tool Angular offers us to get access

3:28

S… Speaker 1 (109. Creating a Logging Service)

to our services.

ይህ ትርክት በ AI (አቶማቲክ የንግግር ማወቅ) የተፈጠረ ነው. ስህተቶች ሊኖሩ ይችላሉ - ለጥብቅ ጥቅም በመጀመሪያው ድምፅ ላይ ይመልከቱ የAI ፖሊሲ

❤️ STT.aiን ወዳጅነት? ጓደኞችዎን ንገሩ!

ማጠቃለያ

የዚህን ትራንስክሪፕት AI ማጠቃለያ ለማምጣት ማጠቃለያ ላይ ጠቅ ያድርጉ

ስለዚህ ትራንስክሪፕት AI ጠይቅ

ስለዚህ ጽሑፍ ማንኛውንም ነገር ጠይቁ - AI የሚመለከታቸውን ክፍሎች ያገኛል እናም መልስ ይሰጣል.

ሌላን ላክ