Getting Started

Semantic UI Angular 2 Integrations, written in pure AngularJS - no JQuery required.

Installation

To install this library, run:

$ npm install ng2-semantic-ui --save

Add a reference to your index.html file: (also ensure you have a reference to the Semantic UI CSS file)

<script src="node_modules/ng2-semantic-ui/bundles/ng2-semantic-ui.min.js"></script>

Start using the directives:

import {DIRECTIVES} from 'ng2-semantic-ui/ng2-semantic-ui';

Quick Start (from scratch)

Clone the angular2-quickstart repository, and set everything up.

Add the following lines to your index.html:

<script src="node_modules/ng2-semantic-ui/bundles/ng2-semantic-ui.min.js"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.8/semantic.css">

Update your app.component.ts to be the following:

import {Component} from 'angular2/core'; import {CHECKBOX_DIRECTIVES} from 'ng2-semantic-ui/ng2-semantic-ui'; @Component({ selector: 'my-app', directives: [CHECKBOX_DIRECTIVES], template: ` <sui-checkbox>Checkbox example</sui-checkbox> ` }) export class AppComponent {}

And you're good to go!