feat($compile): Angular4 Support

Enabled support for Angular4 applications

closes #5

Author: andreasonny83

README.md

@@ -7,11 +7,14 @@
 
 # angular2-expandable-list
 
-> Expandable lists made easy for Angular2
+> Expandable lists made easy for Angular2+
 
-angular2-expandable-list is an HTML `<angular2-expandable-list>` tag enhanced with styling and animation
+Angular2 Expandable List is an HTML `<angular2-expandable-list>` tag enhanced with styling and animation.
+now compatible with Angular4 too.
 
-Plunker DEMO available [here](https://embed.plnkr.co/uAPJq0/)
+**Plunker DEMOs:**
+
+*   [Angular2 Expandable List with Angular2](https://embed.plnkr.co/uAPJq0/)
 
 ![screenshot](http://i.imgur.com/Qa402ev.gif)
 
@@ -26,6 +29,7 @@ Plunker DEMO available [here](https://embed.plnkr.co/uAPJq0/)
 * [Options](#options)
   * [Properties](#properties)
   * [Attributes](#attributes)
+* [Angular 4](#angular-4)
 * [Changelog](#changelog)
 * [License](#license)
 
@@ -259,6 +263,36 @@ export class AppComponent {
 | disabled | boolean | When applied to the `expandable-list-item`, disabled the
 | is-expanded | boolean | Reflect the expandable state of the item list element
 
+## Angular 4
+
+This module will work with Angular 4 projects but requires `@angular/animations`
+to be included in your project as the Angular animations are not part of the `@angular/core`
+library starting from the version >=4.
+
+Make sure to include the `BrowserAnimationsModule` in your App module like in the following example:
+
+```ts
+import { NgModule } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+import { AppComponent } from './app.component';
+
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+
+@NgModule({
+  bootstrap: [ AppComponent ],
+  declarations: [
+    AppComponent,
+  ],
+  imports: [
+    BrowserModule,
+    BrowserAnimationsModule, // Angular 4 Only
+  ],
+})
+export class AppModule { }
+```
+
+Everything else will just work as before.
+
 ## Contributing
 
 This package is using the AngularJS commit messages as default way to contribute

package.json

@@ -1,7 +1,7 @@
 {
   "name": "angular2-expandable-list",
   "version": "0.0.0-development",
-  "description": "Expandable lists made easy for Angular2",
+  "description": "Expandable lists made easy for Angular2+",
   "main": "index.js",
   "scripts": {
     "build": "webpack --config config/webpack.lib.js",
@@ -23,10 +23,13 @@
     "url": "https://github.com/andreasonny83/angular2-expandable-list.git"
   },
   "keywords": [
-    "angular",
     "ng2",
+    "ng4",
+    "angular",
     "angular2",
+    "angular4",
     "angular2-component",
+    "angular4-component",
     "lists",
     "treeview"
   ],
@@ -37,9 +40,9 @@
   },
   "homepage": "https://github.com/andreasonny83/angular2-expandable-list#readme",
   "peerDependencies": {
-    "@angular/common": "^2.0.0",
-    "@angular/core": "^2.0.0",
-    "@angular/platform-browser": "^2.0.0"
+    "@angular/common": ">=2.0.0",
+    "@angular/core": ">=2.0.0",
+    "@angular/platform-browser": ">=2.0.0"
   },
   "devDependencies": {
     "@angular/common": "2.4.9",