import {View, Component, OnInit} from 'angular2/core';
import {ROUTER_DIRECTIVES} from 'angular2/router';

import {MATERIAL_DIRECTIVES, MATERIAL_PROVIDERS} from 'ng2-material/all';

import {EventsService} from './events.service';
import {Event} from './event';


@Component({
    selector: 'events-list',
    templateUrl: '/static/templates/events-list.html',
    directives: [ROUTER_DIRECTIVES, MATERIAL_DIRECTIVES],
    providers: [
        EventsService,
        MATERIAL_PROVIDERS
    ]
})

export class EventsListComponent implements OnInit {
    constructor(private _eventsService: EventsService) {}

    errorMessage: string;
    events: Event[];

    ngOnInit() {
        this.getEvents();
    }

    getEvents() {
        this._eventsService.getEvents()
            .then(
                events => this.events = events,
                error => this.errorMessage = <any>error);
    }
}

import {View, Component, OnInit, provide} from 'angular2/core';
import {ROUTER_DIRECTIVES} from 'angular2/router';

import {MATERIAL_DIRECTIVES} from 'ng2-material/all';

import {EventsService} from './events.service';
import {Event} from './event';


@Component({
    selector: 'events-list',
    templateUrl: '/static/templates/events-list.html',
    directives: [ROUTER_DIRECTIVES],
    providers: [
        EventsService,
        MATERIAL_DIRECTIVES
    ]
})

export class EventsListComponent implements OnInit {
    constructor(private _eventsService: EventsService) {}

    errorMessage: string;
    events: Event[];

    ngOnInit() {
        // TODO: connect to the service
        this.getEvents();
    }

    getEvents() {
    this._eventsService.getEvents()
        .then(
            events => this.events = events,
            error => this.errorMessage = <any>error);
    }
}

--- 
+++ 
@@ -1,7 +1,7 @@
-import {View, Component, OnInit, provide} from 'angular2/core';
+import {View, Component, OnInit} from 'angular2/core';
 import {ROUTER_DIRECTIVES} from 'angular2/router';
 
-import {MATERIAL_DIRECTIVES} from 'ng2-material/all';
+import {MATERIAL_DIRECTIVES, MATERIAL_PROVIDERS} from 'ng2-material/all';
 
 import {EventsService} from './events.service';
 import {Event} from './event';
@@ -10,10 +10,10 @@
 @Component({
     selector: 'events-list',
     templateUrl: '/static/templates/events-list.html',
-    directives: [ROUTER_DIRECTIVES],
+    directives: [ROUTER_DIRECTIVES, MATERIAL_DIRECTIVES],
     providers: [
         EventsService,
-        MATERIAL_DIRECTIVES
+        MATERIAL_PROVIDERS
     ]
 })
 
@@ -24,14 +24,13 @@
     events: Event[];
 
     ngOnInit() {
-        // TODO: connect to the service
         this.getEvents();
     }
 
     getEvents() {
-    this._eventsService.getEvents()
-        .then(
-            events => this.events = events,
-            error => this.errorMessage = <any>error);
+        this._eventsService.getEvents()
+            .then(
+                events => this.events = events,
+                error => this.errorMessage = <any>error);
     }
 }
Fix directives & providers of EventsListComponent
