Welcome to the fifth part of Angular Basics. We will deep dive into services and dependency Injection in this part.

The service in Angular works as a central repository which can be accessed from any component. The starting point of the project can be taken from this zip file.

Our small app have three small components and we pass data around for logging and other things.

Basic App

We will create a logging service first. So, create a file logging.service.ts inside the app folder. We will put the below content in it.

logging.service.ts

Now, we will use this logging service in our new-account.component.ts file. Here, we have to use it in providers and then in the constructor with type definition.

new-account.component.ts

Now, we will also add the logging service in account.component.ts file

account.component.ts

Now, when you check in the app both of them are working fine.

localhostlocalhost

Now, we will look into another user case of service i.e. store and manage data. We will create a service accounts.service.ts which will contain our accounts detail, which is currently in app.component.ts file.

It will contain the accounts array and also, an addAccount and updateStatus function.

accounts.service.tsaccounts.service.ts

After that remove the accountAdded and statusChanged functions from app.component.html file.

app.component.htmlapp.component.html

Now, in app.component.ts file we will remove the array and the function and call our Account service

app.component.tsapp.component.ts

Now, in the new-account.component.ts file, we can get rid of the emitted name and status.

Instead of that we are adding accounts service in it.

new-account.component.tsnew-account.component.ts

Now, we will make the same changes in account.component.ts file, where we are adding the Account service and remove the old emitted service.

account.component.tsaccount.component.ts

Now, we will not get any error, but our code is broken and in localhost we are not able to add any server.

We are actually having many different instances of the same service. So, we will keep only the one in the parent component of app.component.ts file.

We will first remove it from account.component.ts file.

account.component.tsaccount.component.ts

And we will also remove it from new-account.component.ts file.

new-account.component.tsnew-account.component.ts

Now, we are again able to add a new server.

New serverNew server

Infact, we should remove the service from app.component.ts file also.

app.component.tsapp.component.ts

We will be adding it in the highest possible place, which is the app.module.ts file.

We will also learn to inject one service into another, so we will also be adding the logging service in app.module.ts file

app.module.tsapp.module.ts

Next, we will remove the logging service from account.component.ts file.

account.component.tsaccount.component.ts

We are also removing the logging service from new-account.component.ts file.

new-account.component.tsnew-account.component.ts

Now, we will add the logging service in accounts.service.ts file. We also have to make it Injectable, as we adding adding a service to another service.

accounts.service.tsaccounts.service.ts

Now, we will learn to do cross-component communication using services. In account service we want to provide an event which we can emit from a component and catch in other component.

So, in accounts.service.ts file we will have an EventEmitter.

accounts.service.tsaccounts.service.ts

Now, we will first emit the event from account.component.ts file.

account.component.tsaccount.component.ts

Now, we will catch the event in new-account.component.ts file by subscribing to it.

new-account.component.tsnew-account.component.ts

Now, we are able to communicate between components and the alert is shown on localhost.

localhostlocalhost

This completes our post and you can find the final code in this github repo