How to write angular services in angular 4 ?

Recently I was working on this angular project when I got stuck to a place – angular services. I wanted to use global variables and functions but had no clue how do i achieve it. After lot of research and going through angular docs i finally ended up to a solution of services.

Angular Services is nothing but an inject-able piece of code that every component can call and use. We will follow the steps to achieve it:

STEP 1

In your command line write:

ng generate service service-name

(service-name will be name of your service) now you will see two files added to your app folder.

STEP 2

Open the file service-name.service.ts and write the following code:
import { Injectable} from '@angular/core';
import { Http, Response, RequestOptions, Headers } from '@angular/http'; // For http calls if any else you can remove this line.

@Injectable()
export class PortfolioService {

headers = new Headers();
options;
api_url = '';
site_url = '';
skin = '';

constructor(private http:Http) {

this.http.get('assets/config.json').subscribe(data => {
this.skin = data.json().skin;
this.renderer.addClass(document.body, this.skin);
});

}

getapiurl(){
this.http.get('assets/config.json').subscribe(data => {
this.api_url = data.json().api_url;
console.log(this.api_url);
});
return this.api_url;
}

getsiteurl(){
this.http.get('assets/config.json').subscribe(data => {
this.site_url = data.json().site_url;
console.log(this.site_url);
});
return this.site_url;
}

}

Here in our example we are fetching the values for api_url , site_url and skin from config.json file using http request.
the function getapiurl() has a return statement in the end which returns the value of the variable api_url

STEP 3

Open your component file and add following code at respective places.

Starting with imports:
import { ServiceNameService } from '../service-name.service';

In your @component add this:
providers: [ServiceNameService]

In your constructor add this to the parameter:
private service: ServiceNameService
Like this
constructor(private service: ServiceNameService )

Now comes the important part of calling the function that we created in the service file.
We have declared a private variable service in our constructor using which we will call our functions.

this.service.getapiurl()

The above code will give the output as the value of the variable we returned in service.
Thats it!
Now you can use the same function as many times we want and in every component we like.
For any queries leave a comment or you can contact me on the given details in the sidebar.

Enjoy! Happy Coding.

Previous

How to add custom post type to wordpress?

Next

10 Best Free Fonts For Websites

7 Comments

  1. you are actually a excellent webmaster. The web site loading pace is amazing.
    It seems that you are doing any distinctive trick. In addition, The contents are masterpiece.

    you have done a magnificent job in this subject!

  2. It is appropriate time to make a few plans for the longer term and it is time to
    be happy. I’ve learn this submit and if I may just I want to
    recommend you few interesting things or tips.

    Maybe you can write subsequent articles referring to this article.
    I want to learn more things approximately it!

  3. An impressive share! I’ve just forwarded this onto
    a colleague who was conducting a little homework on this.
    And he in fact ordered me dinner because I found it
    for him… lol. So allow me to reword this….
    Thank YOU for the meal!! But yeah, thanx for spending the time to discuss this matter here on your site.

  4. fts 19 apk data

    I do not know if it’s just me or if perhaps everyone else encountering problems with your website.
    It looks like some of the text on your content are running off the screen. Can somebody
    else please comment and let me know if this is happening to
    them as well? This may be a problem with my internet browser because I’ve had this happen previously.
    Thanks

    • Harsh

      Hello, Website content seems to be ok. Checked on all devices and browser.

      Thanks.

  5. Hi there! Do you know if they make any plugins to help
    with SEO? I’m trying to get my blog to rank for some targeted keywords but I’m not
    seeing very good results. If you know of any please share.

    Thanks!

  6. I every time spent my half an hour to read this webpage’s
    content everyday along with a cup of coffee.

Comments are closed.

Powered by DisenoBox