Enter Your Email Address to Watch This Lesson

Your link to unlock this lesson will be sent to this email address.

Unlock this lesson and all 986 of the free egghead.io lessons, plus get Angular 2 content delivered directly to your inbox!



Existing egghead members will not see this. Sign in.

Share Services and Data with Angular 2 Dependency Injection

1:22 Angular 2 lesson by

The Angular CLI generates Services using a simple command. After your Service is generated, you can easily provide and share it to the rest of your application using Angular 2's Dependency Injection. This lesson walks through creating a Service with the Angular CLI then providing it to your application module.

Get the Code Now
click to level up

egghead.io comment guidelines

Avatar
egghead.io

Using Services in Angular 2 is very simple. This lesson covers how to create a simple class as a Service then set it up so that you can use it across all your Components.

Avatar
Oleksandr

This video should go after 'Inject a service' in the playlist.

In reply to egghead.io
Avatar
Oleksandr

Whoops, I meant 'Using the @Inject decorator' should go after this one.

In reply to Oleksandr
Avatar
sebastian

hi, what editor or ide ar you using, i saw you got helped on the import statement for @injectable

In reply to egghead.io
Avatar
cube5

I think its WebStorm

In reply to sebastian
Avatar
leaf

I'm getting an error "main.ts:12Uncaught Error: Module build failed: Error:..." after editing 'providers: [MailService],' at app.module.ts, and it didn't automatically imported for me. How can I fix it ?

Avatar
Cekootje

How comes that when generating a service, ng puts the files right in the app root folder? And creating a component showed that it gets generated inside its own folder. Are there guiding lines for this that ng is following?

Avatar
vtechmonkey

message needs a type of string in mail.service or you get a type error.
message : string =You've got mail!;

Avatar
Javril Bavogui

Not working

In reply to vtechmonkey

Use the Angular CLI to generate a service. Service can just be with s or the full word service. Then the name of the service. I'll call mine mail. Hit enter and you'll see it generates two files, our mail.service and the spec for that, and the warning that it's not provided.

angular cli

Let's go ahead and provide it. Do that in your app.module.ts. In providers we'll say MailService, and I'm going to let WebStorm automatically import this for me. You'll see it's added up here.

app.module.ts

import { MailService } from './mail.service'

@NgModule({
  declarations: [
    AppComponent,
    SimpleFormComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule
  ],
  providers: [MailService],
  bootstrap: [AppComponent]
})
export class AppModule { }

Now that it's provided in this app.module.ts, if you go to your app.component.ts, you can inject it in the constructor of your AppComponent. I'm going to say private mail:MailService, and I'll inject that again. Make sure your import is pointing to the proper service, so importing mail from mail.service.

app.component.ts

import { MailService } from './mail.service'

@Component({
  selector: 'app-root',
  template: `<div>

<app-simple-form></app-simple-form>

</div>`
})
export class AppComponent {
  title = `Let's get started!`;

  constructor(private mail:MailService){}
}

Now whatever I put on mail.service.ts...If I navigate back to it, and say that I have a message and the message is, You've got mail!.

mail.service.ts

import { Injectable } from '@angular/core';

@Injectable()
export class MailService {

  message = `You've got mail!`;

  constructor() { }
}

Then hop back over to your component. Underneath my simple form I can say mail -- which is my service -- .message.

app.component.ts

@Component({
  selector: 'app-root',
  template: `<div>

<app-simple-form></app-simple-form>

{{mail.message}}

</div>`
})

Hit save and then this will refresh and you'll see the message, You've got mail underneath my simple form, the simple form with You've got mail underneath it.

You've got mail

HEY, QUICK QUESTION!
Joel's Head
Why are we asking?