@lifeai/la-ngx-library NPM

la-ngx-library - Sample component library of one awesome development team

Status

click on a label to see issues

Label	Description
not-started	Work on issue/component is not yet started
in-progress	Work in progress
pull-request-pending	Pull request has been created and is waiting for peer review
finished	Work on issue is finished, but may not yet be included into library release
deployed	Component is now a part of the library release, and can be used by other users
in-use	Component is being used in the Web frontend at least on one screen

Demo

View all the directives in action at https://LIFEAI.github.io/la-ngx-library

How To Videos

la-ngx-library Overview
- Library overview
- Wiki
- Git Issues
- components as modules
- src, tmp, dist, demo folders
- gulpfile.js - example
- angular.json - example
- How to work with Zeplin, SCSS module for Zeplin, colors, icons
la-ngx-library live coding icons release
- Live coding on icon component
- working with SVG icons, optimizing, making SVG sprites, fixing SVG icons
- How to make new library release, demo, docs, npmjs

Dependencies

Angular (requires Angular 2 or higher, tested with 2.0.0)

Installation

Install above dependencies via npm.

Now install @lifeai/la-ngx-library via:

npm install --save @lifeai/la-ngx-library

SystemJS

Note:If you are using SystemJS, you should adjust your configuration to point to the UMD bundle. In your systemjs config file, map needs to tell the System loader where to look for la-ngx-library:
map: {
  'la-ngx-library': 'node_modules/@lifeai/la-ngx-library/bundles/la-ngx-library.umd.js',
}

Once installed you need to import the main module:

import { LaButtonModule } from '@lifeai/la-ngx-library';

The only remaining part is to list the imported module in your application module. The exact method will be slightly different for the root (top-level) module for which you should end up with the code similar to (notice LaButtonModule .forRoot()):

import { LaButtonModule } from '@lifeai/la-ngx-library';

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

Other modules in your application can simply import LaButtonModule:

import { LaButtonModule } from '@lifeai/la-ngx-library';

@NgModule({
  declarations: [OtherComponent, ...],
  imports: [LaButtonModule, ...], 
})
export class OtherModule {
}

Add Support for Icons

update your angular.json to ship library icons during build

"assets": [
  ...,
  {
    "glob": "**/*",
    "input": "./node_modules/@lifeai/la-ngx-library/assets/",
    "output": "./assets/"
  },
  {
    "glob": "**/*",
    "input": "./node_modules/@lifeai/la-ngx-library/sprites/",
    "output": "./assets/"
  }
],
"styles": [
  ...,
  "node_modules/@lifeai/la-ngx-library/style/colors.scss",
  ...,
  "src/styles.scss"
],

Usage

Button

<la-button [kind]="'primary'" [isDisabled]="true" [isHover]="true" [isWide]="true">Button</la-button>

Empty State

 <la-empty [name]="'messages'">
          <la-text [kind]="'title-2'">No Items found</la-text>
          <la-text [kind]="'title-2'">Create new message to start filling up space</la-text>
 </la-empty>