Merge pull request sstorie#24 from jhillhouse92/master

Updated to be compatible with angular4 for angular2-animated-notifications-panel

Author: sstorie

angular2-animated-notifications-panel/app/app.component.ts

@@ -6,7 +6,6 @@ import {NotificationPanelComponent} from "./notification-panel/index";
 @Component({
   selector: 'my-app',
   moduleId: module.id,
-  directives: [NotificationPanelComponent],
   templateUrl: "app.component.html",
   styleUrls: ['app.component.css']
 })

angular2-animated-notifications-panel/app/app.module.ts

@@ -0,0 +1,14 @@
+import { NgModule }      from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+import { AppComponent }  from './app.component';
+import { NotificationComponent} from './notification/notification.component';
+import { NotificationPanelComponent } from './notification-panel/notification-panel.component'; 
+import { NotificationService } from './shared/notification.service';
+
+@NgModule({
+  imports:      [ BrowserModule ],
+  declarations: [ AppComponent, NotificationComponent, NotificationPanelComponent ],
+  bootstrap:    [ AppComponent ],
+  providers: [ NotificationService ]
+})
+export class AppModule { }

angular2-animated-notifications-panel/app/main.ts

@@ -1,9 +1,9 @@
-import { bootstrap } from '@angular/platform-browser-dynamic';
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
 
 import {NotificationService} from "./shared/index";
-import {AppComponent} from './app.component';
+import {AppModule} from './app.module';
 
 
-bootstrap(AppComponent, [
+platformBrowserDynamic().bootstrapModule(AppModule, [
     NotificationService
 ]);

angular2-animated-notifications-panel/app/notification-panel/notification-panel.component.html

@@ -1,8 +1,8 @@
-<div class="container" @panelWidthTrigger="expandedState">
-    <div class="title" @titleColorTrigger="expandedState">
-        <span *ngIf="expanded" @titleTextTrigger="'in'">Notifications</span>
+<div class="container" [@panelWidthTrigger]="expandedState">
+    <div class="title" [@titleColorTrigger]="expandedState">
+        <span *ngIf="expanded" [@titleTextTrigger]="'in'">Notifications</span>
         <a class="link" (click)="toggleExpandedState()">
-            <i @iconTrigger="expandedState" class="fa fa-arrow-circle-left" aria-hidden="true"></i>
+            <i [@iconTrigger]="expandedState" class="fa fa-arrow-circle-left" aria-hidden="true"></i>
         </a>
     </div>
 
@@ -11,4 +11,4 @@
             [notification]="n"
             [expanded]="expanded"></notification>
     </div>
-</div>
+</div>

angular2-animated-notifications-panel/app/notification-panel/notification-panel.component.ts

@@ -16,7 +16,6 @@ import {NotificationComponent} from "../notification/index";
 @Component({
     moduleId: module.id,
     selector: 'notification-panel',
-    directives: [NotificationComponent],
     templateUrl: 'notification-panel.component.html',
     styleUrls: ['notification-panel.component.css'],
     animations: [
@@ -113,4 +112,4 @@ export class NotificationPanelComponent implements OnInit, OnDestroy {
         this.expanded = !this.expanded;
     }
 
-}
+}

angular2-animated-notifications-panel/app/notification/notification.component.html

@@ -1,14 +1,14 @@
-<div class="icon" @visibleTrigger="'visible'" [ngSwitch]="notification.type">
+<div class="icon" [@visibleTrigger]="'visible'" [ngSwitch]="notification.type">
     <i *ngSwitchCase="0" class="fa fa-comment"></i>
     <i *ngSwitchCase="1" class="fa fa-exclamation-triangle"></i>
     <i *ngSwitchCase="2" class="fa fa-code"></i>
     <i *ngSwitchCase="3" class="fa fa-credit-card"></i>
 </div>
-<div *ngIf="expanded" @visibleTrigger="'visible'" class="details">
+<div *ngIf="expanded" [@visibleTrigger]="'visible'" class="details">
     <div class="message">
         <span>{{notification.message}}</span>
     </div>
     <div class="date">
         <span>{{notification.date | date:'mediumTime'}}</span>
     </div>
-</div>
+</div>