da-ui-input

v1.0.28

Published

2 months ago

> **Angular UI Components Library** > Author: CuongLe > License: MIT

0High
0Medium
0Low

lecuong0704

da-theme

Angular UI Components Library
Author: CuongLe
License: MIT

Overview

da-theme is an Angular UI component library providing customizable, easy-to-use input components for building modern forms. It supports both Reactive Forms and Template-driven Forms, and includes:

Text input
Number input
Textarea
Checkbox
Radio button
Select dropdown
Tags input

Installation

npm install da-ui-input

Required Dependencies

Install Bootstrap and Bootstrap Datepicker:

npm install bootstrap@^5.3.8 bootstrap-datepicker@^1.10.1 jquery

Usage

Import the module in your app:

import { DaThemeModule } from 'da-ui-input';

@NgModule({
  imports: [DaThemeModule]
})
export class AppModule {}

Or import standalone components:

import { DaInputText } from 'da-ui-input';

Add global styles

To apply library styles globally, add the library stylesheet to your Angular project's angular.json. Edit the build options for your application and include the stylesheet path in the styles array (use the relative path starting with ./node_modules as shown):

Example (angular.json snippet):

{
  "projects": {
    "<your-app-name>": {
      "architect": {
        "build": {
          "options": {
            "styles": [
              "node_modules/bootstrap/dist/css/bootstrap.min.css",
              "node_modules/bootstrap-datepicker/dist/css/bootstrap-datepicker.min.css",
              "node_modules/da-ui-input/assets/styles/styles.scss"
            ],
            "scripts": [
              "node_modules/jquery/dist/jquery.min.js",
              "node_modules/bootstrap/dist/js/bootstrap.bundle.min.js",
              "node_modules/bootstrap-datepicker/dist/js/bootstrap-datepicker.min.js"
            ]
          }
        }
      }
    }
  }
}

Important notes:

Bootstrap is required for basic styling and components
Bootstrap Datepicker is required for date picker functionality
jQuery is required by Bootstrap Datepicker
The order of scripts is important - jQuery must be loaded before Bootstrap
Restart ng serve after modifying angular.json

Global Configuration

You can provide a global configuration for all da-theme components using Angular's dependency injection.
Create a config object and provide it in your app module:

import { DA_CONFIG, DaConfig } from 'da-ui-input';

const daThemeConfig: DaConfig = {
  customClass: 'my-custom-theme', // Optional: global custom CSS class
  theme: 'pink'                   // Optional: 'default' | 'pink'
};

@NgModule({
  providers: [
    { provide: DA_CONFIG, useValue: daThemeConfig }
  ]
})
export class AppModule {}

Or use forRoot:

import { DaThemeModule } from 'da-ui-input';

@NgModule({
  imports: [
    DaThemeModule.forRoot({
      customClass: 'my-custom-theme',
      theme: 'pink'
    })
  ]
})
export class AppModule {}

Config options:

| Option | Type | Description | |---------------|----------------------------|---------------------------------------------| | customClass | string (optional) | Custom CSS class applied to all components | | theme | 'default' | 'pink' | Theme style for all components |

Example

<form [formGroup]="form">
  <da-input-text formControlName="fullname" label="Full Name" placeholder="Enter full name"></da-input-text>
  <da-input-number formControlName="age" label="Age" placeholder="Enter age" [readonly]="true"></da-input-number>
  <da-textarea formControlName="description" label="Description" [rows]="3"></da-textarea>
  <da-checkbox formControlName="redHair" label="Red Hair"></da-checkbox>
  <da-radio formControlName="sex" label="Male" inputValue="male"></da-radio>
  <da-radio formControlName="sex" label="Female" inputValue="female"></da-radio>
  <da-select
    [options]="[
      { label: 'New York', value: 'NY' },
      { label: 'San Francisco', value: 'SF' },
      { label: 'Los Angeles', value: 'LA' }
    ]"
    formControlName="city"
    label="City"
    placeholder="Select city"
    (valueChange)="onCityChange($event)">
  </da-select>
  <da-tags
    formControlName="tags"
    label="Tags"
    placeholder="Add tag"
    [readonly]="false"
    [maxTags]="5"
    [removable]="true"
    (tagsChange)="onTagsChange($event)">
  </da-tags>
   <da-daterangepicker
    formControlName="dateRange"
    label="Date Range"
    placeholder="Select dates"
    [multiPicker]="true"
    [showActionBtns]="true"
    applyText="Apply"
    cancelText="Cancel">
  </da-daterangepicker>

  <da-datepicker
    formControlName="date"
    label="Date"
    placeholder="Select date">
  </da-datepicker>
</form>

Using with UntypedFormGroup (example)

Initialize an UntypedFormGroup with clear, English default values:

import { Component } from '@angular/core';
import { UntypedFormBuilder, UntypedFormGroup, Validators } from '@angular/forms';

@Component({ selector: 'app-root', templateUrl: './app.component.html' })
export class AppComponent {
  isReadonly = false;

  form: UntypedFormGroup = this.formBuilder.group({
    age: [{ value: 30, disabled: false }, [Validators.required, Validators.min(18)]],
    fullname: ['Jane Doe', [Validators.required]],
    address: [{ value: '123 Main St, Springfield', disabled: true }, []],
    height: [{ value: 170, disabled: false }, [Validators.min(0)]],
    phonenumber: [{ value: '+1-555-0100', disabled: false }, []],
    description: [{ value: 'This is a sample description', disabled: false }, []],
    note: [{ value: 'Sample note', disabled: false }, []],
    married: [{ value: false, disabled: false }, []],
    redHair: [{ value: false, disabled: false }, []],
    sex: [{ value: 'female', disabled: false }, []],
    city: [{ value: 'NY', disabled: false }, []],
    tags: [{ value: ['travel'], disabled: false }, []] // tags control holds array of strings
    dateRange: [[new Date(), new Date()]], // For date range picker
    date: [new Date()], // For single date picker
  });

  constructor(private formBuilder: UntypedFormBuilder) {}
 
}

Notes:

The phonenumber value shown is a placeholder sample number; replace with your real contact if needed.
tags control stores an array of strings (e.g. ['travel', 'work']).
When components emit events like valueChange or tagsChange, keep the form control synced if the component does not update the control automatically.

Component Options

`<da-input-text>`

| Input | Type | Default | Description | |---------------|-----------|-----------|-----------------------------------| | label | string | | Label for the input | | class | string | | Custom class for the input | | placeholder | string | | Placeholder text | | readonly | boolean | false | Set input as readonly | | id | string | | Custom input id |