Geek Culture
Published in

Geek Culture

Angular Basics-5

Photo by XPS on Unsplash

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.

localhost

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.ts

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

app.component.html

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

app.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.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.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.ts

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

new-account.component.ts

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

New server

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

app.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.ts

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

account.component.ts

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

new-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.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.ts

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

account.component.ts

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

new-account.component.ts

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

localhost

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

--

--

--

A new tech publication by Start it up (https://medium.com/swlh).

Recommended from Medium

The dev.to project with GatsbyJS-4

Be a better front-end Developer

Designing a WebSocket Server in Golang | Reformers Golang Implementation Strategy

React-Redux: How to Confuse an Object-Oriented Programmer

11 HTML One-Liners That Are Insanely Useful

Server-side pagination and filtering with Angular 6

Simplify your asynchronous Redux Actions

JavaScript: Altering content based on the date

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Nabendu Biswas

Nabendu Biswas

Founder TWD, JavaScript & ReactJS Trainer, Youtuber, Blogger

More from Medium

Directives In Angular

Compile Angular Application

Getting Started with Pipes in Angular

Disable button after a click in angular using directive