Services In Angular2
Posted By : Anchal Gaur | 24-Apr-2018
Service in Angular2 is just a javascript function, along with the properties and methods that can be included in Angular2 component via
There are two methods or ways to create angular2 service file. one is to create manually and other is using angular command line interface.
There are several steps to create the
Step 1. Create the Service File:- In the code editor, create a file with the name convention
Syntax: name.service.ts
In this syntax, "name" can be any name which is relevant to our service.
Step 2. Import the Injectable Member:-
At the top of service file, we used
import { Injectable } from '@angular/core';
Step 3. Add Injectable Decorator:-
In this pace, we need to import the injectable member from a library, after that injectable() decorator function is added.
Syntax:
@Injectable()
Step4. Export the Service Class:-
And finally, this export class AuthenticationService {
// This is where main methods and properties works, for example:
someMethod() {
return 'Hello!';
}
}
Second Way
Creating the Service with the Angular-CLI
ng
Importing the Service to Component
we can import the service
1. Step the service in the App component.
import { Component } from '@angular/core';
import { ExampleService } from './example.service';
2. Add it as a Provider
@Component({
selector: 'my-app',
template: '<h1>{{ title }}</h1>',
providers: [ExampleService]
})
3. Include it using Dependency Injection
In the
constructor(private _authenticationService: AuthenticationService) {
}
4. Using the service
we can access the service methods and properties by referencing the private_authenticationService
ngOnInit() {
this.title = this._authenticationService.someMethod();
}
here is a full code of service file
authentication.service.ts
import { Injectable } from '@angular/core';
@Injectable()
export class AuthenticationService{
someMethod() {
return 'Hey!';
}
}
app.component.ts
import { Component } from '@angular/core';
import { ExampleService } from './example.service';
@Component({
selector: 'my-app',
template: '<h1>{{ title }}</h1>',
providers: [ExampleService]
})
export class AppComponent {
title: string;
constructor(private _exampleService: ExampleService) {
}
ngOnInit() {
this.title = this._exampleService.someMethod();
}
}
Including the service in app.module.ts
// other imports in app.module.ts
import { AuthenticationService} from './authentcation.service';
@NgModule({
//other metadata properties
providers: [AuthenticationService]
})
Cookies are important to the proper functioning of a site. To improve your experience, we use cookies to remember log-in details and provide secure log-in, collect statistics to optimize site functionality, and deliver content tailored to your interests. Click Agree and Proceed to accept cookies and go directly to the site or click on View Cookie Settings to see detailed descriptions of the types of cookies and choose whether to accept certain cookies while on the site.
About Author
Anchal Gaur
Anchal has a good knowledge of HTML,CSS and Javascript. She is working here as a UI Developer. Her hobbies are travelling and to read novels in free time.