Ngx-semantic-ui NPM

Semantic UI extension into Angular 2

This project is meant to remove JQuery from Semantic-UI's modules and build it in Angular 2. The first portion of this project is meant to take the existing structures of Semantic-UI where you could copy and paste their examples into your code and the set of directives/components in this module will pick them up and create interactivity with them.

Warning

This project is still in heavy development. So there will be features that have not been implemented.

Installation

npm install --save ngx-semantic-ui

cd {SEMANTIC FOLDER}
gulp build

Use

After installation you will need to import the module into your angular project.

// app.component.ts
import { Component, ViewContainerRef } from '@angular/core';

@Component({
    selector: 'app-root',
    template:
`<select class="ui dropdown" [(ngModel)]='selectValue' allowReselection="true">
    <option value="">{{title}}</option>
    <option value="1">Male</option>
    <option value="0">Female</option>
</select>`
})
export class AppComponent {
    title = 'Placeholder Text';
}

// app.module.ts
import { NgModule } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";
import { FormsModule } from "@angular/forms";
import { HttpModule } from "@angular/http";
import { NgxSemanticUiModule } from "ngx-semantic-ui";
import { AppComponent } from "./app.component";

@NgModule({
    imports: [
        BrowserModule,
        FormsModule,
        HttpModule,
        NgxSemanticUiModule
    ],
    declarations: [
        AppComponent,
    ]
})
export class AppModule { }

Modules

Accordion
Checkbox
Dimmer
Dropdown
Embed (To be developed)
Modal
Nag (To be developed)
Popup (In development)
Progress
Rating
Search
Shape
Sidebar (In development)
Sticky
Tab
Transition

Components

Once modules are finished, components will be developed to build out common use cases for each of the modules for quick development.

Services

Once modules are finished, custom services will be developed to deal with opening dynamic modals in code and displaying messages from code much like toastr messages.