LightComponents

1. Install library to your project npm install light-components
2. Import to your module

import { LightComponentsModule } from 'light-components' add it to imports:

@NgModule({
  imports: [
    ...
    LightComponentsModule,
  ],
})

3. And use in template:

<form-select label="Some label" [(value)]="<some variable>"></form-select>

Available props:

• dense: boolean - small component
• type: input type - input type
• outline: boolean - add border
• rules: Array - validation rules (for custom rules)
• error: string - error message(for example, to display backend error)

Icon usage

<icon name=""></icon>

Name should be one of mdi icons

Alert usage:

1. Add dependency injection

constructor(private alert: AlertService) {}

2. add alert component to your template

<app-alert></app-alert>

3. Usage:

alert.showSuccess(message?: string);
alert.showError(message?: string)
alert.showInfo(message?: string)
alert.showWarning(message?: string)

Form validation

1. Include validated fields into <lib-form>...</lib-form> block and ad ref #form (or other name).

<lib-form #form>
  <form-input
    label="Name"
    dense
    outline
    [(value)]="model.name"
    [rules]="[max(20), min(3), required]"
  ></form-input>
  <file-uploader
    label="Avatar"
    dense
    outline
    [(value)]="model.avatar"
    [rules]="[required]"
  ></file-uploader>
  <form-select
    label="Country"
    dense
    outline
    [items]="items"
    [(value)]="model.country"
    [rules]="[required]"
  ></form-select>
  <button (click)="submit()">Submit</button>
</lib-form>

• add viewChild for this component:

export class AppComponent {
    @ViewChild('form')
    form: any;
    ...
}

• next validate form and do something:

 submit() {
    if (this.form.validate()) {
      // do something if valid form
    }
  }

In case if form is not valid, there was shown errors.

has multiple prop

usage

<form-select multiple></form-select>

<form-select></form-select> has returnObject prop. It allows for get full selected object instead of item value only

usage

<form-select returnObject></form-select>

What's news?

Compress icons size from 4.5MB to 350KB