swimlane/ngx-ui

🚀 Style and Component Library for Angular

ngx-ui

Component & Style Library for Angular by Swimlane.

Installing

• npm i @swimlane/ngx-ui --S
• Install the project's peer dependencies (moment, moment-timezone, ngx-moment, ng-in-viewport, codemirror, angular/cdk, resize-observer-polyfill)
• Add NgxUIModule and IconModule to your application module
• Add the ngx-ui theme in the angular.json file (node_modules/@swimlane/ngx-ui/index.css)

Building ngx-ui

Run npm run build:lib to build ngx-ui. This must be done prior to building the demo.

Development server

Run npm run start to serve the demo at http://localhost:4200/. The app will automatically reload if you change any of the source files.

Building

Run ng build to build the project. The build artifacts will be stored in the dist/ directory.

Running tests

• Run npm run test to execute unit tests
• Run ng cypress to execute the end-to-end tests via Cypress.

Release

• Checkout master (git checkout master)
• Pull master (git pull)
• Refresh node modules (npm ci)
• Run tests (npm test)
• Examine log to determine next version (X.Y.Z)
• Run git checkout -b release/X.Y.Z
• Update version in projects/swimlane/ngx-ui/package.json.
• Update changelog in projects/swimlane/ngx-ui/CHANGELOG.md
• Run git commit -am "(release): X.Y.Z"
• Run git tag X.Y.Z
• Run git push origin HEAD --tags
• Run npm run publish:lib
• Submit PR

ngx-ui's Issues

Bug: Toggle needs to be clicked twice for changes to apply

The toggle doesn't switch until you click it the second time.

Bug: ngx-select enter-key-press causes form submission

The following element is part of a form.
<ngx-select [filterable]="true" [tagging]="true" [closeOnSelect]="true" [(ngModel)]="problem.tags" name="tags" required> <ngx-select-option *ngFor="let tag of tagOptions" [name]="tag" [value]="tag"></ngx-select-option> </ngx-select>
When a new tag is inserted it causes the form to submit. You may have to stop bubbling key press events to prevent this.

an ambient enum declarations member initializer must be constant expression

I tried to use it with Angular CLI without AOT stuff.
But I'm getting a bunch of typescript errors.
Can anybody provide me with some guidance on how to fix that?

ERROR in /Users/alexanderkozhevin/Desktop/hypermedia/pheromone/node_modules/@swimlane/ngx-ui/release/components/input/input-types.d.ts (2,12): In ambient enum declarations member initializer must be constant expression.

ERROR in /Users/alexanderkozhevin/Desktop/hypermedia/pheromone/node_modules/@swimlane/ngx-ui/release/components/input/input-types.d.ts (3,14): In ambient enum declarations member initializer must be constant expression.

ERROR in /Users/alexanderkozhevin/Desktop/hypermedia/pheromone/node_modules/@swimlane/ngx-ui/release/components/input/input-types.d.ts (4,16): In ambient enum declarations member initializer must be constant expression.

ERROR in /Users/alexanderkozhevin/Desktop/hypermedia/pheromone/node_modules/@swimlane/ngx-ui/release/components/input/input-types.d.ts (5,16): In ambient enum declarations member initializer must be constant expression.

ERROR in /Users/alexanderkozhevin/Desktop/hypermedia/pheromone/node_modules/@swimlane/ngx-ui/release/components/date-time/date-time.type.d.ts (2,12): In ambient enum declarations member initializer must be constant expression.

ERROR in /Users/alexanderkozhevin/Desktop/hypermedia/pheromone/node_modules/@swimlane/ngx-ui/release/components/date-time/date-time.type.d.ts (3,12): In ambient enum declarations member initializer must be constant expression.

ERROR in /Users/alexanderkozhevin/Desktop/hypermedia/pheromone/node_modules/@swimlane/ngx-ui/release/components/date-time/date-time.type.d.ts (4,16): In ambient enum declarations member initializer must be constant expression.

ERROR in /Users/alexanderkozhevin/Desktop/hypermedia/pheromone/node_modules/@swimlane/ngx-ui/release/components/notification/notification-style.type.d.ts (2,12): In ambient enum declarations member initializer must be constant expression.

ERROR in /Users/alexanderkozhevin/Desktop/hypermedia/pheromone/node_modules/@swimlane/ngx-ui/release/components/notification/notification-style.type.d.ts (3,15): In ambient enum declarations member initializer must be constant expression.

ERROR in /Users/alexanderkozhevin/Desktop/hypermedia/pheromone/node_modules/@swimlane/ngx-ui/release/components/notification/notification-style.type.d.ts (4,13): In ambient enum declarations member initializer must be constant expression.

ERROR in /Users/alexanderkozhevin/Desktop/hypermedia/pheromone/node_modules/@swimlane/ngx-ui/release/components/notification/notification-style.type.d.ts (5,15): In ambient enum declarations member initializer must be constant expression.

ERROR in /Users/alexanderkozhevin/Desktop/hypermedia/pheromone/node_modules/@swimlane/ngx-ui/release/components/notification/notification-style.type.d.ts (6,12): In ambient enum declarations member initializer must be constant expression.

Add free text input to single select component

Sometimes there are properties on a model that can either be selected from a predefined list, or input manually.

Building the UI for this use seems hacky with the current components, especially if we want to use a single model property, and not define additional ones.

It would be useful if the select component supported a free text input.

Spinner animation is skipping when heavy processing is done

The animation of the spinners is choppy and skips when there is heavy processing done at the same time. This can be noticed when you have the spinner running while the page is still loading.

@Hypercubed found out that this is caused by the problems described in this article:
https://blog.keanulee.com/2014/10/20/the-tale-of-three-spinners.html

We need to rewrite the spinner animations not to use dasharrays, and use something more performant instead.

Bug: SCSS not working with angular-cli

There doesn't seem to be any way of including .scss files without trying to generate webpack.conf.js; which is still not really supported by angular cli.

So I've just been trying to get a script working to compile them all to CSS then run some sed s/scss/css/g, but then I started getting:

{
  "status": 1,
  "file": "swimlane/ngx-ui/src/styles/forms/selects.scss",
  "line": 2,
  "column": 15,
  "message": "Undefined variable: \"$color-input-bg\".",
  "formatted": "Error: Undefined variable: \"$color-input-bg\".\n        on line 2 of src/styles/forms/selects.scss\n>>   background: $color-input-bg;\n   --------------^\n"
}

Which I begun to fix by adding some @import lines, then got:

{
  "status": 1,
  "file": "swimlane/ngx-ui/src/styles/fonts/index.scss",
  "line": 4,
  "column": 1,
  "message": "It's not clear which file to import for '@import \"icons\"'.\nCandidates:\n  icons.scss\n  icons.css\nPlease delete or rename all but one of these files.\n",
  "formatted": "Error: It's not clear which file to import for '@import \"icons\"'.\n       Candidates:\n         icons.scss\n         icons.css\n       Please delete or rename all but one of these files.\n        on line 4 of src/styles/fonts/index.scss\n>> @import \"icons\";\n   ^\n"
}

Here is the script for reference:

find src -type f -not -path '*node_modules*' -and -name '*.scss'
     -exec bash -c 'node-sass --include-path "./release/styles"
     --output-style compressed "$0" > "${0/scss/css}"' {} ';'

These errors suggest that there's an ordering to things, so I'd have to solve by having two trees, one for the scss and one for the css.

Want me to continue along these lines and send through a PATCH, or do you know a better way to use ngx-ui with SCSS using a standard angular-cli scaffold?

Possibly related: #15

Bug: clicking current on date select does not switch view to current day

If I am on a different month from today, when I click current it should take me to the current month where the current day is visible.

OnPush changeDetection breaks dropdown

If my component uses OnPush changeDetection, the ngx-dropdown components do not open/close

Bug: Select items are not reloaded on change

Current behavior: If I remove an option from the list of options after selecting it, it is still visible and I am able to select it again, which throws an error.

Expected behavior: If I remove an option from the list of options, it should disappear from the dropdown.

Note, I am defining the options declaratively:

 <ngx-select-option *ngFor="let role of roles" [name]="role.name" [value]="role.id"></ngx-select-option>

Investigate FlexLayout

Look at using https://github.com/angular/flex-layout by Angular team rather than suitcss.

Bug: Closing datepicker closes all overlays underneath

If I have a drawer open, and I open a datepicker inside of it, closing the datepicker will remove the drawer's overlay too.

AOT Error: Expected 'styles' to be an array of strings.

I have created an empty project with a repro of the issue:

https://github.com/RicardoVaranda/ngx-ui-aot-bug

I've simply added the drawer component as an example to the project and tried to

ng build --prod

or

ng server --aot=true

Here is the error stack:

ERROR in Expected 'styles' to be an array of strings.

ERROR in ./src/main.ts
Module not found: Error: Can't resolve './$$_gendir/app/app.module.ngfactory' in '/Users/ricardo_varanda/Projects/ngx-ui-aot-bug/src'
 @ ./src/main.ts 4:0-74
 @ multi webpack-dev-server/client?http://localhost:4200 ./src/main.ts

Seems to be related to webpack-contrib/style-loader#123

Investigate better approach for InjectionService

Reactive forms ExpressionChangedAfterItHasBeenCheckedError

Hi,
i tried to use ngx-input with form builder

<ngx-input type="text" [label]="'Name'" [autofocus]="true" formControlName="os" [hint]="'OS'" > </ngx-input>
every thing works but in the console the following error is begin thrown
InputComponent.html:2 ERROR Error: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after

with normal input there is no problem

Getting error about moment with latest

ERROR in node_modules/@swimlane/ngx-ui/release/components/calendar/calendar.component.d.ts(3,8): error TS1192: Module '"/Users/bostondevin/websites/ace/node_modules/moment/moment"' has no default export.
node_modules/@swimlane/ngx-ui/release/components/date-time/date-time.component.d.ts(3,8): error TS1192: Module '"/Users/bostondevin/websites/ace/node_modules/moment/moment"' has no default export.

Rich Text Editor

It would be great to add a Rich Text Editor to the list - for basic text functions like:

Bold, Italic, Super/SubScript, Underline, Special Symbols, Href tagging

[Angular 5] Bug: Update flex-layout to 2.0.0-beta.10

Hi,
Could you please update f@angular/flex-layout dependency to 2.0.0-beta.10
The old Renderer (instead of the new Rendered2) within @angular/flex-layout seems to break ngx-ui when upgrading to Angular 5.

Thanks!

Unable to get SplitModule working

Need some help to get the ngxSplit to be used. The css and the splitter is not rendering properly. Also the fxShow throws an error. Is there a stackblitz demo for just the ngxSplit Module?

Range-slider

Range slider is a typical component in every project, so it would be great if you add it.

Thanks in advance!

deep-linking

Would it be possible to enable deep-linking on the demo site, e.g. to ensure the menu links give distinct URLs? This would help for sharing, saving links to different parts, as well as to see which links lead to distinct pages.
On a related note, currently clicking on items in the colors category takes me to the page while I'd expect it to also scroll to the appropriate section. After this, I assumed this was the case for other categories as well, and hence skipped over icons not realizing it did have its own distinct section.

Angular 5 Drawer Issue

After upgrading from Angular 4 to 5, when trying to activate the drawer component we are getting the following log:

core.js:1350 ERROR TypeError: Cannot read property 'length' of undefined
    at InjectionService../src/index.ts.InjectionService.getRootViewContainer (index.js:41560)
    at InjectionService../src/index.ts.InjectionService.appendComponent (index.js:41652)
    at DrawerService../src/index.ts.InjectionRegisteryService.injectComponent (index.js:41719)
    at DrawerService../src/index.ts.InjectionRegisteryService.createByType (index.js:41691)
    at DrawerService../src/index.ts.InjectionRegisteryService.create (index.js:41687)
    at DrawerService../src/index.ts.DrawerService.create (index.js:44664)
    at VappInstanceCardComponent.openInfo (vapp-instance-card.component.ts:44)
    at Object.eval [as handleEvent] (VappInstanceCardComponent.ngfactory.js:89)
    at Object.handleEvent (core.js:13254)
    at Object.handleEvent (core.js:13981)

Light Theme

Add a stateful button

Implement a button that can be passed a promise, and changes its style based on the state of the promise:

States:

1. promise is undefined - normal
2. promise is created - in progress
3. promise is successful - success
4. promise fails - fail

It should animate between states.

Theming

Hey guys,

Would it be possible to provide us with a guide on how to theme the UI / components, I've been looking around but couldn't seem to find any.

Thanks for the great set of components! 👍

Hotkeys floating button not visible when --aot

If I build with --aot or server with --aot, the hotkeys floating button that sits in the bottom right of the screen does not get rendered. and the hotkeys no longer work

Better touch support

select filter bug

After filtering options and focus at list item through key up or key down, selects bad element

AoT Support

Things to accomplish this -

• Switch to style urls and template urls - https://github.com/AngularClass/angular2-webpack-starter/blob/master/src/app/home/home.component.ts#L17-L19
• Remove any manual event handlers and move to renderer

Refactor RegisteryService for abstract usage

Unexpected value 'undefined' imported by the module 'NgxUIModule

Got this error while using this module in an Angular 7 project. Used to worked perfectly with 21.7.0 version (all peerDependencies and module are correctly installed and declared).

Drawer Component Broken

ng -v:

    _                      _                 ____ _     ___
   / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
  / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
 / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
/_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
               |___/
@angular/cli: 1.2.0-beta.0
node: 6.10.3
os: darwin x64
@angular/animations: 4.2.2
@angular/common: 4.2.2
@angular/compiler: 4.2.2
@angular/core: 4.2.2
@angular/flex-layout: 2.0.0-beta.8
@angular/forms: 4.2.2
@angular/http: 4.2.2
@angular/material: 2.0.0-beta.6
@angular/platform-browser: 4.2.2
@angular/platform-browser-dynamic: 4.2.2
@angular/router: 4.2.2
@angular/cli: 1.2.0-beta.0
@angular/language-service: 4.2.2

Same code as the example here:
https://swimlane.github.io/ngx-ui/#drawer

Stack:

RROR Error: Unable to resolve animation metadata node #undefined
    at visitAnimationNode (browser.es5.js:833)
    at AnimationAstBuilderVisitor.webpackJsonp.../../../animations/@angular/animations/browser.es5.js.AnimationAstBuilderVisitor.build (browser.es5.js:952)
    at buildAnimationAst (browser.es5.js:934)
    at InjectableAnimationEngine.webpackJsonp.../../../animations/@angular/animations/browser.es5.js.AnimationEngine.registerTrigger (browser.es5.js:4495)
    at animations.es5.js:243
    at Array.forEach (<anonymous>)
    at AnimationRendererFactory.webpackJsonp.../../../platform-browser/@angular/platform-browser/animations.es5.js.AnimationRendererFactory.createRenderer (animations.es5.js:243)
    at DebugRendererFactory2.webpackJsonp.../../../core/@angular/core.es5.js.DebugRendererFactory2.createRenderer (core.es5.js:13567)
    at createComponentView (core.es5.js:12171)
    at callWithDebugContext (core.es5.js:13535)
View_DrawerComponent_Host_0 @ DrawerComponent_Host.html:1
proxyClass @ compiler.es5.js:14962
webpackJsonp.../../../core/@angular/core.es5.js.DebugContext_.logError @ core.es5.js:13475
webpackJsonp.../../../core/@angular/core.es5.js.ErrorHandler.handleError @ core.es5.js:1080
(anonymous) @ core.es5.js:9303
(anonymous) @ platform-browser.es5.js:2668
webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invokeTask @ zone.js:424
onInvokeTask @ core.es5.js:3924
webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invokeTask @ zone.js:423
webpackJsonp.../../../../zone.js/dist/zone.js.Zone.runTask @ zone.js:191
ZoneTask.invoke @ zone.js:486
DrawerComponent_Host.html:1 ERROR CONTEXT DebugContext_ {view: Object, nodeIndex: 0, nodeDef: Object, elDef: Object, elView: Object}

Problem:
Once I click to open the drawer I get the following stacktrace

Namespace ''@swimlane/dragula'' has no exported member 'DragulaOptions'

Getting this issue - using the latest Angular version (6.0.2)

ERROR in node_modules/@swimlane/ngx-dnd/release/services/drake-store.service.d.ts(21,35): error TS2694: Namespace ''@swimlane/dragula'' has no exported member 'DragulaOptions'

Can't install ngx-ui

When I use command npm i @swimlane/ngx-ui --S ,
It has error like this

npm ERR! path F:\workspace\ERPWorkspace\erpweb\node_modules@angular\flex-layout
npm ERR! code ENOENT
npm ERR! errno -4058
npm ERR! syscall rename
npm ERR! enoent ENOENT: no such file or directory, rename 'F:\workspace\ERPWorkspace\erpweb\node_modules@angular\flex-layout' -> 'F:\workspace\ERPWorkspace\erpweb\[email protected]'
npm ERR! enoent This is related to npm not being able to find a file.
npm ERR! enoent

npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\ittiwat123\AppData\Roaming\npm-cache_logs\2017-06-26T06_08_38_918Z-debug.log

• angular/cli: 1.1.3
• node: 8.1.2
• npm: 5.0.3
• os: win32 x64
• angular/animations: 4.2.4
• angular/common: 4.2.4
• angular/compiler: 4.2.4
• angular/core: 4.2.4
• angular/forms: 4.2.4
• angular/http: 4.2.4
• angular/platform-browser: 4.2.4
• angular/platform-browser-dynamic: 4.2.4
• angular/router: 4.2.4
• angular/compiler-cli: 4.2.4
• angular/language-service: 4.2.4

Add E2E tests using Cypress.io

Hi everyone,

What do you plan to do for E2E testing? Can I propose using https://www.cypress.io/ that is going to be open sourced soon and thus is a good match for this open source project?

I took liberty of writing a few tests against https://swimlane.github.io/ngx-ui/ and you can see the tests in https://github.com/bahmutov/e2e-ngx-ui repo.

The testing tool itself is a dev dependency, works on Mac and CI (Windows is coming) and you can just keep it running as you work with the code. A typical test for a form for example looks a lot like Mocha/Jasmine unit test

https://github.com/bahmutov/e2e-ngx-ui/blob/df7ede09e8af8d2e402fa5fdf89d9540f134e295/cypress/integration/basic-spec.js#L6-L14

  before(() => {
    cy.visit('/')
    cy.get('.page-loader')
      .should('not.be.visible', {timeout: 20000})
  })
  it("loads", () => {
    cy.contains("Angular Style and Component Library")
  })

There is huge number of commands and assertions included, plus the docs at https://docs.cypress.io are really good.

I setup CI on Circle, but any CI would work. We also have free dashboard for OSS projects which can store screenshots / test results / video recording of runs. For this project it is at https://dashboard.cypress.io/#/projects/psie99/runs

Videos of runs is really useful to debug failing CI tests

Let me know if this is something the project needs. The tests could be part of the swimlane/ngx-ui repo or some separate repo like swimlane/ngx-ui-e2e for example, whatever makes sense for you. We at Cypress would be happy to promote our free (and soon OSS) tool by helping people start E2E testing.

ngx-section standard classes...

In the Bootstrap library, on the panel component (which would map to the ngx-section component in your library) there are classNames that change the background color of the panel heading the same way buttons can be styled and themed:

panel-success
panel-info
panel-warning
panel-danger
etc...

Since your buttons have this, it would be great if the panels worked the same - keeping consistent with the bootstrap stuff.

Add null check in `showTooltip` method.

The showTooltip method invokes the addHideListeners method after a 10ms timeout. There are cases where the instance has been removed before the timeout is called... for example when clicking on a delete button that has a tooltip.

https://github.com/swimlane/ngx-ui/blob/master/src/components/tooltip/tooltip.directive.ts#L126

Refactor demo - split into pages

The demo page is becoming too big. Split each demo section into a separate page and add @angular/router.

Drawer Translation Safari bug

Hi, I found small bug with drawer. On safari 11.00

Getting error about moment-timezone with latest

Getting this anything version 24.0.0+

ERROR in node_modules/@swimlane/ngx-ui/lib/components/calendar/calendar.component.d.ts(3,20): error TS2307: Cannot find module 'moment-timezone'.
node_modules/@swimlane/ngx-ui/lib/components/date-time/date-time.component.d.ts(3,20): error TS2307: Cannot find module 'moment-timezone'.
node_modules/@swimlane/ngx-ui/lib/pipes/timezone.pipe.d.ts(2,25): error TS2307: Cannot find module 'moment-timezone'.

Close drawer on click

Is there a way to stop the drawer from closing on click

bug: ngx-ui does not work with angular-cli

node: v7.5.0
@angular/cli: 1.0.0-beta.30

just tried a 'ng new demo-app' and added ngx-ui ...

cd demo-app
npm i @swimlane/ngx-ui --S

as soon, as i add

import { NgxUIModule } from '@swimlane/ngx-ui';

to app.module.ts, the the cli outputs an

error ERROR in /developer/src/demo/src/app/app.module.ts (8,29): 
Cannot find module '@swimlane/ngx-ui'.)

calendar.component.scss not found AOT

I try to build with angular-cli using --prod --aot and i get the following error:

ENOENT: no such file or directory, open 'C:\Users\Stathis\WebstormProjects\xxxxx\node_modules\@swimlane\ngx-ui\release\components\calenda
r\calendar.component.scss' 

I can't find this scss file.

webpack throws this error:

ERROR in Expected 'styles' to be an array of strings.

ERROR in ./src/main.ts
Module not found: Error: Can't resolve './$$_gendir/app/client/app.module.ngfactory' in 'C:\Users\Stathis\WebstormProjects\xxxxx\src'
 @ ./src/main.ts 5:0-81
 @ multi ./src/main.ts

If I run in development mode there is no error.

What am I missing here?

Node process uses a lot of CPU when in dev mode

Nice project, very inspiring as I'm building a set of custom components too :)

On thing I noticed when running it using npm start is that there was a node process that never got below 70% CPU usage.

I found that this line causes that behavior. The app seemed to keep working when I uncommented it, so I'm not sure if it's needed.

How to use Progress Spinner

How to use Progress Spinner? I use the demo code about Progress Spinner but can not show anything

Drawer usage with Component instead of template

Is there support for passing Components to drawers, or is it only templates?

Dialog box doesn't close after opening

See: http://screencast.com/t/DHHLLwZf6S

Per: @codycornell

Notification icons are not shown.

Hi
When using notification component its icons are not showing.Seems like missing icons.
here is how notification looks like:
https://image.ibb.co/b40BVn/icon_Issue.png
When inspecting html of notification I notice
after <span class = "icon icon-check-filled ng-star-inserted"> </span> , :before is missing.
Am I missing something?
Angular version: 5.2
ngx-ui version: 20 (also tried v19)
Thanks in advance

Flex-layout producing errors with Angular 7

node_modules/@swimlane/ngx-ui/node_modules/@angular/flex-layout/core/typings/match-media/mock/mock-match-media.d.ts(62,22): error TS2420: Class 'MockMediaQueryList' incorrectly implements interface 'MediaQueryList'.
Property 'onchange' is missing in type 'MockMediaQueryList'.
node_modules/@swimlane/ngx-ui/node_modules/@angular/flex-layout/core/typings/match-media/mock/mock-match-media.d.ts(79,27): error TS2304: Cannot find name 'MediaQueryListListener'.
node_modules/@swimlane/ngx-ui/node_modules/@angular/flex-layout/core/typings/match-media/mock/mock-match-media.d.ts(81,23): error TS2304: Cannot find name 'MediaQueryListListener'.
node_modules/@swimlane/ngx-ui/node_modules/@angular/flex-layout/core/typings/match-media/server-match-media.d.ts(11,22): error TS2420: Class 'ServerMediaQueryList' incorrectly implements interface 'MediaQueryList'.
Property 'onchange' is missing in type 'ServerMediaQueryList'.
node_modules/@swimlane/ngx-ui/node_modules/@angular/flex-layout/core/typings/match-media/server-match-media.d.ts(28,27): error TS2304: Cannot find name 'MediaQueryListListener'.
node_modules/@swimlane/ngx-ui/node_modules/@angular/flex-layout/core/typings/match-media/server-match-media.d.ts(30,23): error TS2304: Cannot find name 'MediaQueryListListener'.
node_modules/@swimlane/ngx-ui/node_modules/@angular/flex-layout/core/typings/match-media/server-match-media.d.ts(42,15): error TS2416: Property '_registry' in type 'ServerMatchMedia' is not assignable to the same property in base type 'MatchMedia'.
Type 'Map<string, ServerMediaQueryList>' is not assignable to type 'Map<string, MediaQueryList>'.
Type 'ServerMediaQueryList' is not assignable to type 'MediaQueryList'.
Property 'onchange' is missing in type 'ServerMediaQueryList'.
node_modules/@swimlane/ngx-ui/node_modules/@angular/flex-layout/core/typings/match-media/server-match-media.d.ts(54,15): error TS2416: Property '_buildMQL' in type 'ServerMatchMedia' is not assignable to the same property in base type 'MatchMedia'.
Type '(query: string) => ServerMediaQueryList' is not assignable to type '(query: string) => MediaQueryList'.
Type 'ServerMediaQueryList' is not assignable to type 'MediaQueryList'.
node_modules/@swimlane/ngx-ui/node_modules/@angular/flex-layout/core/typings/observable-media/observable-media.d.ts(11,14): error TS2416: Property 'subscribe' in type 'ObservableMedia' is not assignable to the same property in base type 'Subscribable'.
Type '(next?: (value: MediaChange) => void, error?: (error: any) => void, complete?: () => void) => Subscription' is not assignable to type '{ (observer?: PartialObserver): Unsubscribable; (next?: (value: MediaChange) => void, error?: (error: any) => void, complete?: () => void): Unsubscribable; }'.
Types of parameters 'next' and 'observer' are incompatible.
Type 'PartialObserver' is not assignable to type '(value: MediaChange) => void'.
Type 'NextObserver' is not assignable to type '(value: MediaChange) => void'.
Type 'NextObserver' provides no match for the signature '(value: MediaChange): void'.

ngx-select icon in dropdown?

Hey - is it possible to add an icon to the options in the dropdown menu?

I couldn't find an override template

Great stuff!

StaticInjectorError[MediaMonitor] in date-time component - Flex Layout issue?

I'm getting this error which is referring to flex layout in your Date time component. Using the latest Angular/Node versions along with Flex layout - maybe try updating Flex Layout? They had some recent changes for the latest Angular 5 stuff

date-time.component.d.ts.DateTimeComponent.html:107 ERROR Error: StaticInjectorError[MediaMonitor]:
StaticInjectorError[MediaMonitor]:
NullInjectorError: No provider for MediaMonitor!
at NullInjector.get (core.js:993)
at resolveToken (core.js:1281)
at tryResolveToken (core.js:1223)
at StaticInjector.get (core.js:1094)
at resolveToken (core.js:1281)
at tryResolveToken (core.js:1223)
at StaticInjector.get (core.js:1094)
at resolveNgModuleDep (core.js:10878)
at NgModuleRef.get (core.js:12110)
at resolveDep (core.js:12608)