fix #5

Author: instance-oom

Diff for: .gitignore

@@ -3,5 +3,6 @@ demo/app/*.js
 components/*.js
 components/*/*.js
 angular2-semantic-ui.js
+index.js
 .vscode/
 typings/

Diff for: .npmignore

@@ -1,8 +1,6 @@
 .vscode/
 node_modules/
 typings/
-components/**/**.js
-angular2-semantic-ui.js
-index.js
 tsconfig.json
-typings.json
+typings.json
+systemjs.config.js

Diff for: README.md

@@ -12,19 +12,16 @@ Angular2 Components for <a href="http://semantic-ui.com/">Semantic UI</a>
 ```
 npm install angular2-semantic-ui --save
 
-import { SEMANTIC_UI_COMPONENTS } from 'angular2-semantic-ui';
+import { L_SEMANTIC_UI_MODULE } from 'angular2-semantic-ui';
 ```
 
-#Demo 
-<a href="https://lon-yang.github.io/angular2-semantic-ui-demo">Online Demo</a>&nbsp;&nbsp;&nbsp;&nbsp;
+# Demo 
+<a href="https://lon-yang.github.io/angular2-semantic-ui-demo">Online Demo</a>    
 <a href="https://github.com/lon-yang/angular2-semantic-ui-demo">Demo Code</a>
 ```cmd
 git clone https://github.com/lon-yang/angular2-semantic-ui-demo.git
-
 cd angular2-semantic-ui-demo
-
 npm install
-
 npm start
 ```
 
@@ -42,7 +39,10 @@ npm start
 - <a href="https://github.com/lon-yang/angular2-semantic-ui/tree/master/components/pagination">Pagination</a>
 - <a href="https://github.com/lon-yang/angular2-semantic-ui/tree/master/components/tags-input">Tags-Input</a>
 
-#Change Log
+# Using with Systemjs
+Please see [systemjs.config.js](https://github.com/lon-yang/angular2-semantic-ui/blob/master/systemjs.config.js)
+
+# Change Log
 
 - 2016-06-02 Add Pagination Component
 - 2016-06-03 Fix bug
@@ -53,3 +53,4 @@ npm start
 - 2016-08-30 Add component of `lsu-tagsInput`
 - 2016-09-18 Upgrade angular2 to `final`, Optimization code
 - 2016-10-19 Upgrade angular2 to `2.1.0`, Optimization code and add animation
+- 2016-11-13 Support NgModule, fix #5

Diff for: angular2-semantic-ui.ts

@@ -1,9 +1,9 @@
-import { Component, Input, ElementRef } from '@angular/core'
+import { Component, Input, ElementRef, ViewChild } from '@angular/core'
 
 @Component({
   selector: 'lsu-dimmer',
   template: `
-    <div class="ui dimmer" [ngClass]="dimmerCls">
+    <div #dimmerDiv class="ui dimmer" [ngClass]="{'active': active}">
       <div class="content">
         <div class="center">
           <ng-content></ng-content>
@@ -14,27 +14,38 @@ import { Component, Input, ElementRef } from '@angular/core'
 })
 
 export class DimmerComponent {
-  private dimmerCls: any
+  @ViewChild("dimmerDiv") dimmerDiv: ElementRef;
+
   private parentEle: any
+  private _active: boolean;
 
   @Input()
   public set active(val: boolean) {
-    if (this.parentEle) {
-      if (val) {
-        this.parentEle.classList.add("dimmable");
-        this.parentEle.classList.add("dimmed");
-      } else {
-        this.parentEle.classList.remove("dimmable");
-        this.parentEle.classList.remove("dimmed");
-      }
-      this.dimmerCls.active = val;
+    this._active = val;
+    this.toggleDimmer()
+  }
+  public get active(): boolean {
+    return this._active;
+  }
+
+  constructor() {
+  }
+
+  ngAfterViewInit() {
+    if (!this.parentEle) {
+      this.parentEle = this.dimmerDiv.nativeElement.parentElement.parentElement;
     }
+    this.toggleDimmer();
   }
 
-  constructor(el: ElementRef) {
-    this.parentEle = el.nativeElement.parentElement;
-    this.dimmerCls = {
-      active: this.active
+  toggleDimmer() {
+    if (!this.parentEle) return;
+    if (this.active) {
+      this.parentEle.classList.add("dimmable");
+      this.parentEle.classList.add("dimmed");
+    } else {
+      this.parentEle.classList.remove("dimmable");
+      this.parentEle.classList.remove("dimmed");
     }
   }
 }

Diff for: components/dimmer/dimmer.ts

@@ -1,27 +1,25 @@
-import { Component, Input, ElementRef } from '@angular/core'
+import { Component, Input, ElementRef, ViewChild } from '@angular/core'
 
 @Component({
   selector: "lsu-loader",
   template: `
-    <div class="ui dimmer" [ngClass]="{'active': isActive}">
+    <div #loaderDiv class="ui dimmer" [ngClass]="{'active': active}">
       <div class="ui {{loaderSize}} text loader">{{ loaderText }}</div>
     </div>
   `
 })
 
 export class LoaderComponent {
+  @ViewChild("loaderDiv") loaderDiv: ElementRef;
+
+  private _active: boolean;
   @Input()
   public set active(val: boolean) {
-    this.isActive = val;
-    if (this.parentEle) {
-      if (val) {
-        this.parentEle.classList.add("ui");
-        this.parentEle.classList.add("segment");
-      } else {
-        this.parentEle.classList.remove("ui");
-        this.parentEle.classList.remove("segment");
-      }
-    }
+    this._active = val;
+    this.toggleLoader();
+  }
+  public get active(): boolean {
+    return this._active;
   }
 
   @Input()
@@ -31,9 +29,24 @@ export class LoaderComponent {
   public loaderSize: string
 
   private parentEle: any
-  private isActive: boolean
 
-  constructor(el: ElementRef) {
-    this.parentEle = el.nativeElement.parentElement;
+  constructor() {
+  }
+
+  ngAfterViewInit() {
+    if (!this.parentEle) {
+      this.parentEle = this.loaderDiv.nativeElement.parentElement.parentElement;
+    }
+  }
+
+  toggleLoader() {
+    if (!this.parentEle) return;
+    if (this.active) {
+      this.parentEle.classList.add("ui");
+      this.parentEle.classList.add("segment");
+    } else {
+      this.parentEle.classList.remove("ui");
+      this.parentEle.classList.remove("segment");
+    }
   }
 }

Diff for: components/loader/loader.ts

@@ -1,4 +1,4 @@
-import { Component, Input, ElementRef, forwardRef } from '@angular/core';
+import { Component, Input, ElementRef, forwardRef, ViewChild } from '@angular/core';
 import { ControlValueAccessor, NgModel, NG_VALUE_ACCESSOR, Validators, ValidatorFn, FormControl } from '@angular/forms';
 
 @Component({
@@ -38,7 +38,7 @@ import { ControlValueAccessor, NgModel, NG_VALUE_ACCESSOR, Validators, Validator
     `
   ],
   template: `
-    <div class="ui fluid dropdown selection multiple tags-input" [class.invalid]="tagInputCtrl.invalid && submitted" tabindex="-1" (click)="tagsInput.focus()" (keyup)="topKeyup($event)">
+    <div #rootEleRef class="ui fluid dropdown selection multiple tags-input" [class.invalid]="tagInputCtrl.invalid && submitted" tabindex="-1" (click)="tagsInput.focus()" (keyup)="topKeyup($event)">
       <a class="ui label transition visible" [class.deleteTarget]="delTarget == tag" *ngFor="let tag of tags; let i = index; let last = last;"
         (click)="setDeltarget(tag, $event)">
         {{ tag }}
@@ -59,6 +59,8 @@ import { ControlValueAccessor, NgModel, NG_VALUE_ACCESSOR, Validators, Validator
 })
 export class TagsInputComponent implements ControlValueAccessor {
 
+  @ViewChild('rootEleRef') rootEleRef: ElementRef;
+
   @Input()
   placeholder: string = 'Add Tag';
 
@@ -79,7 +81,7 @@ export class TagsInputComponent implements ControlValueAccessor {
   private _onChange = (_: any) => { };
   private _onTouched = () => { };
 
-  constructor(private element: ElementRef) {
+  constructor() {
 
   }
 
@@ -88,7 +90,9 @@ export class TagsInputComponent implements ControlValueAccessor {
   }
 
   ngAfterViewInit() {
-    this.rootEle = this.element.nativeElement.children[0];
+    if (!this.rootEle) {
+      this.rootEle = this.rootEleRef.nativeElement;
+    }
   }
 
   writeValue(value: any): void {

Diff for: components/tags-input/tags-input.ts

@@ -1,3 +1,7 @@
+import { NgModule } from '@angular/core';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { CommonModule } from '@angular/common';
+
 import { CHECKBOX_DIRECTIVES } from './components/checkbox';
 import { DIMMER_DIRECTIVES } from './components/dimmer';
 import { DROPDOWN_DIRECTIVES } from './components/dropdown';
@@ -25,7 +29,7 @@ export * from './components/pagination';
 export * from './components/tags-input';
 
 export const SEMANTIC_UI_COMPONENTS: Array<any> = [
-  ...ACCORDION_DIRECTIVES,  
+  ...ACCORDION_DIRECTIVES,
   ...CHECKBOX_DIRECTIVES,
   ...DIMMER_DIRECTIVES,
   ...DROPDOWN_DIRECTIVES,
@@ -37,4 +41,19 @@ export const SEMANTIC_UI_COMPONENTS: Array<any> = [
   ...POPUP_DIRECTIVES,
   ...PAGINATION_DIRECTIVES,
   ...TAGS_INPUT_DIRECTIVES
-]
+]
+
+@NgModule({
+  imports: [
+    FormsModule,
+    ReactiveFormsModule,
+    CommonModule
+  ],
+  declarations: [
+    ...SEMANTIC_UI_COMPONENTS
+  ],
+  exports: [
+    ...SEMANTIC_UI_COMPONENTS
+  ]
+})
+export class L_SEMANTIC_UI_MODULE { }

Diff for: index.ts

@@ -1,6 +1,6 @@
 {
   "name": "angular2-semantic-ui",
-  "version": "1.3.1",
+  "version": "1.3.2",
   "description": "Angular2 Directives for Semantic UI",
   "main": "index.js",
   "scripts": {
@@ -24,11 +24,14 @@
   },
   "homepage": "https://github.com/lon-yang/angular2-semantic-ui#readme",
   "peerDependencies": {
+    "@angular/common": "^2.1.0",
     "@angular/core": "^2.1.0",
     "@angular/forms": "^2.1.0"
   },
   "devDependencies": {
+    "@angular/common": "^2.1.0",
     "@angular/core": "^2.1.0",
-    "@angular/forms": "^2.1.0"
+    "@angular/forms": "^2.1.0",
+    "rxjs": "^5.0.0-rc.2"
   }
 }