I want to use <a (click)="sidebar.show(some options...)">show</a> and define sidebar in other component as <sm-sidebar class="..." #sidebar></sm-sidebar>, but it does not work.

How can I do this, maybe not sm-sidebar, but some ng2 setting? handle by element id?

ng-semantic/tab/tab.ts(15,12): error TS2300: Duplicate identifier 'tab'.
ng-semantic/tab/tab.ts(18,21): error TS2300: Duplicate identifier 'tab'.
ng-semantic/tab/tab.ts(21,14): error TS2339: Property 'nativeElement' does not exist on type 'number'.
ng-semantic/tab/tab.ts(24,16): error TS2339: Property 'nativeElement' does not exist on type 'number'.
ng-semantic/tab/tab.ts(47,68): error TS2339: Property 'nativeElement' does not exist on type 'number'.

sm-message component would be even better with a (onClose) event so we could perform some garbage collection when they close out. Also, when you call 'detachView'...does this remove the element from the DOM? It doesn't look it does to me...was that your intention? Maybe it should be destroyView?

EDIT:
I wanted to do a pull request, but when I cloned your project and followed the dev intructions...I'm getting this error:

[0] > tsc -w -p './demo'
[0]
[0] error TS5058: The specified path does not exist: ''./demo''

0] npm ERR! node v5.4.1
[0] npm ERR! npm  v3.10.6
[0] npm ERR! code ELIFECYCLE
[0] npm ERR! [email protected] tsc:w: `tsc -w -p './demo'`
[0] npm ERR! Exit status 1
[0] npm ERR!
[0] npm ERR! Failed at the [email protected] tsc:w script 'tsc -w -p './demo''.

Anyways, here is my suggestion for sm-message. I have not tested this, but it's pretty straight forward.

export class SemanticMessageComponent {
  @Input() icon: string;
  @Input() class: string;
  @Output() onClose: EventEmitter<any> = new EventEmitter();
  @ViewChild("message") message: ElementRef;

  constructor(public renderer: Renderer) {}

  close() {
    this.renderer.detachView([this.message.nativeElement]);
    this.onClose.emit(null);
  }
}

Android Nexus 6

Hello! Great work here with this wrapper. I love this UI. I have a NG2 app that was created using the new and future standard angular-cli that has webpack 2 built in.

I am able to import NgSemanticModule and then I am able to use one of the components in my component.

When I run the app via ng serve my app loads up but nothing is shown. No matter which ngSemantic I try to use. The crazy thing is there are no errors.

I was hoping that someone could help me out. I am loading semantic-ui and jquery via the CDN as in the readme file. Should I npm install semantic-ui instead?

There is a bug, that doesn't allow user to select option using keyboard. - when I press key down, dropdown selects option for a second, and then goes back to the first object in collection.

at the getting started page the css link should be

"<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.8/semantic.min.css">"

instead of
"<link rel="stylesheet" type="text/css" link="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.8/semantic.min.css">"

I am attempting to use ng-semantic with webpack and when trying to import the library webpack cannot find the main file so it fails to load the library. I have added '"main": "ng-semantic.js"' to the package.json and webpack was able to find the entry point.

Has anybody integrated ng-semantic with the angular2-webpack-starter from AngularClass?

As I could not run sm-dropdown having it installed via npm (#26), I tried to make it run "directly" using dropdown.ts. Then I verified that on dropdown setup, the "options" were overrriden. I could fix it with the following modification:

export class SemanticDropdownComponent implements AfterViewInit {
    @Input() class: string;
    @Input() title: string;
    @Input() items: Array<{}>;
    @Input() options: any = {};
    @Output() onChange: EventEmitter<string|number> = new EventEmitter<string|number>();
    @ViewChild("dropdown") dropdown: ElementRef;

    ngAfterViewInit(): void {
        this.options.onChange = (value: string|number) => this.onChange.emit(value)
        jQuery(this.dropdown.nativeElement).dropdown(this.options);
    }
}

Regards.

Here is the npm debug log :

0 info it worked if it ends with ok
1 verbose cli [ '/usr/local/bin/node',
1 verbose cli '/usr/local/bin/npm',
1 verbose cli 'run',
1 verbose cli 'demo:build' ]
2 info using [email protected]
3 info using [email protected]
4 verbose run-script [ 'predemo:build', 'demo:build', 'postdemo:build' ]
5 info lifecycle [email protected]predemo:build: [email protected]
6 silly lifecycle [email protected]predemo:build: no script for predemo:build, continuing
7 info lifecycle [email protected]demo:build: [email protected]
8 verbose lifecycle [email protected]demo:build: unsafe-perm in lifecycle true
9 verbose lifecycle [email protected]demo:build: PATH: /usr/local/lib/node_modules/npm/bin/node-gyp-bin:/Users/marwanmazloum/Desktop/Developpement/Cordon/ngSemantic/node_modules/.bin:/usr/local/bin:/usr/local/bin:/usr/bin:/bin:/usr/sbin:/sbin
10 verbose lifecycle [email protected]demo:build: CWD: /Users/marwanmazloum/Desktop/Developpement/Cordon/ngSemantic
11 silly lifecycle [email protected]demo:build: Args: [ '-c',
11 silly lifecycle 'rm -rf demo/app && tslint -c ./tslint.json 'src/app/**/.ts' && tsc -p './src' --rootDir './src' --outDir './demo' && cd src && find . -name '.html' | cpio -pdm ../demo' ]
12 silly lifecycle [email protected]demo:build: Returned: code: 1 signal: null
13 info lifecycle [email protected]~demo:build: Failed to exec demo:build script
14 verbose stack Error: [email protected] demo:build: rm -rf demo/app && tslint -c ./tslint.json 'src/app/**/_.ts' && tsc -p './src' --rootDir './src' --outDir './demo' && cd src && find . -name '_.html' | cpio -pdm ../demo
14 verbose stack Exit status 1
14 verbose stack at EventEmitter. (/usr/local/lib/node_modules/npm/lib/utils/lifecycle.js:239:16)
14 verbose stack at emitTwo (events.js:100:13)
14 verbose stack at EventEmitter.emit (events.js:185:7)
14 verbose stack at ChildProcess. (/usr/local/lib/node_modules/npm/lib/utils/spawn.js:24:14)
14 verbose stack at emitTwo (events.js:100:13)
14 verbose stack at ChildProcess.emit (events.js:185:7)
14 verbose stack at maybeClose (internal/child_process.js:850:16)
14 verbose stack at Process.ChildProcess.handle.onexit (internal/child_process.js:215:5)
15 verbose pkgid [email protected]
16 verbose cwd /Users/marwanmazloum/Desktop/Developpement/Cordon/ngSemantic
17 error Darwin 15.0.0
18 error argv "/usr/local/bin/node" "/usr/local/bin/npm" "run" "demo:build"
19 error node v5.10.1
20 error npm v3.8.3
21 error code ELIFECYCLE
22 error [email protected] demo:build:rm -rf demo/app && tslint -c ./tslint.json 'src/app/**/_.ts' && tsc -p './src' --rootDir './src' --outDir './demo' && cd src && find . -name '_.html' | cpio -pdm ../demo
22 error Exit status 1
23 error Failed at the [email protected] demo:build script 'rm -rf demo/app && tslint -c ./tslint.json 'src/app/**/.ts' && tsc -p './src' --rootDir './src' --outDir './demo' && cd src && find . -name '.html' | cpio -pdm ../demo'.
23 error Make sure you have the latest version of node.js and npm installed.
23 error If you do, this is most likely a problem with the ng-semantic package,
23 error not with npm itself.
23 error Tell the author that this fails on your system:
23 error rm -rf demo/app && tslint -c ./tslint.json 'src/app/*/_.ts' && tsc -p './src' --rootDir './src' --outDir './demo' && cd src && find . -name '*.html' | cpio -pdm ../demo
23 error You can get information on how to open an issue for this project with:
23 error npm bugs ng-semantic
23 error Or if that isn't available, you can get their info via:
23 error npm owner ls ng-semantic
23 error There is likely additional logging output above.
24 verbose exit [ 1, true ]

Hello,

is there a way to use ngSemantic components programatically, through API?

My use case: load data from remote API, generate and show modal with this data.

thank you,
Roman

I was thinking of creating an sm-transition for a merge request. Any guidance on how you think this should be implemented?

I've tried to integrate it myself, but I'm a bit confused. Tips?

I have this code in example doc.

<sm-modal title="Hello from Modal" class="" icon="home" #myModalNormal>
    <modal-content>
        Lorem Ipsum is simply dummy text of the printing and typesetting industry.
    </modal-content>
    <modal-actions>
        <div class="ui buttons">
            <div class="ui button primary" (click)="myModalNormal.hide()">Close modal</div>
        </div>
    </modal-actions>
</sm-modal>
<sm-modal title="Hello from Modal2" class="modal fade" icon="home" #myModalNormal2>
    <modal-content>
        Lorem Ipsum is simply dummy text of the printing and typesetting industry.
    </modal-content>
    <modal-actions>
        <div class="ui buttons">
            <div class="ui button primary" (click)="myModalNormal.hide()">Close modal</div>
        </div>
    </modal-actions>
</sm-modal>

import { 
  Component, 
  OnInit,
  Input ,
  trigger,
  state,
  style,
  keyframes,
  transition,
  animate    
} from '@angular/core';
import { HeaderComponent } from './header/header.component';
import { SidebarComponent } from './sidebars/sidebar.component';
import { MenuDashBoardService } from '../shared/index';
import { SEMANTIC_COMPONENTS, SEMANTIC_DIRECTIVES } from "ng-semantic";


@Component({
    selector: 'dashboard',
    templateUrl: 'app/dashboard/dashboard.component.html',
    directives:[HeaderComponent,SidebarComponent,SEMANTIC_DIRECTIVES,SEMANTIC_COMPONENTS],
    providers:[MenuDashBoardService],
    styleUrls:['app/dashboard/dashboard.component.css'],
})
export class DashboardComponent implements OnInit {

    constructor(private _menuServ:MenuDashBoardService) {


     }
    ngOnInit() { 

    }



}

the modal should not be black screen?

What is wrong??

Quoting Readme.md:

Installation
npm install ng-semantic --save
Semantic UI installation will be triggered. Semantic UI must be installed in public folder ( dist folder must be public )

When installing through npm, the Semantic-Ui installation is not triggered
Is that expected now?

Using Windows 10, NodeJs 5.2.0, NPM 3.3.12

Thanks for the great project!

Now that RC 1 it out, the Angular team changed the import to @angular/... instead of angular2/.... Would be great if ngSemantic could be updated too.

Cheers,
Andy

Maybe I am wrong, but I have found that the dropdown.js file installed with "npm install ng-semantic --save" present in ng-semantic/dropdown and ng-semantic/bundles/ng-semantic.js is the transpiled version of master/demo/app/components/dropdown.ts. Hence, the component will not work.

Thanks for the angular2 port of semantic ui!

I just came across a bug in popup, if clicked on the trigger button for more than once the popup is not closing after clicking outside.

Also I would like to know how can I close the popup after clicking on a button within the popup?

Regards,
jyosh

Hello,

<sm-button [class.disabled]="isTrue">
btn

does not set class and make button disabled. Same validation works well for regular semantic ui button.

thanks,
Roman

I may be miss-understanding how to use the sm-dropdown but let me pose this question. Lets say I have a component like this.

import { Component, Input, OnInit } from "@angular/core";
import { Role } from '../models/Role';

@Component({
    selector: "role-user-edit",
    template:
       `<sm-dropdown class='search selection' title='Search Roles...' (onChange)='change($event)'>
            <sm-item *ngFor='let role of roles'>{{role.name}}</sm-item>
       </sm-dropdown>`
})
export class UserEditComponent implements OnInit {

    roles: Role[];

    ngOnInit() {
        Role.find()
            .subscribe((roles: Role[]) => {
                this.roles = roles;
            });
    }

    change(role: Role) {
        // Do Stuff with role......
    }
}

If I do a console.log on role within the change method I will get the html object that comes back from the dropdown JQuery module. I would expect to get the role object but that is not what I get. My question is am I doing this wrong and if so how would I get object or at least a better identifier for the object so I can at least search for it within my list of roles. Thanks.

Great project, good work so far!

On your demo site, https://ng-semantic.herokuapp.com/#/, you incorrectly use the 'src' instead of 'href' to link to the CDN providing the core semantic CSS.

Currently: <link rel="stylesheet" type="text/css" src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.2/semantic.min.css">

Should be:
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.2/semantic.min.css">

Don't if I miss something but doing like the example:

Hover me

Did not work.

The directive is call, but is not working!

I try: npm install ng-semantic --save

with this trace:

└── [email protected]  extraneous

npm WARN optional Skipping failed optional dependency /karma/chokidar/fsevents:
npm WARN notsup Not compatible with your operating system or architecture: [email protected]

https://ng-semantic.herokuapp.com/#/elements/form

<div class="field">
    <sm-input label="Name" [control]="form.controls.nameControl" placeholder="Enter name..."></sm-input>
</div>

Form example uses that outer div wrapper but it seem that can be removed by looking at here:
https://github.com/vladotesanovic/ngSemantic/blob/master/ng-semantic/input/input.ts#L13

Any particular reason why it is used in example?

Just wanted to check if you're working on this currently or can I go ahead and give it a go?

I'm trying something like this (mouseover)="elem.show($event, {position: 'top center'})", showing at mouse hover to show a popup. The problem is that it works the first time and then it works only at on click.

If option tags are populated async (typically after calling http backend) then setting model before that (typically on parent form/page load) doesnt update dropdown selection.

As far as I can see there no event on component life cycle that would fire each time ng-content changes, in which we could simply if check control has value and if yes, call jquery dropdown to make a selection.

Standard way would be to handle this from parent by subscribing to that http request and then set Model on sm-select but its not ideal since you need to wire this manually.

Perhaps alternative would be to expose new property @input items[] and pass that in instead of ng-content, that way control can listen for changes using ngChange event. This would require specifying the 'value' field and 'display' input fields since Options rendering would happen inside the component.

Using the angular cli gives me the following.

Error: Uncaught (in promise): Error: Error: XHR error (404 Not Found) loading http://localhost:4200/vendor/ng-semantic/ng-semantic.js

Hi,
I am using the angular2 webpack in my project. Besides using npm install for this library, how do i setup ngSemantic for webpack?

We're currently working on the project based on Angular 2 and Semantic UI and have found that the support for visibility behavior is missing in the ngSemantic project

Do you have plans to implement it soon? We're currently blocked with this and closing the gap by implementing custom attribute directive [smVisibility] that would expose all visibility events. The usage pattern is the following:

<div [smVisibility]="{options}" (onTopPassed)="....">

Please share your thoughts on the implementation you're envisioning and we'll most likely contribute a PR back to this project.

When using sm-select with reactive form control passed in by [control] property, where control has validator attached, then field never goes red even if validation is not passing.

Tried all builtin validators like required, minLength, pattern.

Hey, great job so far in TS.
Was wondering if I could suggest a Dart version ?
I don't mind doing it though.

mycode

<sm-select #userModel
    [options]="{direction: 'upward'}" 
    [(model)]="userModel.gender" placeholder="Select gender..." 
    class="fluid">
    <option value="m"><i class="icon male"></i> Male</option>
    <option value="f"><i class="icon female"></i> Female</option>
</sm-select>

I add sidebar menu only for dashboard part of the application. Here is (shortened) code sample:

<sm-sidebar class="left vertical sidebar labeled icon menu" #dashboardMenuSidebar>
  <a class="item" [routerLink]="['/dashboard/admin']">
    Dashboard
  </a>
</sm-sidebar>
<!-- Sidebar Menu END -->

<!-- Page content START -->
<div class="pusher">

  <!-- Top Menu START -->
  <div class="dashboard-menu">

    <sm-button icon="large sidebar" (click)="dashboardMenuSidebar.show({transition: 'overlay'})">
    </sm-button>

  </div>
  <!-- Top Menu END -->

  <router-outlet></router-outlet>
</div>

After clicking on menu link item I am forwarded to the needed page but sidebar menu remains open. Should I close it programatically or is there a way to fix it?

Chrome 51
Angular2-RC.5

Are you going to be leaving jquery as a dependency for the project? I have not used ng2 but ng1's approach was to more or less leave it out.

After updating to Angular2 RC5, I had to put @component({moduleId: module.id. (...) in all my stuff to get it working after mimification. Ng-Semantic is working fine in dev env. But after build to production is nor working (No Exceptions on console)

Trying to get the onHide callback working on the sidebar, I figured it should only be a matter of passing the callback into the function like so:
invertedSidebar.show({transition: 'push', onHide: toggle()})

Nothing happens with this approach, however. Is there a different way of triggering functions using the callbacks?

It is common setup when validating form fields to start showing invalid fields and validation errors only after form has been submitted for the first time.

I can see that sm-input is already searching parent tags to determine if component is inside a form, so it could check if parent forms 'submitted' boolean property when toggling error state, instead of controls dirty or touched state.

How about including this behavior (perhaps make it optional) ?

Hello,

I add sidebar menu only for dashboard part of the application. Here is (shortened) code sample:

<sm-sidebar class="left vertical sidebar labeled icon menu" #dashboardMenuSidebar>
  <a class="item" [routerLink]="['/dashboard/admin']">
    Dashboard
  </a>
</sm-sidebar>
<!-- Sidebar Menu END -->

<!-- Page content START -->
<div class="pusher">

  <!-- Top Menu START -->
  <div class="dashboard-menu">

    <sm-button icon="large sidebar" (click)="dashboardMenuSidebar.show({transition: 'overlay'})">
    </sm-button>

  </div>
  <!-- Top Menu END -->

  <router-outlet></router-outlet>
</div>

After clicking on menu button page refreshes (not good), menu is shown as expected but Semantic raises the following errors:

Sidebar: Had to add pusher element. For optimal performance make sure body content is inside a pusher element

Sidebar: Had to move sidebar. For optimal performance make sure sidebar and pusher are direct children of your body tag

How to fix it?

Chrome 51
Angular2-RC.5

I see your css is depending from Internet as referencing Google fonts.
Could you please fix this by adding needed stuff in local assets or providing sass or css sources.

Something like:

<sm-input label="Name" placeholder="Enter name..." icon="user icon"></sm-input>

It happens to both left and bottom sidebars. Steps to reproduce:

1. open demo
2. click on launch left sidebar
3. click anywhere to close the sidebar
4. click on launch left sidebar and notice it does not open again

Browsers tried:

• Chrome
• Firefox

I sadly could not find out why it does not work and apart from this I really enjoy using ngSemantic!

Cheers,

Ivo

I received error message:
angular2-polyfills.js:332 Error: TypeError: core_1.View is not a function(…)

Afer a little debugging, I realized 'angulars/core' doesn't have a View() class which is now breaking the ng-semantic components. I've looked at your code and it looks like all you need to do is move your @view values into the @component.

Please see:
angular/angular@f9fb72f

I'll try rolling back to beta.9 for now.

Need to be able to set input type to number or password on sm-input

Is this posible?

Good news, a new version is out :)

I am experiencing problems with data-binding / event emissions using ngSemantic on page reload. It could appear that this is an issue with Semantic UI.

For example, in a standard "sm-select" dropdown data binding is lost upon page reload, and new selections in the dropdown does not fire an onChange event (No error messages are thrown). Both data binding and onChange events are restored if I navigate to another page and come back to the page with the "sm-select" again.

Using a Semantic UI select (without ngSemantic) appears to behave in a similar manner. I am not sure if this Plunker (not mine) is related to the issue?

In the plunker, if the following line is introduced, then the Semantic UI select is activated and appears in a "SemanticUI" way - but the change events and data binding are lost. If removed, data binding and events are restored (but the select no longer has the SemanticUI interface).

setTimeout(() => { 
jQuery(this.elementRef.nativeElement).find('select').dropdown(); 
}, 1);

Hi,

Any pointers on how to integrate with webpack starter from AngularClass (https://github.com/AngularClass/angular2-webpack-starter)

Cheers,
Jimmy.