109. Creating a Logging Service

Jul 15, 2026 04:40 · 3:32 · English · Whisper Turbo · 2 Speakers

Henda útgávan er útgivin í dag. Uppgradering til permanent lagring →

Lærarabókin

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.

This transcript was generated by AI (automatic speech recognition). May contain errors - check against the original audio for critical use. Politikkur

❤️ Love STT.ai? Tell your friends!

Samandráttur

Click Summarize to generate an AI summary of this transcript.

Spørg AI um hetta transkriptión

Tað er ein spurningur um, hvussu nógvar ferðir ein kann skriva og lesa.

Transcribe otro