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

Provide and Share Values with Angular 2 Dependency Injection

1:50 Angular 2 lesson by

TypeScript is used heavily as we build up our application, but TypeScript isn’t required. If you want to Inject a Service without using TypeScript, you’ll need to understand the @Inject decorator. The @Inject decorator also allows you to provide any value or object that you need to share throughout your application without having to create a service.

Get the Code Now
click to level up

egghead.io comment guidelines

Avatar
egghead.io

TypeScript is used heavily as we build up our application, but TypeScript isn’t required. If you want to Inject a Service without using TypeScript, you’ll need to understand the @Inject decorator.

Avatar
Owen

Just a heads up, pretty sure this one should be after the next lesson! ;-)

Avatar
Ramses

Hi, is it ok that I had to use:
import {Inject} from 'angular2/di';
instead of (as was told on the video):
import {Inject} from 'angular2/angular2';

Avatar
Zach

Do you use the colemak keyboard? I noticed you typed "arst" with is the colemak equivalent of asdf.

Avatar
John

Yup, sure do. Nice eye :) I guess it would be pretty hard to roll arst on qwerty.

In reply to Zach
Avatar
danielpoulson

I noticed that you used the public key word, in the Angular docs they use the private. What is the difference between these? I.e Does private refer to the class only and if so does public refer to the application?

Avatar
Jesse

The link to the code on github is wrong, its to a different course. For this lesson no link appears, but then when I went to lesson one it has a link to the wrong course. After browsing through John Linquist on Github I found the correct one. Please update, and place the link on each lesson page. thanks

In reply to egghead.io
Avatar
Terry

Which dependency injection is the preferred way: @Inject or loading the class in the app.components?

Now you'll notice in our providers that we provided the class MailService and then in our AppComponent we injected the MailService by the type over here. This matches with this here.

app.module.ts

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

app.component.ts

export class AppComponent {
  title = `Let's get started!`;

  constructor(private mail:MailService){ }
}

You can also do this by passing in an object, saying provide and then any value. I'm just going to say a string of mail, then say useClass:MailService.

app.module.ts

providers: [{provide:'mail', useClass:MailService}]

Then back in my AppComponent, instead of injecting by type, I can actually use and inject decorator. Make sure to import that.

app.component.ts

export class AppComponent {
  title = `Let's get started!`;

  constructor(@Inject('mail') private mail){ }
}

Then I'm going to inject mail because this string matches with this provide string that I added here. It will know to use this class of MailService. When I switch back to my component, now we can actually delete this line where I import the class, and I no longer have a reference to it. It's just going to know to grab this as a class off the providers, create the instance, and then use it just as we did before. If I hit save, you'll see the exact same result over in the browser when it refreshes.

Providing with these objects is also very useful if I need to provide something like an API. I'll say Object provide: 'api'. Now I can say useValue: 'http//localhost:3000/' or wherever it would be.

app.module.ts

providers: [
  {provide:'mail', useClass:MailService},
  {provide: 'api', useValue: 'http://localhost:3000/'}
  ],

Now we can inject this API where I use the same syntax. Now I inject api. I'll call this api, and then I'll just go ahead and show {{api}} on the page with a simple break between these two values. I'll hit save.

app.component.ts

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

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

{{mail.message}}
<hr>
{{api}}

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

  constructor(
    @Inject('mail') private mail,
    @Inject('api') private api,
    ){ }
}

You can see we can now use this api string, this value, throughout our application and keep it consistent just by injecting this string which matches the key in our injector because we provided it here.

Output

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