edcarroll / ng2-semantic-ui Goto Github PK

Hello,

I have a problem. I use Angular cli for my project. And when I try to make a final build I get this error.

Unexpected value 'SuiModule' imported by the module 'AppModule'
Angular cli command: ng build --prod --aot

Can you please help me with this?

Thank you!

Hi,
I think it would be nice if you can optionally declare the selector to activate the opening of the accordion.

In this way, for example, I could have a list of checkboxes and trigger the open action only to the arrow icon .

Hi!

When having multiple select components on the same page it would be nice if they close when opening another one. Or have an option to that.

Thx for a great project

<sui-tabset>
<div class="ui secondary pointing menu">
<a class="item" suiTabHeader="1">Main</a>
</div>
<div class=" ui existing segment " suiTabContent="1">
<sui-accordion class="ui styled">
<sui-accordion-panel [isOpen]="true">
<div title>
<i class="dropdown icon"></i> First Panel
</div>
<div content>
<p>Add classes to the <code>sui-accordion</code> element to apply styles.</p>
</div>
</sui-accordion-panel>
<sui-accordion-panel>
<div title>
<i class="dropdown icon"></i> Second Panel
</div>
<div content>
<p>Second panel content.</p>
</div>
</sui-accordion-panel>
</sui-accordion>
</div>
No collapse content!
div Content top of next panel

Hey there,

I recognized the following error-message binding undefined to [options] to sui-select:

Why do I need sui-select to handle undefined

When options are loaded asynchronuously we have a state where options are undefined for a short amount of time.

Where is the issue located

I think it is missed to check whether options is undefined: https://github.com/edcarroll/ng2-semantic-ui/blob/master/components/select/select.ts#L82

That's why an error is thrown.

Benefit of the fix

If <sui-select> accepts undefined values the async-Pipe would work with this compoennt.

Can you have a look on this issue?

Thanks & Kinds
Greg

Hi @edcarroll

Please fixed the demo page. It went wrong when scrolling in some page liek http://edcarroll.github.io/ng2-semantic-ui/#/components/checkbox

Thanks

Hi all,

Is there anyway to active a new tab when it's created?

I am using one static tab and a list of dynamic tab, when I push a new tab to the list, it should be active, I tried to used [isActive] but is went to an error with activeClosestTab. I guess this function run before the tab is append to the tab list so the error was raised.

Thanks.

Hi again,
**
Upgrading to Angular 2 rc1 I get the follow errors when compiling : **
node_modules/ng2-semantic-ui/components/accordion/accordion-panel.component.ts(30,5): error TS2322: Type 'EventEmitter<{}>' is not assignable to type 'EventEmitter'.
Type '{}' is not assignable to type 'boolean'.
node_modules/ng2-semantic-ui/components/checkbox/checkbox.component.ts(25,5): error TS2322: Type 'EventEmitter<{}>' is not assignable to type 'EventEmitter'.
Type '{}' is not assignable to type 'boolean'.
node_modules/ng2-semantic-ui/components/dimmer/dimmer.component.ts(33,5): error TS2322: Type 'EventEmitter<{}>' is not assignable to type 'EventEmitter'.
Type '{}' is not assignable to type 'boolean'.
node_modules/ng2-semantic-ui/components/dropdown/dropdown.service.ts(25,5): error TS2322: Type 'EventEmitter<{}>' is not assignable to type 'EventEmitter'.
Type '{}' is not assignable to type 'boolean'.
node_modules/ng2-semantic-ui/components/dropdown/dropdown.service.ts(26,5): error TS2322: Type 'EventEmitter<{}>' is not assignable to type 'EventEmitter'.
Type '{}' is not assignable to type 'boolean'.
node_modules/ng2-semantic-ui/components/message/message.component.ts(16,5): error TS2322: Type 'EventEmitter<{}>' is not assignable to type 'EventEmitter'.
Type '{}' is not assignable to type 'Message'.
Property 'dismissible' is missing in type '{}'.
node_modules/ng2-semantic-ui/components/rating/rating.component.ts(32,5): error TS2322: Type 'EventEmitter<{}>' is not assignable to type 'EventEmitter'.
Type '{}' is not assignable to type 'number'.
node_modules/ng2-semantic-ui/components/tab/tab.directive.ts(31,9): error TS2322: Type 'Observable<{}>' is not assignable to type 'Observable'.
Type '{}' is not assignable to type 'Tab'.
Property 'id' is missing in type '{}'.
node_modules/ng2-semantic-ui/components/tab/tab.directive.ts(86,5): error TS2322: Type 'EventEmitter<{}>' is not assignable to type 'EventEmitter'.
Type '{}' is not assignable to type 'boolean'.
node_modules/ng2-semantic-ui/components/tab/tab.directive.ts(87,5): error TS2322: Type 'EventEmitter<{}>' is not assignable to type 'EventEmitter'.
Type '{}' is not assignable to type 'Tab'.

*Besides I get this when I try to update / install packages : *

npm WARN [email protected] requires a peer of [email protected] but none was installed.
npm WARN [email protected] requires a peer of [email protected] but none was installed.

Do you plan to do an update ?

All the best.

Hi,

I'm trying to use your components (thanks for the job), the project I'm coding uses nodeJS 6 and Angular 2 beta 15. Everything seems to work fine until I call the directive sui-checkbox, then I get this error :

Any Idea of what's wrong ?

Great work on this and it is much appreciated by all Angular developers!

Do you have any plans on creating directives for other Semantic components and if so any timeline?

Can you upgrade the project to rc4? Current usage with anything > rc1 breaks because paths are not right in your build script for @angular/core.

For some reason this is breaking the accordion directive usage on an upgrade. I tried making a fork and upgrading myself, but I haven't had a lot of luck since a lot of the libraries you depend on haven't been updated themselves.

I saw you were doing something like in the Demo :
import {ACCORDION_DIRECTIVES} from '../../../../components/accordion';

I saw in new jumpstart tutorials that they have a file called system.config.js, in this file I added 2 lines in my project :
// map tells the System loader where to look for things
var map = {
...,
'ng2-semantic-ui': 'node_modules/ng2-semantic-ui'
};

and

var packages = {
....
'ng2-semantic-ui': { defaultExtension: 'js' }
};

Then I could Import your components like :
import { Select } from 'ng2-semantic-ui/components/select';

Just to let you know ;-)

Hello,

first of all, thanks for this great project!

I use the latest Angular CLI (v1.0.0) in one of my projects and can't make a production build with the current version of ng2-semantic-ui. Using --prod and/or --aot fails with these errors:

ERROR in ng:///home/mvcoding/Entwicklung/Projekte/angular-test/node_modules/ng2-semantic-ui/components/checkbox/checkbox.d.ts.SuiCheckbox.html (3,130): Property 'checked' is private and only accessible within class 'SuiCheckbox'.
/home/mvcoding/Entwicklung/Projekte/angular-test/src/$$_gendir/node_modules/ng2-semantic-ui/components/checkbox/checkbox.ngfactory.ts (1,1): Property 'checked' is private and only accessible within class 'SuiCheckbox'.
ng:///home/mvcoding/Entwicklung/Projekte/angular-test/node_modules/ng2-semantic-ui/components/checkbox/checkbox.d.ts.SuiCheckbox.html (3,39): Property 'checkedAttribute' is private and only accessible within class 'SuiCheckbox'.
ng:///home/mvcoding/Entwicklung/Projekte/angular-test/node_modules/ng2-semantic-ui/components/checkbox/checkbox.d.ts.SuiCheckbox.html (3,58): Property 'isDisabledAttribute' is private and only accessible within class 'SuiCheckbox'.

ERROR in ng:///home/mvcoding/Entwicklung/Projekte/angular-test/node_modules/ng2-semantic-ui/components/checkbox/radiobutton.d.ts.SuiRadioButton.html (9,8): Property 'currentValue' is private and only accessible within class 'SuiRadioButton'.
/home/mvcoding/Entwicklung/Projekte/angular-test/src/$$_gendir/node_modules/ng2-semantic-ui/components/checkbox/radiobutton.ngfactory.ts (1,1): Property 'checked' is private and only accessible within class 'SuiRadioButton'.
ng:///home/mvcoding/Entwicklung/Projekte/angular-test/node_modules/ng2-semantic-ui/components/checkbox/radiobutton.d.ts.SuiRadioButton.html (5,8): Property 'checkedAttribute' is private and only accessible within class 'SuiRadioButton'.
ng:///home/mvcoding/Entwicklung/Projekte/angular-test/node_modules/ng2-semantic-ui/components/checkbox/radiobutton.d.ts.SuiRadioButton.html (6,8): Property 'isDisabledAttribute' is private and only accessible within class 'SuiRadioButton'.

ERROR in /home/mvcoding/Entwicklung/Projekte/angular-test/src/$$_gendir/node_modules/ng2-semantic-ui/components/message/message.ngfactory.ts (1,1): Property 'isDismissed' is private and only accessible within class 'SuiMessage'.

ERROR in /home/mvcoding/Entwicklung/Projekte/angular-test/src/$$_gendir/node_modules/ng2-semantic-ui/components/progress/progress.ngfactory.ts (1,1): Property 'percentage' is private and only accessible within class 'SuiProgress'.

ERROR in /home/mvcoding/Entwicklung/Projekte/angular-test/src/$$_gendir/node_modules/ng2-semantic-ui/components/rating/rating.ngfactory.ts (1,1): Property 'icons' is private and only accessible within class 'SuiRating'.

ERROR in ng:///home/mvcoding/Entwicklung/Projekte/angular-test/node_modules/ng2-semantic-ui/components/select/multi-select.d.ts.SuiMultiSelect.html (7,1): Property 'selectedOption' does not exist on type 'SuiMultiSelect<any, any>'.

package.json deps are:

"dependencies": {
    "@angular/common": "^4.0.0",
    "@angular/compiler": "^4.0.0",
    "@angular/core": "^4.0.0",
    "@angular/forms": "^4.0.0",
    "@angular/http": "^4.0.0",
    "@angular/platform-browser": "^4.0.0",
    "@angular/platform-browser-dynamic": "^4.0.0",
    "@angular/router": "^4.0.0",
    "core-js": "^2.4.1",
    "ng2-semantic-ui": "^0.6.1",
    "rxjs": "^5.1.0",
    "zone.js": "^0.8.4"
  },
  "devDependencies": {
    "@angular/cli": "^1.0.0",
    "@angular/compiler-cli": "^4.0.0",
    "@types/jasmine": "2.5.38",
    "@types/node": "~6.0.60",
    "codelyzer": "~2.0.0",
    "jasmine-core": "~2.5.2",
    "jasmine-spec-reporter": "~3.2.0",
    "karma": "~1.4.1",
    "karma-chrome-launcher": "~2.0.0",
    "karma-cli": "~1.0.1",
    "karma-coverage-istanbul-reporter": "^0.2.0",
    "karma-jasmine": "~1.1.0",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.1.0",
    "ts-node": "~2.0.0",
    "tslint": "~4.5.0",
    "typescript": "~2.2.0"
  }

Hey everybody!

First of all: great project!!

I discovered a behaviour that's different from original Semantic UI.

If you navigate through the results of <sui-select> with keyboard up and down arrow keys, the current element is not selected. Hence the result list is not scrolling and you can not see where you are in the result list if you select anything out of the visible result range.

The original Semantic UI behaviour is different. If you navigate through the results with up and down key, the element is selected and the list is scrolling if you reach the upper or lower end of the visible range.

http://semantic-ui.com/modules/dropdown.html#search-selection --> select dropdown and navigate with keyboard keys

http://edcarroll.github.io/ng2-semantic-ui/#/components/select --> won't work here

You can argue about whether or not it's a good idea to directly select the item when navigating with keyboard. But it's absolutely essential to scroll the list.

Thank you!

For animating a transition from component code I have to use @ViewChild currently, which uses ElementRef. The Angular Docs say that ElementRef is a security risk. Is there another way to use transition than using @ViewChild to get the element that needs to be transitioned?

Here is an example of how I have used it:

home.component.ts

import {Component, OnInit, ViewChild, Renderer} from '@angular/core';
import {SuiTransition} from "ng2-semantic-ui/components/transition/transition";

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {
  @ViewChild('banner') banner;

  myTransition: SuiTransition;

  constructor(private renderer: Renderer) { }

  ngOnInit() {
    this.myTransition = new SuiTransition(this.banner, this.renderer);
    this.myTransition.animate({name: "scale", duration: 1000});
  }

}

home.component.html partial

<div class="ui hidden information" suiTransition #banner>

</div>

I have follow the instruction and I got this error when trying to import SuiModue to AppModule. Please show me how to resolve this. And I am using angular2-webpack-starter.

Unexpected value 'SuiModule' imported by the module 'AppModule'

Thanks.

Considering the move away from jquery in most of the new frontend frameworks. could we maybe get some suggestions for alternatives. I guess one alternative would be to use css @Keyframes and transitions. A lot of dog work though. Although there will be no reliance on any other library.

We could also use something like gsap : http://greensock.com/gsap .

Might be good to decide on an implementation to move forward with so that we can start on some of the semantic-ui module stuff.

Hi,

could you please update the documentation so that the module works with the step-by-step tutorial app on the angular2 site?

I've done the part mentioned:

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

@NgModule({
    declarations: [AppComponent, ...],
    imports: [SuiModule, ...],  
    bootstrap: [AppComponent]
})
export class AppModule {}

at this point the app will throw errors:

/ng2-semantic-ui/ng2-semantic-ui 404 (Not Found)

figured I'd need systemjs.config.js to have something like this:

(function (global) {
  System.config({
...
    map: {
...
      'ng2-semantic-ui': 'npm:ng2-semantic-ui'
    },
    packages: {
...
      'ng2-semantic-ui': {
        defaultExtension: 'js'
      }
...

but now the app tries to load '/traceur' from the server, which it can't find.

/traceur 404 (Not Found)

By looking at the sources I can't seem to find anything in the module code that would want to do that, but I'm lost at this point. All I could find was that this seems to be some transpiler. Is it a required dependency that I should also install and configure? Could you give me some pointers on how to do that?

thanks,
David

I can't seem to find any way to get the selected value of the selected item of a dropdown. It doesn't have a controlvalueaccessor, so you can't use ngModel. Any thoughts?

With the recent update 0.6.3,
when we try to build the application using angular-cli, we end up with the following errors,

ERROR in D:/clement/install/openempi/mmmOnsite/web-component/src/main/resources/  node_modules/ng2-semantic-ui/components/util/positioning.service.d.ts (1,1): Can  not find type definition file for 'popper.js'. 

ERROR in D:/clement/install/openempi/mmmOnsite/web-component/src/main/resources/  node_modules/ng2-semantic-ui/components/popup/popup.d.ts (1,1): Cannot find type   definition file for 'popper.js'.

For the time being i have reverted back to 0.6.2 with temporary fix.
Please help.

Popup manual trigger is not well documented currently. Need to:

• Provide examples on how to manually control a popup
• Export an IPopup interface that exposes the functionality on the popup directive

Hello,

How is with this project. Nothing new now in quite some time...

I am triying to integrate Angular 2 with ng2SemanticUI library according to the Getting Started section but I have a compilation error:

:3000/node_modules/rxjs/ Failed to load resource: the server responded with a status of 404 (Not Found) localhost/:19 Error: (SystemJS) XHR error (404 Not Found) loading http://localhost:3000/node_modules/rxjs Error: XHR error (404 Not Found) loading http://localhost:3000/node_modules/rxjs at XMLHttpRequest.wrapFn [as __zone_symbol___onreadystatechange] (http://localhost:3000/node_modules/zone.js/dist/zone.js:1032:39) at ZoneDelegate.invokeTask (http://localhost:3000/node_modules/zone.js/dist/zone.js:414:31) at Zone.runTask (http://localhost:3000/node_modules/zone.js/dist/zone.js:181:47) at XMLHttpRequest.ZoneTask.invoke (http://localhost:3000/node_modules/zone.js/dist/zone.js:476:38) Error loading http://localhost:3000/node_modules/rxjs as "rxjs" from http://localhost:3000/node_modules/ng2-semantic-ui/bundles/ng2-semantic-ui.umd.min.js at XMLHttpRequest.wrapFn [as __zone_symbol___onreadystatechange] (http://localhost:3000/node_modules/zone.js/dist/zone.js:1032:39) at ZoneDelegate.invokeTask (http://localhost:3000/node_modules/zone.js/dist/zone.js:414:31) at Zone.runTask (http://localhost:3000/node_modules/zone.js/dist/zone.js:181:47) at XMLHttpRequest.ZoneTask.invoke (http://localhost:3000/node_modules/zone.js/dist/zone.js:476:38) Error loading http://localhost:3000/node_modules/rxjs as "rxjs" from http://localhost:3000/node_modules/ng2-semantic-ui/bundles/ng2-semantic-ui.umd.min.js

I have asked at StackOverflow but nobody has the solution.

Sorry guys!!
I am newbie in angular2.
How i can integrate with in my code?
Att.

`(function (global) {

// map tells the System loader where to look for things
var map = {
'angular2-jwt': 'node_modules/angular2-jwt/angular2-jwt.js',
'app': 'app', // 'dist',
// I Try
// 'ng2-semantic-ui': 'node_modules/ng2-semantic-ui',
'rxjs': 'node_modules/rxjs',
'symbol-observable': 'node_modules/symbol-observable',
'@angular': 'node_modules/@angular',

};

// packages tells the System loader how to load when no filename and/or no extension
var packages = {
'app': { main: 'boot.js', defaultExtension: 'js' },
'rxjs': { defaultExtension: 'js' },
'symbol-observable': { main: 'index.js', defaultExtension: 'js' }
};

var packageNames = [
'@angular/common',
'@angular/compiler',
'@angular/core',
'@angular/http',
'@angular/platform-browser',
'@angular/platform-browser-dynamic',
'@angular/router'
];

// add package entries for angular packages in the form '@angular/common': { main: 'index.js', defaultExtension: 'js' }
packageNames.forEach(function (pkgName) {
packages[pkgName] = { main: 'index.js', defaultExtension: 'js' };
});

var config = {
map: map,
packages: packages
}

// filterSystemConfig - index.html's chance to modify config before we register it.
if (global.filterSystemConfig) { global.filterSystemConfig(config); }

System.config(config);

})(this);`

this is my error...

http://localhost:3000/node_modules/ng2-semantic-ui/ng2-semantic-ui Failed to load resource: the server responded with a status of 404 (Not Found)
localhost/:16 Error: Error: XHR error (404 Not Found) loading http://localhost:3000/node_modules/ng2-semantic-ui/ng2-semantic-ui(…)

Thanks for advanced

Feature Request: Shape module
Semantic Documentation link: http://semantic-ui.com/modules/shape.html#shape
The shape module is really cool and would be a nice addition. Do you have any guides, other than the code, on how to bring a semantic component or module into this library? If you do then I would likely contribute a PR with the shape module implementation

How is it going with Modal. Will be awailable any time soon?

Thank you for you help!

Best regards...

/***/ function(module, exports) {

export * from './components/index';
//# sourceMappingURL=C:/Users/Edward/dev/ng2-semantic-ui/ng2-semantic-ui.js.map

/***/ }

I was looking for a css framework for my new Angular 2.0 project and decided on Semantic UI then I looked for Angular integration and found ng-semantic-ui and ngSemantic.
I don't know the history of each project but for an outsider it looks like the two projects has the same purpose and goal, so why not join forces?

Let's use code from Semantic-UI documentation to demonstrate this:

<div class="ui menu">
  <a class="item">
    Home
  </a>
  <div class="ui pointing dropdown link item" suiDropdown>
    <span class="text">Shopping</span>
    <i class="dropdown icon"></i>
    <div class="menu" suiDropdownMenu>
      <div class="header">Categories</div>
      <div class="item" suiDropdown>
        <i class="dropdown icon"></i>
        <span class="text">Clothing</span>
        <div class="menu" suiDropdownMenu>
          <div class="header">Mens</div>
          <div class="item">Shirts</div>
          <div class="item">Pants</div>
          <div class="item">Jeans</div>
          <div class="item">Shoes</div>
          <div class="divider"></div>
          <div class="header">Womens</div>
          <div class="item">Dresses</div>
          <div class="item">Shoes</div>
          <div class="item">Bags</div>
        </div>
      </div>
      <div class="item">Home Goods</div>
      <div class="item">Bedroom</div>
      <div class="divider"></div>
      <div class="header">Order</div>
      <div class="item">Status</div>
      <div class="item">Cancellations</div>
    </div>
  </div>
  <a class="item">
    Forums
  </a>
  <a class="item">
    Contact Us
  </a>
</div>

The problem here is that when you click on a <span class="text">Clothing</span> element in a nested dropdown, a dropdown gets closed as the component only checks if event.target has suiDropdown attribute, which in this example of course does not have. It's the same problem when clicking on a divider or a header. A quick and dirty solution would probably be to just add a test for text|divider|header to check for in a class attribute, the same as you did for input|textarea. Do you think this is okay?

I am using sui-select component along with angular 2.4.x. I am using the AoT compilation to build the components for production using the NGC command. I am getting a number of errors related to Private variables and Syntax mismatch. Attached the error file herewith.

@edcarroll Can you please help.
sui-select-error.txt

Inside systemjs

map: {
 'ng2-semantic-ui': 'npm:ng2-semantic-ui',
}

packages: {
 'ng2-semantic-ui': {
        main: 'index.js',
        defaultExtension: 'js'
      }
}

Just a question about the opening sentence. It states "Semantic UI Angular 2 Integrations, written in pure AngularJS - no JQuery required." Does that mean it is not written in Angular, but rather AngularJS?

Hello,

When trying to import a simple rating component as per your instructions on:
https://edcarroll.github.io/ng2-semantic-ui/#/getting-started
AND
https://edcarroll.github.io/ng2-semantic-ui/#/components/rating

Note: I'm using Ng4 so it's possible that this library isn't ready for that yet. I did try looking for popper.js in npm but the package lacks a popper.es5.js file.

Please help because I'm really looking forward to using your library!

Thanks in advance.

See Error below:

ERROR in .//ng2-semantic-ui/components/util/positioning.service.
js
Module not found: Error: Can't resolve 'popper.js/dist/popper.es5
.js' in '/Users/kiranrandhawa/Desktop/playground/ArtificialLab/no
de_modules/ng2-semantic-ui/components/util'
@ .//ng2-semantic-ui/components/util/positioning.service.js 2:0
-50
@ .//ng2-semantic-ui/components/popup/popup.directive.js
@ .//ng2-semantic-ui/components/popup/popup.module.js
@ .//ng2-semantic-ui/components/index.js
@ .//ng2-semantic-ui/index.js
@ ./src/app/app.module.ts
@ ./src/main.ts
@ multi webpack-dev-server/client?http://localhost:4200 ./src/ma
in.ts
webpack: Failed to compile.

Hello,

I like your work very much. I just found out, if you use changeDetection: ChangeDetectionStrategy.onPush in component, so that angular doesn't check for changes on every click or mouse move, than dropdown does not work as it should. Can you please help me with this?

Thank you!

Is there work for a table component for the CSS and js?

When you remove all options and all selectedOptions from a multi-select field, the previous selected options are still be shown in labels.

To demonstrate this, I added a new demo to the select demo page at the top, that is based on the multi-select demo. I added a button to clear the available options and selected options from in the component. If you apply the first patch, the demo is added. If you click the button, you can see, that the labels are still being shown. This is not what I expect when clearing these values.

I also added a second patch, that patches the multi-select.ts file in the components folder. If you apply the second patch too and reload the select demopage, the mutliselect field show the behavior that I expect when clearing the options and selected options.

The two patches are based on commit c338840
I'm not that familiar with the code, so I just created these simple patches. There may be more lines to be changed, to be fully compatible with other features of the mutli-select component.

01-multi-select-clear-options-demo.patch.txt
02-multi-select-clear-options.patch.txt

This is a great project, thanks for all your hard work.

Do you have any plans for adding a modal component?

At line 25 in components/dropdown.service.ts :
// State Events
public onToggle:EventEmitter = new EventEmitter(false);
public isOpenChange:EventEmitter = new EventEmitter(false);

Issues (at npm start) :
Type 'EventEmitter<{}>' is not assignable to type 'EventEmitter'.

Solution that fixes the problem :
// State Events
public onToggle:EventEmitter = new EventEmitter(false);
public isOpenChange:EventEmitter = new EventEmitter(false);

On a fresh ng2 install and doing all the steps in the readme, I get this error when running ng build or ng serve:

ERROR in S:/01.Git/java/microservice_skeleton/ui/jmss-ui/node_modules/ng2-semantic-ui/components/util/positioning.service.d.ts (1,1): Cannot find type definition file for 'popper.js'.

Hi,

Everything seems to work fine for now, do you now a simple way to display a semantic UI modal ? They use to implement a jquery .modal('show'), I'm still looking for a solution without JQuery.

Are you planning to add the modal semantic component ? Otherwise I'll figure it out on my own.

Thanks.

@edcarroll Sorry to bug you again with another query.

I am currently working with Angular 4 reactive forms. I have the following script inside html

<sui-select #select 
placeholder="Algorithms" 
[control]="algorithmMaster"
(selectedOptionsChange)="updateModel($event);"
[options]="algorithms"
labelField="displayName"
class="fluid">

But the [control] attribute is not working at all. Can you please confirm whether the attribute name [control] is correct. I am not sure whether this is a component issue.

Whenever I include ng2-semantic-ui in my components in the manner shown in the quickstart - they start silently failing compilation. No errors, the compilation just doesn't give any output. I don't have to add a directive, it's enough to just

import {TAB_DIRECTIVES} from "ng2-semantic-ui/ng2-semantic-ui";

Or any other DIRECTIVES for that matter.
This of course is done after adding "ng2-semantic-ui": "^0.2.3" as a dependency, and the dependency has been downloaded.

I wanna show my popup only if some variable returns false (for example after checking that some element is empty), and as is written on a popup API description, we can use
popupTrigger: Specifies the trigger for the popup. Available options are: hover, click, outsideClick, focus & manual
But I can't figure out how to implement this.

Hi. When trying to initialize an accordion with dynamic data, the animation is dropped. Here's an example of inserting data:

  <sui-accordion-panel *ngFor="let item of test.measurements_parameters | keys; let firstState = first;" [isOpen]="firstState">
    <div title>
      <i class="dropdown icon"></i>
      <accordion-title [category]="item"></accordion-title>
    </div>
    <div content>
      <accordion-content [parameters]="item.value"></accordion-content>
    </div>
  </sui-accordion-panel>

It's not so important how I get the data, but I'll just show that it happens dynamically:

 private getLatestTest(): void
  {
     this.testsService.getLatestTest().then(
       data =>
       {
          this.dataProcessing(data['_items'][0]);
       },
       error =>
       {
          this.errorProcessing(error);
       }
     );
  }

In order to double-check everything, I tried to change the data by clicking on the button:

<sui-accordion class="styled fluid">

  <sui-accordion-panel *ngFor="let item of dummyData">
    <div title>
      <i class="dropdown icon"></i>
      {{ item.propOne }}
    </div>
    <div content>
      {{ item.propTwo }}
    </div>
  </sui-accordion-panel>

</sui-accordion>

...

  onBtnClick()
  {
     this.fakeData = [ {propOne: 'anotherOne', propTwo: 'anotherTwo'}, {propOne: 'one', propTwo: 'two'} ];
  }

Behavior remains the same, animation crashes with dynamic data. How can I pass dynamic data to accordion? Now this is possible only with the help of resolvers, but this option does not quite fit me.

I love your project clean and simple, but one thing that for me is very important to have in the directive packages and are these items.

1 Grid element to resize by device and postitioning
2 Tables
3 Side Bars and menus.

Hi there!

Possibly something to do with #33

Expected behaviour: selecting an element marks the element as selected in the result list as seen in http://semantic-ui.com/modules/dropdown.html#search-selection

Thank you!

Popper has no popper.es5.js file in dist folder.

ERROR in /Users/arsenys/Development/Github/semantic-ui-ng2/demo/src/app/components/codeblock/codeblock.component.ts (28,21): 'Prism' refers to a UMD global, but the current file is a module. Consider adding an import instead.

ERROR in /Users/arsenys/Development/Github/semantic-ui-ng2/demo/src/app/components/codeblock/codeblock.component.ts (28,53): 'Prism' refers to a UMD global, but the current file is a module. Consider adding an import instead.

ERROR in /Users/arsenys/Development/Github/semantic-ui-ng2/components/util/positioning.service.ts (3,20): Cannot find module 'popper.js/dist/popper.es5.js'.

ERROR in ./components/util/positioning.service.ts
Module not found: Error: Can't resolve 'popper.js/dist/popper.es5.js' in '/Users/arsenys/Development/Github/semantic-ui-ng2/components/util'
 @ ./components/util/positioning.service.ts 2:0-50
 @ ./components/popup/popup.directive.ts
 @ ./components/popup/popup.module.ts
 @ ./components/index.ts
 @ ./demo/src/app/pages/demo-pages.module.ts
 @ ./demo/src/app/app.module.ts
 @ ./demo/src/main.ts
 @ multi webpack-dev-server/client?http://localhost:4200 ./demo/src/main.ts
webpack: Failed to compile.

ng build fails with the error:

ERROR in SuiModule is not an NgModule

in app.module.ts i just write
...
import { SuiModule } from 'ng2-semantic-ui/ng2-semantic-ui';
...

@NgModule({
imports:[...,
SuiModule,
...],
declarations: [ AppComponent],
bootstrap: [ AppComponent ]
})

...

and i hadn't use in other components,it cause
error: export declarations may only appear at top level of a module,
when i remove 'SuiModule' from @NgModule({imports:[]}) it work well.
so what should i do.

Since you separated local and remote options in search service, there should probably be optionsLookup input in SuiSelectBase to use remote options from a promise? Or maybe a detection of options type in SuiSelectBase?

Any way, as I can see, it is currently impossible to use remote options in <sui-select>.

Hello @edcarroll

I have found a small problem in the document at the events section.
http://edcarroll.github.io/ng2-semantic-ui/#/components/select

It has to be selectedOptionsChange not selectedOptionChange like now.

It took me a while to look at the source code and found that missing s letter.

Please update for later used.