diff --git a/src/app/components/noosfero-activities/activities.component.js b/src/app/components/noosfero-activities/activities.component.js
deleted file mode 100644
index f8cb702..0000000
--- a/src/app/components/noosfero-activities/activities.component.js
+++ /dev/null
@@ -1,14 +0,0 @@
-(function() {
-  'use strict';
-
-  angular
-    .module('noosferoApp')
-    .component('noosferoActivities', {
-      restrict: 'E',
-      bindings: {
-          activities: '<'
-      },
-      templateUrl: 'app/components/noosfero-activities/activities.html'
-    });
-
-})();
diff --git a/src/app/components/noosfero-activities/activities.component.spec.ts b/src/app/components/noosfero-activities/activities.component.spec.ts
new file mode 100644
index 0000000..a755374
--- /dev/null
+++ b/src/app/components/noosfero-activities/activities.component.spec.ts
@@ -0,0 +1,36 @@
+import {TestComponentBuilder} from 'ng-forward/cjs/testing/test-component-builder';
+import {Pipe, Input, provide, Component} from 'ng-forward';
+import {provideFilters} from '../../../spec/helpers';
+
+import {NoosferoActivities} from './activities.component';
+
+const tcb = new TestComponentBuilder();
+
+const htmlTemplate: string = '<noosfero-activities [activities]="ctrl.activities"></noosfero-activities>';
+
+
+describe("Components", () => {
+
+    describe("Noosfero Activities", () => {
+
+        beforeEach(angular.mock.module("templates"));
+
+        @Component({
+            selector: 'test-container-component',
+            template: htmlTemplate,
+            directives: [NoosferoActivities],
+            providers: provideFilters("truncateFilter", "stripTagsFilter")
+        })
+        class BlockContainerComponent {
+            activities = [{ name: "activity1", verb: "create_article" }, { name: "activity2", verb: "create_article" }];
+        }
+
+        it("render a noosfero activity tag for each activity", done => {
+            tcb.createAsync(BlockContainerComponent).then(fixture => {
+                expect(fixture.debugElement.queryAll("noosfero-activity").length).toEqual(2);
+                done();
+            });
+        });
+    });
+
+});
diff --git a/src/app/components/noosfero-activities/activities.component.ts b/src/app/components/noosfero-activities/activities.component.ts
index 9bdcf71..7fe9715 100644
--- a/src/app/components/noosfero-activities/activities.component.ts
+++ b/src/app/components/noosfero-activities/activities.component.ts
@@ -1,13 +1,14 @@
-(function() {
-  'use strict';
+import {Component, Input} from "ng-forward";
+import {NoosferoActivity} from "./activity/activity.component";
+import {Activity} from "../../models/interfaces";
 
-  angular
-    .module('noosferoApp')
-    .component('noosferoActivities', {
-      bindings: {
-          activities: '<'
-      },
-      templateUrl: 'app/components/noosfero-activities/activities.html'
-    });
+@Component({
+    selector: "noosfero-activities",
+    templateUrl: 'app/components/noosfero-activities/activities.html',
+    directives: [NoosferoActivity]
+})
+export class NoosferoActivities {
 
-})();
+    @Input() activities: Activity[];
+
+}
diff --git a/src/app/components/noosfero-activities/activities.html b/src/app/components/noosfero-activities/activities.html
index 878ce7f..f99e3e3 100644
--- a/src/app/components/noosfero-activities/activities.html
+++ b/src/app/components/noosfero-activities/activities.html
@@ -1,5 +1,5 @@
 <timeline>
-  <timeline-event ng-repeat="activity in $ctrl.activities | orderBy: 'created_at':true">
-    <noosfero-activity activity="activity"></noosfero-activity>
+  <timeline-event ng-repeat="activity in ctrl.activities | orderBy: 'created_at':true">
+    <noosfero-activity [activity]="activity"></noosfero-activity>
   </timeline-event>
 </timeline>
diff --git a/src/app/components/noosfero-activities/activity/activity.component.js b/src/app/components/noosfero-activities/activity/activity.component.js
deleted file mode 100644
index 8aa9fbb..0000000
--- a/src/app/components/noosfero-activities/activity/activity.component.js
+++ /dev/null
@@ -1,24 +0,0 @@
-(function() {
-  'use strict';
-
-  angular
-    .module('noosferoApp')
-    .component('noosferoActivity', {
-      restrict: 'E',
-      bindings: {
-          activity: '<'
-      },
-      templateUrl: 'app/components/noosfero-activities/activity/activity.html',
-      replace: true,
-      controller: ActivityController
-    });
-
-  /** @ngInject */
-  function ActivityController() {
-    var vm = this;
-    vm.getActivityTemplate = function(activity) {
-      return 'app/components/noosfero-activities/activity/' + activity.verb + '.html';
-    }
-  }
-
-})();
diff --git a/src/app/components/noosfero-activities/activity/activity.component.spec.ts b/src/app/components/noosfero-activities/activity/activity.component.spec.ts
new file mode 100644
index 0000000..9f9d276
--- /dev/null
+++ b/src/app/components/noosfero-activities/activity/activity.component.spec.ts
@@ -0,0 +1,38 @@
+import {TestComponentBuilder} from 'ng-forward/cjs/testing/test-component-builder';
+import {Pipe, Input, provide, Component} from 'ng-forward';
+import {provideFilters} from '../../../../spec/helpers';
+
+import {NoosferoActivity} from './activity.component';
+
+const tcb = new TestComponentBuilder();
+
+const htmlTemplate: string = '<noosfero-activity [activity]="ctrl.activity"></noosfero-activity>';
+
+
+describe("Components", () => {
+
+    describe("Noosfero Activity", () => {
+
+        beforeEach(angular.mock.module("templates"));
+
+        @Component({
+            selector: 'test-container-component',
+            template: htmlTemplate,
+            directives: [NoosferoActivity],
+            providers: provideFilters("truncateFilter", "stripTagsFilter")
+        })
+        class BlockContainerComponent {
+            activity = { name: "activity1", verb: "create_article" };
+        }
+
+        it("render the specific template for an activity verb", done => {
+            tcb.createAsync(BlockContainerComponent).then(fixture => {
+                let component: NoosferoActivity = fixture.debugElement.componentViewChildren[0].componentInstance;
+                expect(component.getActivityTemplate()).toEqual('app/components/noosfero-activities/activity/create_article.html');
+                expect(fixture.debugElement.queryAll(".activity.create_article").length).toEqual(1);
+                done();
+            });
+        });
+    });
+
+});
diff --git a/src/app/components/noosfero-activities/activity/activity.component.ts b/src/app/components/noosfero-activities/activity/activity.component.ts
new file mode 100644
index 0000000..7d0db9c
--- /dev/null
+++ b/src/app/components/noosfero-activities/activity/activity.component.ts
@@ -0,0 +1,16 @@
+import {Component, Input} from "ng-forward";
+import {Activity} from "../../../models/interfaces";
+
+@Component({
+    selector: "noosfero-activity",
+    templateUrl: 'app/components/noosfero-activities/activity/activity.html'
+})
+export class NoosferoActivity {
+
+    @Input() activity: Activity;
+
+    getActivityTemplate() {
+        return 'app/components/noosfero-activities/activity/' + this.activity.verb + '.html';
+    }
+
+}
diff --git a/src/app/components/noosfero-activities/activity/activity.html b/src/app/components/noosfero-activities/activity/activity.html
index 2e266ea..0bcc9b7 100644
--- a/src/app/components/noosfero-activities/activity/activity.html
+++ b/src/app/components/noosfero-activities/activity/activity.html
@@ -1,3 +1,3 @@
-<div class="activity">
-  <ng-include src="$ctrl.getActivityTemplate($ctrl.activity)"></ng-include>
+<div class="activity {{ctrl.activity.verb}}">
+  <ng-include src="ctrl.getActivityTemplate()"></ng-include>
 </div>
diff --git a/src/app/components/noosfero-activities/activity/add_member_in_community.html b/src/app/components/noosfero-activities/activity/add_member_in_community.html
index 3f9c436..67c9b23 100644
--- a/src/app/components/noosfero-activities/activity/add_member_in_community.html
+++ b/src/app/components/noosfero-activities/activity/add_member_in_community.html
@@ -4,10 +4,10 @@
 <timeline-panel>
   <timeline-heading>
     <h4 class="timeline-title">
-      <a ui-sref="main.profile.info({profile: $ctrl.activity.user.identifier})"><strong ng-bind="$ctrl.activity.user.name"></strong></a>
+      <a ui-sref="main.profile.info({profile: ctrl.activity.user.identifier})"><strong ng-bind="ctrl.activity.user.name"></strong></a>
       <span> has joined the community</span>
     </h4>
-    <p><small class="text-muted"><i class="fa fa-clock-o"></i> <span am-time-ago="$ctrl.activity.created_at"></span></small></p>
+    <p><small class="text-muted"><i class="fa fa-clock-o"></i> <span am-time-ago="ctrl.activity.created_at"></span></small></p>
   </timeline-heading>
   <div class="timeline-body"></div>
 </timeline-panel>
diff --git a/src/app/components/noosfero-activities/activity/create_article.html b/src/app/components/noosfero-activities/activity/create_article.html
index f2ff140..eddf3f3 100644
--- a/src/app/components/noosfero-activities/activity/create_article.html
+++ b/src/app/components/noosfero-activities/activity/create_article.html
@@ -4,22 +4,22 @@
 <timeline-panel>
   <timeline-heading>
     <h4 class="timeline-title">
-      <a ui-sref="main.profile.info({profile: $ctrl.activity.user.identifier})"><strong ng-bind="$ctrl.activity.user.name"></strong></a>
+      <a ui-sref="main.profile.info({profile: ctrl.activity.user.identifier})"><strong ng-bind="ctrl.activity.user.name"></strong></a>
       <span> has published on </span>
-      <a ui-sref="main.profile.info({profile: $ctrl.activity.target.article.profile.identifier})">
-        <strong ng-bind="$ctrl.activity.target.article.profile.name"></strong></span>
+      <a ui-sref="main.profile.info({profile: ctrl.activity.target.article.profile.identifier})">
+        <strong ng-bind="ctrl.activity.target.article.profile.name"></strong></span>
       </a>
     </h4>
-    <p><small class="text-muted"><i class="fa fa-clock-o"></i> <span am-time-ago="$ctrl.activity.created_at"></span></small></p>
+    <p><small class="text-muted"><i class="fa fa-clock-o"></i> <span am-time-ago="ctrl.activity.created_at"></span></small></p>
   </timeline-heading>
   <div class="timeline-body">
     <div class="article">
       <div class="title">
-        <a ui-sref="main.profile.page({profile: $ctrl.activity.target.article.profile.identifier, page: $ctrl.activity.target.article.path})"
-           ng-bind="$ctrl.activity.target.article.title"></a>
+        <a ui-sref="main.profile.page({profile: ctrl.activity.target.article.profile.identifier, page: ctrl.activity.target.article.path})"
+           ng-bind="ctrl.activity.target.article.title"></a>
       </div>
       <div class="lead small">
-        <div ng-bind-html="$ctrl.activity.target.article.body | stripTags | truncate: 100 : '...': true"></div>
+        <div ng-bind-html="ctrl.activity.target.article.body | stripTags | truncate: 100 : '...': true"></div>
       </div>
     </div>
   </div>
diff --git a/src/app/components/noosfero-activities/activity/new_friendship.html b/src/app/components/noosfero-activities/activity/new_friendship.html
index 0916deb..e237ad9 100644
--- a/src/app/components/noosfero-activities/activity/new_friendship.html
+++ b/src/app/components/noosfero-activities/activity/new_friendship.html
@@ -4,15 +4,15 @@
 <timeline-panel>
   <timeline-heading>
     <h4 class="timeline-title">
-      <a ui-sref="main.profile.info({profile: $ctrl.activity.user.identifier})"><strong ng-bind="$ctrl.activity.user.name"></strong></a>
-      <span> has made <span ng-bind="$ctrl.activity.params.friend_name.length"></span> new friend(s): </span>
+      <a ui-sref="main.profile.info({profile: ctrl.activity.user.identifier})"><strong ng-bind="ctrl.activity.user.name"></strong></a>
+      <span> has made <span ng-bind="ctrl.activity.params.friend_name.length"></span> new friend(s): </span>
       <span class="comma-separated">
-        <a class="separated-item" ui-sref="main.profile.info({profile: $ctrl.activity.params.friend_url[$index].profile})" ng-repeat="friend in $ctrl.activity.params.friend_name">
+        <a class="separated-item" ui-sref="main.profile.info({profile: ctrl.activity.params.friend_url[$index].profile})" ng-repeat="friend in ctrl.activity.params.friend_name">
           <strong ng-bind="friend"></strong>
         </a>
       </span>
     </h4>
-    <p><small class="text-muted"><i class="fa fa-clock-o"></i> <span am-time-ago="$ctrl.activity.created_at"></span></small></p>
+    <p><small class="text-muted"><i class="fa fa-clock-o"></i> <span am-time-ago="ctrl.activity.created_at"></span></small></p>
   </timeline-heading>
   <div class="timeline-body"></div>
 </timeline-panel>
diff --git a/src/app/index.ts b/src/app/index.ts
index 1d48905..6a75122 100644
--- a/src/app/index.ts
+++ b/src/app/index.ts
@@ -42,8 +42,6 @@ NoosferoApp.run(noosferoAngularRunBlock);
 NoosferoApp.addController("AuthController", AuthController);
 
 
-require("./components/noosfero-activities/activities.component.js");
-require("./components/noosfero-activities/activity/activity.component.js");
 require("./components/noosfero/noosfero-template.filter.js");
 require("./components/noosfero/noosfero.service.js");
 require("./components/noosfero/profile-image/profile-image.component.js");
diff --git a/src/app/models/interfaces.ts b/src/app/models/interfaces.ts
index cfc0641..3c5bc5c 100644
--- a/src/app/models/interfaces.ts
+++ b/src/app/models/interfaces.ts
@@ -51,6 +51,10 @@ export interface Box {
     position: number;
 }
 
+export interface Activity {
+    verb: string;
+}
+
 export interface INoosferoLocalStorage extends angular.storage.ILocalStorageService {
     currentUser: User;
-}
\ No newline at end of file
+}
diff --git a/src/app/profile-info/profile-info.html b/src/app/profile-info/profile-info.html
index b1ed0b4..61dec0b 100644
--- a/src/app/profile-info/profile-info.html
+++ b/src/app/profile-info/profile-info.html
@@ -2,5 +2,5 @@
 
 <div class="profile-wall">
   <h4>Profile Wall</h4>
-  <noosfero-activities activities="vm.activities"></noosfero-activities>
+  <noosfero-activities [activities]="vm.activities"></noosfero-activities>
 </div>
diff --git a/src/app/profile/profile.component.ts b/src/app/profile/profile.component.ts
index c1c3019..c62c2c9 100644
--- a/src/app/profile/profile.component.ts
+++ b/src/app/profile/profile.component.ts
@@ -3,12 +3,14 @@ import {ProfileInfo} from '../profile-info/profile-info.component';
 import {ProfileHome} from '../profile/profile-home.component';
 import {Cms} from '../cms/cms.component';
 import {ContentViewer} from "../content-viewer/content-viewer.component";
+import {NoosferoActivities} from "../components/noosfero-activities/activities.component";
 
 import * as noosferoModels from "./../models/interfaces";
 
 @Component({
     selector: 'profile',
-    templateUrl: "app/profile/profile.html"
+    templateUrl: "app/profile/profile.html",
+    directives: [NoosferoActivities]
 })
 @StateConfig([
     {
--
libgit2 0.21.2