tyatech-nebular

Tyatech Nebular

Installation

npm i tyatech-nebular

Recommend using Angular version 12.2.17 or higher.
Recommend to use Nebular version 8.0.0 or higher.

New Features!

• The Vietnamese number format on input cards is based on Nebular.
• Embed Vietnamese number format in input card.
• Autocomplete.
• Generate QR Code.

Contributions

Contributions are very welcome! It helps me know what features are desired or what bugs are causing the most pain.

I have just one request; If you submit a pull request for a bugfix, please add a unit-test or integration-test (in the spec folder) that catches the problem. Even a PR that just has a failing test is fine - I can analyse what the test is doing and fix the code from that.

Note: Please try to avoid modifying the package version in a PR. Versions are updated on release and any change will most likely result in merge collisions.

To be clear, all contributions added to this library will be included in the library's MIT licence.

Contents

Format Vietnamese numbers on input cards on Nebular
Format Vietnamese numbers on input card
Autocomplete
Generate QR Code

Format Vietnamese numbers on input cards on Nebular⬆

Import module

import { TyaNumberVnInputModule } from 'tyatech-nebular';
...

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

HTML:

<ngx-tya-number-vn-input
  [value]="100300490" 
  [statusInput]="'basic'"
  (changeValue)="retunr($event)"
  [disabled]="false"
></ngx-tya-number-vn-input>

[value] : Input value
[statusInput] : Color status

• basic
• primary
• success
• info
• warning
• danger
• control

(changeValue) : Numeric return value | catch the valueChange event
[disabled] : Disabled input

Format Vietnamese numbers on input card⬆

Import module

import { TyaDirectivesModule } from 'tyatech-nebular';
...

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

HTML:

<input TyaNumberVNInput/>

Autocomplete⬆

Import module

import { TyaAutocompleteModule } from 'tyatech-nebular';
...

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

HTML:

<ngx-tya-autocomplete
  [data]="lstDataKey"
  key="key"
  value="value"
  fullWidth="true"
  status="basic"
  placeholder="Enter value"
  [isWarning]="true"
  nbPopoverPlacement="top"
  warningContent="Data entered incorrectly"
  messageNoData="No data"
  (valueChange)="returnAutoComlete($event)"
></ngx-tya-autocomplete>

[data] : List data
[key] : Key data field
[value] : Display content data field
[fullWidth] : If set element will fill container. false by default.
[status] : Color status. basic by default.

• basic
• primary
• success
• info
• warning
• danger
• control

[placeholder] : placeholder
[isWarning] : Is there a warning. true by default.
[nbPopoverPlacement] : Popover location. top by default.
[warningContent] : warning content. Data entered incorrectly by default.
[messageNoData] : message no data. No data by default.
(valueChange) : returns the selected primary key | catch the valueChange event

Component

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'ngx-demo',
  templateUrl: './demo.component.html',
  styleUrls: ['./demo.component.scss']
})
export class DemoComponent implements OnInit {

  lstDataKey: Partial<Array<{ key: string, value: string }>> = [];

  constructor() { }

  ngOnInit(): void {
    this.lstDataKey = [
      {
        key: '1',
        value: 'Option 1'
      },
      {
        key: '2',
        value: 'Option 2'
      },
      {
        key: '3',
        value: 'Option 3'
      }
    ];
  }

  returnAutoComlete(e) {
    console.log(e); //return key
  }
}

Generate QR Code⬆

Import module

import { TyaQrcodeModule } from 'tyatech-nebular';
...

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

HTML:

<ngx-tya-qrcode
  contentQR="https://www.google.com"
  [width]="256"
  colorQR="#000000ff"
  colorBackground="#ffffffff"
  [scale]="4"
  [margin]="4"
></ngx-tya-qrcode>

[contentQR] : Content of QR CODE. No data by default.
[width] : Width of QR code. 256 by default.
[colorQR] : Color of QR Code. #000000ff by default.
[colorBackground] : Color of the Background. #ffffffff by default.
[scale] : Scale factor. A value of 1 means 1px per modules (black dots). 4 by default.
[margin] : Define how much wide the quiet zone should be. 4 by default.
[cssClass] : CSS Class. qrcode by default.

*Hover mouse over qr code to download