[Angular 2] Using the @Inject decorator

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.

 

main.ts:

import {Component, provide} from 'angular2/core';
import {bootstrap} from 'angular2/bootstrap';
import {TodoService} from './TodoService';
import {TodoInput} from './TodoInput';

@Component({
    selector: 'app',
    directives: [TodoInput],
    template: `
        <todo-input></todo-input>
    `
})

class App {
    
}

// []: we can inject service which can be used for the whole app
// use provide to inject service, when you don't want to use TypeScript
bootstrap(App, [
   provide('whatever', {useClass: TodoService})
]);

 

TodoInput.ts:

import {Component, Inject} from 'angular2/core';
import {TodoService} from './TodoService';

@Component({
    selector: 'todo-input',
    template: `
        <div>
            <input #myInput type="text">
            <button (click)="onClick(myInput.value)">Click me</button>
        </div>
    `
})

export class TodoInput{

    // If you don't want to use TypeScript
    constructor(@Inject('whatever') public todoService){

    }

    onClick(todo: string){
       this.todoService.todos.push(todo);
        console.log(this.todoService.todos);
    }
}

 

TodoService.ts:

import {Injectable} from 'angular2/core';
@Injectable()  // If you don't want to use TypeScript
export class TodoService{
    todos = [];
}