[et_pb_section fb_built=”1″ _builder_version=”4.19.5″ _module_preset=”default” hover_enabled=”0″ global_colors_info=”{}” theme_builder_area=”post_content” custom_margin=”0px||0px||true|false” custom_padding=”0px||0px||true|false” sticky_enabled=”0″][et_pb_row _builder_version=”4.19.5″ _module_preset=”default” hover_enabled=”0″ global_colors_info=”{}” theme_builder_area=”post_content” width=”100%” sticky_enabled=”0″ module_class=”content”][et_pb_column type=”4_4″ _builder_version=”4.19.5″ _module_preset=”default” global_colors_info=”{}” theme_builder_area=”post_content”][et_pb_text content_tablet=”
What is Angular Service?
In simple terms, Angular Service is an object which we can use on multiple places to share a common need, for example, lets we have ten different angular components and we need a logging feature on all/most of them.
The common approach would be adding a method in each component class and using it. This solution will work but this is not an optimized solution.
The other approach could be creating a class and a common method and using its object for the places we need. This is an Angular service.
Why do we need Angular Service?
Now you understood what is angular service. let’s discuss why we need that. you might have already in mind that Angular Services promotes code reusability so it is helpful to developers to easy to implement a common feature and use it in multiple places. On the other side, this helps to find and fix the problems easily as you don’t need to go to all different components and update the code there to fix a problem.
How to create Angular Service?
let’s say you want to log some information to the console from multiple components. This is a perfect candidate to be coded as a service. Let’s take “LoggingService“ as a name for that service.
To create a service name “LoggingService“ you need to go to your application path and run the below command using the terminal/command prompt.
Shape
Press Enter and you will see the similar output as below (ignore the warnings, its related to my environment)
Shape
There are two files generated using the above command, the spec.ts is for testing, so let’s leave it for now. The “logger.service.ts“ is the actual service file.
Let’s see what is inside the file.
The above is the default code generated by Angular. Let’s implement a method that can log a given message on the console.
” content_phone=”
What is Angular Service?
In simple terms, Angular Service is an object which we can use on multiple places to share a common need, for example, lets we have ten different angular components and we need a logging feature on all/most of them.
The common approach would be adding a method in each component class and using it. This solution will work but this is not an optimized solution.
The other approach could be creating a class and a common method and using its object for the places we need. This is an Angular service.
Why do we need Angular Service?
Now you understood what is angular service. let’s discuss why we need that. you might have already in mind that Angular Services promotes code reusability so it is helpful to developers to easy to implement a common feature and use it in multiple places. On the other side, this helps to find and fix the problems easily as you don’t need to go to all different components and update the code there to fix a problem.
How to create Angular Service?
let’s say you want to log some information to the console from multiple components. This is a perfect candidate to be coded as a service. Let’s take “LoggingService“ as a name for that service.
To create a service name “LoggingService“ you need to go to your application path and run the below command using the terminal/command prompt.
Shape
Press Enter and you will see the similar output as below (ignore the warnings, its related to my environment)
Shape
There are two files generated using the above command, the spec.ts is for testing, so let’s leave it for now. The “logger.service.ts“ is the actual service file.
Let’s see what is inside the file.
The above is the default code generated by Angular. Let’s implement a method that can log a given message on the console.
” content_last_edited=”on|desktop” _builder_version=”4.19.5″ _module_preset=”default” global_colors_info=”{}” theme_builder_area=”post_content”]
What is Angular Service?
In simple terms, Angular Service is an object which we can use on multiple places to share a common need, for example, lets we have ten different angular components and we need a logging feature on all/most of them.
The common approach would be adding a method in each component class and using it. This solution will work but this is not an optimized solution.
The other approach could be creating a class and a common method and using its object for the places we need. This is an Angular service.
Why do we need Angular Service?
Now you understood what is angular service. let’s discuss why we need that. you might have already in mind that Angular Services promotes code reusability so it is helpful to developers to easy to implement a common feature and use it in multiple places. On the other side, this helps to find and fix the problems easily as you don’t need to go to all different components and update the code there to fix a problem.
How to create Angular Service?
let’s say you want to log some information to the console from multiple components. This is a perfect candidate to be coded as a service. Let’s take “LoggingService“ as a name for that service.
To create a service name “LoggingService“ you need to go to your application path and run the below command using the terminal/command prompt.
[/et_pb_text][et_pb_image src=”https://www.elastikteams.com/wp-content/uploads/2023/02/Service-Create-Comand-CLI-Comand.png” title_text=”Service Create Comand CLI Comand” _builder_version=”4.19.5″ _module_preset=”default” global_colors_info=”{}” theme_builder_area=”post_content”][/et_pb_image][et_pb_text _builder_version=”4.19.5″ _module_preset=”default” global_colors_info=”{}” theme_builder_area=”post_content”]Press Enter and you will see the similar output as below (ignore the warnings, its related to my environment) [/et_pb_text][et_pb_image src=”https://www.elastikteams.com/wp-content/uploads/2023/02/Service-Create-CLI-Output.png” title_text=”Service Create CLI Output” _builder_version=”4.19.5″ _module_preset=”default” global_colors_info=”{}” theme_builder_area=”post_content”][/et_pb_image][et_pb_text _builder_version=”4.19.5″ _module_preset=”default” global_colors_info=”{}” theme_builder_area=”post_content”]
There are two files generated using the above command, the spec.ts is for testing, so let’s leave it for now. The “logger.service.ts“ is the actual service file.
Let’s see what is inside the file.
[/et_pb_text][et_pb_text _builder_version=”4.19.5″ _module_preset=”default” background_color=”#f4f4f4″ custom_padding=”10px|10px|10px|10px|true|true” global_colors_info=”{}” theme_builder_area=”post_content”]
import { Injectable } from '@angular/core';
@Injectable({
providedIn: 'root'
})
export class LoggerService {
constructor() { }
}
[/et_pb_text][et_pb_text _builder_version=”4.19.5″ _module_preset=”default” global_colors_info=”{}” theme_builder_area=”post_content”]The above is the default code generated by Angular. Let’s implement a method that can log a given message on the console.[/et_pb_text][et_pb_image src=”https://www.elastikteams.com/wp-content/uploads/2023/02/Angular-Code-Snippets.png” title_text=”Angular Code Snippets” _builder_version=”4.19.5″ _module_preset=”default” global_colors_info=”{}” theme_builder_area=”post_content”][/et_pb_image][et_pb_text _builder_version=”4.19.5″ _module_preset=”default” hover_enabled=”0″ global_colors_info=”{}” theme_builder_area=”post_content” sticky_enabled=”0″]
The above is highlighted method which we have added for logging on console for a given message.
[/et_pb_text][et_pb_text _builder_version=”4.19.5″ _module_preset=”default” global_colors_info=”{}” theme_builder_area=”post_content”]You must have noticed that the angular service code is just a simple class with a “@Injectable“ decorator. This decorator help us to inject the service to components and also to another service. i,e, it helps in dependency injection using Angular framework.
Let’s see how? [/et_pb_text][et_pb_text _builder_version=”4.19.5″ _module_preset=”default” global_colors_info=”{}” theme_builder_area=”post_content”]
How to use Angular Service?
To use Angular service you just created follow below steps.
Let’s say you have an “example“ component and you want to log a message on console when a button clicks for that component. You don’t have a component , don’t worry, create it as below.
[/et_pb_text][et_pb_image src=”https://www.elastikteams.com/wp-content/uploads/2023/02/Angular-Code-Example.png” title_text=”Angular Code Example” _builder_version=”4.19.5″ _module_preset=”default” global_colors_info=”{}” theme_builder_area=”post_content”][/et_pb_image][et_pb_text admin_label=”texts” _builder_version=”4.19.5″ _module_preset=”default” global_colors_info=”{}” theme_builder_area=”post_content”]
update “example.component.html“ file as below.
[/et_pb_text][et_pb_image src=”https://www.elastikteams.com/wp-content/uploads/2023/02/example-component.png” alt=”update “example.component.html“ file as below.” title_text=”example-component” _builder_version=”4.19.5″ _module_preset=”default” global_colors_info=”{}” theme_builder_area=”post_content”][/et_pb_image][et_pb_text admin_label=”texts” _builder_version=”4.19.5″ _module_preset=”default” global_colors_info=”{}” theme_builder_area=”post_content”]
Update “example.component.ts“ file as below.
[/et_pb_text][et_pb_image src=”https://www.elastikteams.com/wp-content/uploads/2023/02/example.comepntnt-file-Snippet.png” title_text=”example.comepntnt file Snippet” _builder_version=”4.19.5″ _module_preset=”default” global_colors_info=”{}” theme_builder_area=”post_content”][/et_pb_image][et_pb_text _builder_version=”4.19.5″ _module_preset=”default” global_colors_info=”{}” theme_builder_area=”post_content”]Update the “app.component.html“ file to use the example component.[/et_pb_text][et_pb_image src=”https://www.elastikteams.com/wp-content/uploads/2023/02/Updated-example.comepntnt-file-Snippet.png” title_text=”Updated example.comepntnt file Snippet” _builder_version=”4.19.5″ _module_preset=”default” global_colors_info=”{}” theme_builder_area=”post_content”][/et_pb_image][et_pb_text _builder_version=”4.19.5″ _module_preset=”default” global_colors_info=”{}” theme_builder_area=”post_content”]run the application using “ng serve“ you should see your example component loaded similar to below.[/et_pb_text][et_pb_image src=”https://www.elastikteams.com/wp-content/uploads/2023/02/Localhost-Window-Screenshot.png” title_text=”Localhost Window Screenshot” _builder_version=”4.19.5″ _module_preset=”default” global_colors_info=”{}” theme_builder_area=”post_content”][/et_pb_image][et_pb_text _builder_version=”4.19.5″ _module_preset=”default” global_colors_info=”{}” theme_builder_area=”post_content”]now add the Service class to app.module.ts as highlighted below.[/et_pb_text][et_pb_image src=”https://www.elastikteams.com/wp-content/uploads/2023/02/app.module-File-Snippet.png” title_text=”app.module File Snippet” _builder_version=”4.19.5″ _module_preset=”default” global_colors_info=”{}” theme_builder_area=”post_content”][/et_pb_image][et_pb_text _builder_version=”4.19.5″ _module_preset=”default” global_colors_info=”{}” theme_builder_area=”post_content”]update the example component code to use the Logger Service as below[/et_pb_text][et_pb_image src=”https://www.elastikteams.com/wp-content/uploads/2023/02/Example-Compenent-Snippet.png” title_text=”Example Compenent Snippet” _builder_version=”4.19.5″ _module_preset=”default” global_colors_info=”{}” theme_builder_area=”post_content”][/et_pb_image][et_pb_text _builder_version=”4.19.5″ _module_preset=”default” global_colors_info=”{}” theme_builder_area=”post_content”]
You may noticed that we are not doing “new“ object here for logger service but Angular is doing dependency injection and will giving us the LoggerService object.
Lets run the project and click on the button.
[/et_pb_text][et_pb_image src=”https://www.elastikteams.com/wp-content/uploads/2023/02/Cosnole-Window-Screenshot.png” title_text=”Cosnole Window Screenshot” _builder_version=”4.19.5″ _module_preset=”default” global_colors_info=”{}” theme_builder_area=”post_content”][/et_pb_image][et_pb_text _builder_version=”4.19.5″ _module_preset=”default” global_colors_info=”{}” theme_builder_area=”post_content”]you should see similar output on the console which you are getting by calling an angular Service and using Angular dependency injection.[/et_pb_text][/et_pb_column][/et_pb_row][/et_pb_section]
