Tyatech-nebular NPM

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!

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.

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

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.

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