ngxi4-dynamic-service

Ngxi4DynamicService

This library was generated by Doan Quoc Cuong ([e-mail]) with Angular CLI version 8.2.13.

Install:

• Run npm to get service for using.

npm install ngxi4-dynamic-service --save

• Run npm to install include extra javascript.

npm install croppie crypto-js exif-js simple-crypto-js --save

• install include extra components, service, providers.

npm install ngx-barcode@0.2.4 ngx-image-cropper ngx-qrcode2@0.0.9 ngx-webcam@0.2.6 --save
# version "ng-multiselect-dropdown": "^0.2.10"
npm i ng-multiselect-dropdown@latest --save

npm i ngx-webstorage-service --save

• install include @ionic/native --save

npm install @ionic-native/sqlite  --save

Use:

1. add in ./app.module.ts

import { Ngxi4DynamicServiceModule } from 'ngxi4-dynamic-service'

@NgModule({
  // ...
  imports: [
    
    // ....

    // add module ngxi4-dynamic-service
    Ngxi4DynamicServiceModule.forRoot()
    // or define authServerUrl link to your api server
    // Ngxi4DynamicServiceModule.forRoot({ authServerUrl: 'https://xyz.com/auth'})
  ]
})

Or fix URL:

import { Ngxi4DynamicServiceModule } from 'ngxi4-dynamic-service'

@NgModule({
  // ...
  imports: [
    //...,
    Ngxi4DynamicServiceModule.forRoot({ 
      AUTH_SERVER: 'https://xyz.com/auth',       // auth server
      MEDIA_SERVER: 'https://xyz.com/media',     //  media server
      RESOURCE_SERVER: 'https://xyz.com/resource', // resource server
      SOCKET_SERVER: 'https://xyz.com/socket',    // socket.io server
      NEWS_SERVER: 'https://xyz.com/news',      //  social server
      })
  ]
})

2. user some card in html page then add in ./.module.ts:

import { Ngxi4DynamicServiceModule } from 'ngxi4-dynamic-service'

@NgModule({
  // ...
  imports: [
    // ....
    // add module ngxi4-dynamic-service
    Ngxi4DynamicServiceModule
  ]
})

3. user some card for input in html page then add in ./.page.html:

<ion-content>
    <card-dynamic-form 
    [dynamicFormInput]="dynamicFormInput"
    [dynamicFormValue]="dynamicFormValue"
    [dynamicCallback]="dynamicCallback"
    (onSelectedFinish)="onSelectedFinish($event)"
    ></card-dynamic-form>

    <card-dynamic-list
    [dynamicFormInput]="dynamicFormInput"
    [dynamicFormValue]="dynamicFormValue"
    [dynamicCallback]="dynamicCallback"
    (onSelectedFinish)="onSelectedFinish($event)"
    ></card-dynamic-list>

    <card-multi-check
    [dynamicForm]="dynamicForm"
    (onSelectedFinish)="onSelectedFinish($event)"
    ></card-multi-check>
</ion-content>

• With callback for card (for dynamic form see in if (req.ajax)):

export class IdeaPage implements OnInit {
  // form cần tạo chèn ở đây:
  dynamicFormInput: string = JSON.stringify({ // Form mẫu hiển thị nhập liệu tạo đối tượng jon_data
    okButton: { icon: "save", name: "Thêm mới", color: "secondary", next: "CALLBACK", command: "ADD" }
    ,
    cancelButton: { icon: "close", next: "CLOSE" }
    ,
    items: [
      // Danh sách các trường nhập liệu
      // có thể gán luôn giá trị mặc định value:'xyz'
      { type: "text", key: "name", name: "Tên hiển thị(*)", hint: "Nhập tên hiển thị trên list", input_type: "text", icon: "information-circle", validators: [{ required: true }] }
      , { type: "text", key: "value", name: "giá trị", hint: "Nhập tên giá trị", input_type: "number", icon: "information-circle" }
      , { type: "image", key: "image", name: "Ảnh hiển thị", hint: "Chọn ảnh" }
    ]
  })

  // Giá trị mặt định ở đây
  // với properties là giá trị của trường key ở form
  dynamicFormValue: any = JSON.stringify(
    {
      name: 'Dccc',
      value: '122'
    }
  );

  // Hàm gọi lại khi thay đổi giá trị select để thay đổi giá trị trên form
  dynamicCallback = (ajaxItem)=>{
    return new Promise(resolve=>{
      ajaxReturn = {key:'nameOfKey', 
      property_name:'name of property', 
      new_data:'new value of property',
       ...$del_key,  // xóa thuộc tính key
       ...$edit_key, // sửa key mới
       ...$new_key   // tạo thuộc tính key mới key = $new_key
       }
      // or 
      // ajaxReturns = [{...ajaxReturn}]

      resolve(ajaxReturn);
    })
  }


  // Hàm khai báo nhận kết quả xử lý trả về của form khi kết thúc
  onSelectedFinish(event){
    
  }

}

4. Use for services/providers in ./.page.ts

import { AuthService, CommonsService } from 'ngxi4-dynamic-service';

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage implements OnInit{

  // import service to use
  constructor(
    
    // for public Link to cloud with token include:
    // getDynamicUrl = get 
    // postDynamicJson = post json 
    // postDynamicFormData = post form data
    // some function for security:
    // sha256 / Utf8toHex / HextoUtf8 / Base64toUtf8
    // encryptTextCypto / decryptTextCrypto
    private apiAuth: AuthService

    // for alert, comfirm, loading, popup modal
    // tree utils from array
    // private modalCtrl: ModalController
    // , private alertCtrl: AlertController
    // , private loadingCtrl: LoadingController
    // , private toastCtrl: ToastController
    // delay,...
    , private apiCommon: CommonsService 

    // for Save to dish save / read / delete key in browser or app
    , private apiStorage: ApiStorageService

    // process image (resize, convert base64 
    // or file blob, canvas...)
    , private apiImage: ImageService

    // sql to db in app for sqlite... mobile app
    , private apiSqlite: SqliteService
    ) {}

  ngOnInit() {
    
    // loading...
    this.apiCommons.showLoader('waiting for get from clound....')

    // call get service
    this.apiAuth.getDynamicUrl(this.apiAuth.serviceUrls.AUTH_SERVER + "/captcha-token")
    .then(data => {

      // loading finish
      this.apiCommons.hideLoader();
      console.log('data', data);
    })
    .catch(err => {

      // loading finish
      this.apiCommons.hideLoader();
      console.log('error', err);

      // popup alert service
      this.apiCommon.presentAlert('Error', err.message);

    })
  }

}

5. use popupModal Component for input value and post json_data ex: login.page.ts:

import { CommonsService, AuthService, DynamicFormMobilePage } from 'ngxi4-dynamic-service';

//... 
export class LoginPage implements OnInit {
  // ...
  constructor(
    private apiCommons: CommonsService
    , private apiAuth: AuthService 
  ) { }

  ngOnInit() {
   //...

  }

  login() {

    let form = {
      title: 'Login'
      , buttons: [
        { color: 'danger', icon: 'close', next: 'CLOSE' }
      ]

      , items: [
        { type: 'title', name: 'Put phone number as username' }
        ,
        // form login gồm nhập số điện thoại username và pass
        { type: 'text'              // input text
          , key: 'username'         // json_key + value input ==> {username:value}
          , value: ''               // default value
          , name: 'Phone number'  
          , hint: 'Phone number by 9 digit'
          , input_type: 'userName'          // input type as ionic
          , icon: 'information-circle'      // icon of ionic list
          // validators for data input 
          , validators: [{ required: true, min: 9, max: 9, pattern: '^[0-9]*$' }] 
        }
        ,
        // buttons for command process after input data
        {
          type: 'button'
          , options: [
            {
              name: 'Accept'    // button name
              , next: 'CALLBACK'  // callback get resulte or json
              // link to post json_data {username:value}
              , url: this.apiAuth.serviceUrls.AUTH_SERVER + '/request-username'
              , token: true // token login before interceptor or token string
              , command: 'LOGIN' // extra parameter for callback process
            }
          ]
        }
      ]
    }

    // call popup window for form login
    this.apiCommons.openModal(DynamicFormMobilePage, 
    {
      parent: this,  // for dismiss child component
      callback: this.callbackLogin, //function for callback process result of form
      form: form    // form dynamic 
    }
    );

  }

  callbackLogin = function (res) {
    // allway return Promise for callback
    return new Promise<any>((resolve, reject) => {

      if (res.error) {
        //If error 
        this.apiCommons.presentAlert('Error:<br>' + (res.message ? res.message : "Error Unknow: " + JSON.stringify(res.error, null, 2)));

      } else if (res.ajax) {
        // callback for ajax replace form when select {key:'nameOfKey', value:"expected value change"}
          ajaxReturn = {key:'nameOfKey', 
          property_name:'name of property ex: value', 
          new_data:'new value of property_name',
          //or $del_key,  // xóa thuộc tính key
          //or $edit_key, // sửa key mới
          //or $new_key   // tạo thuộc tính key mới key = $new_key
          }
          // or 
          // ajaxReturns = [{...ajaxReturn}]
          resolve(ajaxReturn);
          return;
      } else if (res.response_data) {
        // Data return when server response or sqlite app respone
        // next="CALLBACK", url="http://..." [,token: true | wzI...]

      } else if (res.json_data) { 
        // Data return when finish form no url to post
        // next="CALLBACK" no url
        // for change data before post;
        if (res.button.command === "LOGIN") {
          // Do any for command

        }

      } else {
        // 

      }

      // close form
      resolve({ next: "CLOSE" }); 

    });
  }.bind(this);
  

6. Popover menu ex: settings or multi selected:

import { CommonsService } from 'ngxi4-dynamic-service';

export class LoginPage implements OnInit {

// ...
constructor(
    private apiCommons: CommonsService
  ) { }

async settings(ev: any) {

    // list setting menu with value select
    let settingsMenu = [
      {
        name: "Send sms"
        , value: "SEND-SMS"
        , isChecked: true // Giá trị đã chọn mặc định trước đó
        , icon: {
          name: "mail"
          , color: "primary"
        }
      }
      ,
      {
        name: "Call 3C"
        , value: "CALL-3C" 
        , icon: {
          name: "call"
          , color: "danger"
        }
      }
      ,
      {
        name: "CALL AI"
        , value: "CALL-AI"
        , icon: {
          name: "megaphone"
          , color: "danger"
        }
      }
    ]

    this.apiCommons.presentPopover(
      ev
      ,PopoverCardComponent
      ,{
        type: 'single-choice', // or 'multi-choice'
        title: "Setting",
        color: "secondary",
        menu: settingsMenu
      })
    .then(data=>{
      this.processDetails(data);
    })
    .catch(err => {
      console.log('err: ',err);
    });
  }


  // return object or array from form select 
  processDetails(itemOrItems: any) {

    if (Array.isArray(itemOrItems)) {
      // chọn danh sách được nhiều
      itemOrItems.forEach(el => {
        if (el.isChecked) {
          console.log(el.value);
        }
      })
    }else{
      // get command
      let cmd = itemOrItems.value;
      if (cmd === 'SEND-SMS') {
        //  do send
       
      }
    }
  }
}

7. Data sample for Form dynamic or Card dynamic :

let form = 
  {
    // title for form
    title: "Form mẫu"

    // auto submit form default false or delay
    //, auto_hidden: false //|| 3000 || true
    
    // color for header and backgroud form
    , color: { header:"medium", background:"#2d96de"}

    // buttons in header
    , buttons: [
      { color: "danger", icon: "close", next: "CLOSE" }
    ]
    // items for post
    // type, key, value, name, hint, options, ... validators, 
    , items: [
      { type: "avatar", name: "Thông tin cá nhân avatar", hint: "Avatar", url: "https://www.w3schools.com/howto/img_forest.jpg" }
      , { type: "title", name: "Tiêu đề form" }
      , { type: "qrcode", name: "Mã QrCode", value:"https://c3.mobifone.vn" }
      , { type: "barcode", name: "Mã BarCode", value:"0903500888" }
      , { type: "hidden", key: "id", value: "abc" } //truyen gia tri 
      , { type: "check", key: "check_ok", name: "Check hay không chọn?", value: true }
      , { type: "range", key: "range_number", name: "", icon: "contrast", value: 50, min: 0, max: 100 }
      , { type: "range-text", key: "range_text", name: "Kéo chọn", icon: "contrast", value: 50, min: 0, max: 100 }
      , { type: "toggle", key: "check_toggle", name: "Chọn hay không chọn Toggle?", icon: "call" }
      , { type: "radio", key: "select_radio", name: "Chọn radio cái nào", icon: "call", value: 2, options: [{ name: "Tùy chọn 1", value: 1 }, { name: "Tùy chọn 2", value: 2 }] }
      
      , { type: "select-origin", key: "select_1", name: "Chọn 1 cái nào", value: 2, options: [{ name: "Tùy chọn 1", value: 1 }, { name: "Tùy chọn 2", value: 2 }] }
      , { type: "select-multiple-origin", key: "select_n", name: "Chọn nhiều cái nào", value: 2, options: [{ name: "Tùy chọn 1", value: 1 }, { name: "Tùy chọn 2", value: 2 }] }
      , {
        type: "select"
        , key: "select_1"
        , name: "Hãy chọn và cho phép lọc"
        , value: 1              // biến đã map ra value rồi
        , selected_values: []   // biến lấy theo mảng đối tượng
        , settings: this.defaultSingleSelectSettings
        , options: [{ name: "Tùy chọn 1", value: 1 }, { name: "Tùy chọn 2", value: 2 }]
      }
      , {
        type: "select_multiple"
        , key: "select_x"
        , name: "Hãy chọn và cho phép lọc"
        , value: [1, 2]         // biến đã map ra value rồi
        , selected_values: []   // biến lấy theo mảng đối tượng
        , settings: this.defaultMultiSelectSettings
        , options: [{ name: "Tùy chọn 1", value: 1 }, { name: "Tùy chọn 2", value: 2 }]
      }

      , { type: "image", name: "Ảnh cá nhân", hint: "image viewer", url: "https://www.w3schools.com/howto/img_forest.jpg" }
      , { type: "text", key: "username", disabled: true, name: "username", hint: "Số điện thoại di động 9 số bỏ số 0 ở đầu", input_type: "userName", icon: "information-circle", validators: [{ required: true, min: 9, max: 9, pattern: "^[0-9]*$" }] }
      , { type: "password", key: "password", name: "password", hint: "Mật khẩu phải có chữ hoa, chữ thường, ký tự đặc biệt, số", input_type: "password", icon: "information-circle", validators: [{ required: true, min: 6, max: 20 }] }
      , { type: "text", key: "name", name: "Họ và tên", input_type: "text", icon: "person" }
      , { type: "text", key: "phone", name: "Điện thoại", hint: "Yêu cầu định dạng số điện thoại nhé", input_type: "tel", icon: "call", validators: [{ pattern: "^[0-9]*$" }] }
      , { type: "text", key: "email", name: "email", hint: "Yêu cầu định dạng email nhé", input_type: "email", icon: "mail", validators: [{ pattern: "^[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$" }] }
      , { type: "datetime", key: "start_date", name: "Ngày bắt đầu", hint: "Chọn ngày", display: "DD/MM/YYYY", picker: "DD MM YYYY" }
      , { type: "datetime", key: "start_time", name: "Thời gian bắt đầu", hint: "Chọn thời gian", display: "HH:mm:ss", picker: "HH:mm:ss" }
      , { type: "text_area", key: "text_area", name: "Nội dung nhập", hint: "Nhập nhiều dòng" }

      // version 6.0 dùng thêm đối tượng
      , { type: "object", key: "new_object", name: "Tên đối tượng cố định không sửa", hint: "là dynamicForm" }
      , { type: "element", key: "new_element", name: "Tên phần tử", hint: "là dynamicForm" }
      , { type: "list", key: "new_list", name: "Tên của danh sách", hint: "là dynamicForm" }
      , { type: "elements", key: "new_elements", name: "Tên của danh sách phần tử", hint: "là dynamicForm" }

      // ver 6.1 dùng thêm kiểu upload file
      , { type: "upload-files"
          , name: "Chọn file excel"
          , multiple: "single"
          , accept:`image/gif, image/jpeg, image/png
                                        , application/pdf
                                        , .txt, .md
                                        , .csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel
                                        , application/msword, application/vnd.openxmlformats-officedocument.wordprocessingml.document`
        }

      , {
        type: "svg", name: "Nhập đúng captcha", hint: "Vui lòng nhập đúng captcha hình bên", validators: [{ required: true, min: 4, max: 4 }],
        data: "<svg xmlns='http://www.w3.org/2000/svg' width='150' height='50' viewBox='0,0,150,50'>\
                <rect width='100%' height='100%' fill='#e0f0f1' />\
                <path d='M20 9 C84 36,65 2,144 29' stroke='#ddb640' fill='none' />\
                <path d='M9 17 C72 39,94 24,144 38' stroke='#e6e688' fill='none' />\
                <path fill='#687087'\
                  d='M87.93 30.00L87.84 29.90L87.87 29.93Q85.29 29.75 83.95 30.97L83.97 30.98L83.92 30.93Q82.64 32.20 82.94 34.71L82.90 34.67L82.96 34.73Q83.23 37.21 84.45 38.47L84.56 38.58L84.56 38.57Q85.48 39.76 87.61 39.68L87.63 39.71L87.75 39.82Q88.32 39.83 88.51 39.83L88.41 39.73L88.38 39.70Q91.87 39.03 91.99 34.43L92.06 34.50L91.98 34.43Q92.21 32.21 91.52 31.41L91.40 31.30L91.48 31.37Q90.50 30.16 87.94 30.01ZM91.13 41.61L91.10 41.58L91.25 41.73Q89.88 42.26 88.32 42.19L88.33 42.19L88.34 42.20Q84.47 42.37 83.17 39.78L83.18 39.78L83.25 39.85Q83.00 45.12 81.67 49.39L81.60 49.32L81.71 49.43Q79.77 49.78 78.13 50.50L78.26 50.63L78.15 50.51Q80.68 44.51 80.41 37.55L80.50 37.63L80.56 37.70Q80.19 30.74 77.29 24.69L77.33 24.72L77.44 24.83Q79.23 25.86 80.94 26.32L81.09 26.47L81.43 27.76L81.46 27.79Q81.66 28.22 81.93 29.32L81.91 29.30L81.81 29.20Q83.01 27.32 86.59 27.13L86.53 27.07L86.56 27.10Q87.39 27.01 88.26 27.01L88.17 26.92L88.85 27.11L88.84 27.10Q88.95 27.09 89.14 27.13L88.97 26.96L89.30 26.98L89.34 27.02Q91.47 27.37 92.20 27.60L92.10 27.50L92.13 27.53Q93.59 27.96 94.46 28.91L94.57 29.02L94.45 28.90Q95.38 30.17 95.34 31.58L95.40 31.64L95.36 31.60Q95.30 34.39 94.50 37.06L94.50 37.06L94.48 37.04Q93.59 40.68 91.23 41.71ZM95.46 42.28L95.50 42.29L95.40 42.18Q96.52 40.21 96.82 36.10L96.81 36.10L96.87 36.16Q96.91 34.29 96.91 33.03L97.03 33.15L96.97 33.09Q97.06 31.66 96.30 30.25L96.33 30.28L96.30 30.25Q95.73 29.65 95.23 29.26L95.40 29.43L95.10 29.01L94.94 28.74L94.84 28.53L94.86 28.54Q93.22 26.60 88.88 26.60L88.82 26.55L88.31 26.64L88.30 26.63Q83.55 26.53 81.92 28.13L81.89 28.11L82.07 28.29Q81.76 27.63 81.60 27.13L81.57 27.10L81.32 26.05L81.31 26.04Q78.96 25.55 76.75 24.07L76.60 23.92L76.67 23.99Q79.94 30.30 80.25 37.54L80.19 37.48L80.18 37.47Q80.60 44.86 77.74 51.33L77.61 51.19L79.63 50.36L79.72 50.45Q79.32 51.03 78.63 52.60L78.78 52.75L78.74 52.70Q81.44 51.64 83.76 51.30L83.70 51.23L83.76 51.29Q84.94 46.53 85.09 42.80L84.95 42.66L84.89 42.60Q86.39 44.18 90.01 44.41L89.92 44.32L90.10 44.50Q94.04 44.74 95.49 42.31L95.50 42.32ZM89.67 32.07L89.67 32.07L89.74 32.15Q90.34 32.02 91.45 32.37L91.44 32.36L91.41 32.33Q91.72 33.36 91.68 34.54L91.82 34.68L91.70 34.57Q91.63 35.41 91.44 36.05L91.60 36.22L91.59 36.20Q90.83 39.06 88.32 39.37L88.24 39.29L88.46 39.39L88.35 39.28Q88.43 39.44 88.32 39.48L88.20 39.36L87.63 39.32L87.65 39.35Q86.48 39.36 85.49 38.86L85.56 38.92L85.14 36.80L85.07 36.73Q85.03 34.51 86.32 33.49L86.23 33.39L86.35 33.52Q87.25 32.32 89.65 32.06Z' />\
                <path fill='#873bd2'\
                  d='M62.04 40.94L61.97 40.87L62.07 40.96Q60.66 39.17 59.36 36.09L59.51 36.24L57.24 30.96L57.25 30.97Q55.64 34.95 55.03 36.24L55.08 36.29L55.04 36.26Q53.73 39.33 52.14 41.23L52.09 41.19L52.05 41.15Q51.71 41.19 50.95 41.30L50.98 41.34L50.85 41.20Q51.04 33.97 45.21 28.03L45.02 27.84L45.08 27.90Q43.38 26.12 41.36 24.64L41.29 24.57L41.41 24.68Q43.26 25.23 45.12 25.54L45.03 25.45L45.03 25.45Q51.09 30.40 52.53 36.65L52.51 36.62L52.67 36.78Q53.57 34.94 54.75 31.74L54.74 31.74L54.63 31.63Q55.95 27.84 56.52 26.55L56.53 26.56L58.00 26.61L57.94 26.56Q58.83 28.28 60.01 31.56L60.08 31.63L60.07 31.62Q61.35 35.22 62.00 36.63L62.03 36.67L62.02 36.66Q63.82 30.34 69.30 25.77L69.23 25.71L69.19 25.67Q70.51 25.69 73.25 25.12L73.23 25.10L73.20 25.07Q64.50 31.02 63.32 41.00L63.40 41.08L62.67 40.88L62.83 41.04Q62.37 40.88 62.02 40.92ZM64.99 43.36L67.17 43.67L67.07 43.57Q66.75 42.03 66.75 40.51L66.86 40.62L66.87 40.62Q66.86 37.38 68.26 34.14L68.13 34.00L68.10 33.98Q70.15 29.52 74.26 26.44L74.35 26.52L74.20 26.37Q73.09 26.75 71.23 27.09L71.18 27.05L71.26 27.13Q73.24 25.49 74.54 24.57L74.40 24.44L71.99 25.00L72.00 25.00Q70.67 25.13 69.34 25.28L69.44 25.38L69.47 25.41Q64.26 29.61 62.32 34.63L62.28 34.59L62.35 34.66Q61.71 32.50 60.34 28.24L60.26 28.15L60.22 28.12Q60.00 28.23 59.73 28.23L59.77 28.27L59.24 28.27L59.20 28.23Q59.09 27.94 58.29 26.19L58.30 26.20L56.18 26.13L56.16 26.11Q55.26 28.98 53.16 34.61L53.08 34.52L53.07 34.52Q51.82 30.90 48.73 27.63L48.64 27.54L48.82 27.72Q48.41 27.57 48.11 27.54L48.15 27.58L47.65 27.54L47.64 27.52Q46.80 26.73 45.02 25.13L44.88 24.99L45.05 25.17Q41.79 24.41 40.11 23.92L40.14 23.94L40.04 23.85Q50.94 31.47 50.56 41.79L50.53 41.76L50.58 41.81Q50.64 41.68 51.00 41.64L51.11 41.75L50.98 41.62Q51.33 41.57 51.52 41.57L51.52 41.57L51.50 41.55Q51.68 41.57 51.87 43.67L51.70 43.50L53.74 43.45L53.78 43.49Q56.32 40.62 58.57 34.87L58.47 34.78L58.53 34.83Q60.04 38.71 61.90 41.37L61.85 41.31L61.87 41.33Q62.12 41.25 62.39 41.26L62.43 41.31L62.45 41.33Q62.74 41.37 63.01 41.37L62.92 41.28L65.09 43.46Z' />\
                <path fill='#e95c7f'\
                  d='M26.79 40.16L26.84 40.21L24.44 33.35L24.33 33.24Q19.98 20.67 14.04 14.28L14.08 14.31L14.02 14.26Q16.04 15.33 18.63 15.93L18.66 15.96L18.70 16.01Q23.83 22.28 28.17 35.03L28.18 35.04L28.26 35.12Q31.19 26.90 31.88 25.30L31.87 25.29L31.89 25.31Q34.31 19.74 37.13 16.42L37.14 16.44L37.15 16.45Q39.12 15.98 41.75 15.11L41.86 15.22L41.87 15.23Q37.34 19.88 34.30 27.11L34.14 26.96L34.30 27.11Q32.72 30.59 29.03 40.11L29.16 40.25L29.12 40.21Q28.60 40.25 28.03 40.21L27.99 40.18L27.90 40.09Q27.46 40.22 26.89 40.26ZM31.75 42.53L31.80 42.58L31.91 42.69Q34.57 32.56 36.13 28.53L36.24 28.63L36.13 28.52Q39.16 20.85 43.57 15.98L43.63 16.04L43.51 15.92Q42.51 16.33 40.42 17.05L40.55 17.19L41.60 15.76L41.54 15.70Q42.10 15.01 42.71 14.36L42.77 14.42L42.82 14.46Q39.91 15.37 36.91 15.94L37.04 16.07L36.95 15.98Q32.67 21.41 28.79 32.87L28.68 32.76L28.65 32.73Q25.01 22.62 21.81 18.24L21.92 18.35L21.95 18.38Q21.54 18.27 20.66 18.12L20.65 18.11L20.54 18.00Q20.39 17.69 18.79 15.64L18.86 15.70L18.84 15.69Q15.84 14.94 13.14 13.53L13.21 13.59L13.17 13.55Q19.72 20.56 24.10 33.35L24.08 33.34L24.20 33.45Q25.31 37.00 26.49 40.58L26.45 40.54L26.61 40.70Q26.99 40.78 27.83 40.66L27.76 40.59L27.78 40.61Q28.02 41.20 28.71 42.53L28.75 42.58L28.82 42.64Q29.58 42.49 30.30 42.57L30.40 42.67L30.27 42.53Q31.14 42.68 31.90 42.68Z' />\
                <path fill='#8224df'\
                  d='M123.50 38.00L123.37 37.87L123.41 37.91Q123.64 38.83 124.17 40.84L124.27 40.94L124.23 40.90Q119.95 39.51 115.34 39.78L115.32 39.76L115.36 39.80Q110.87 40.14 106.87 42.12L106.85 42.09L106.86 42.11Q107.03 41.37 107.07 41.44L107.07 41.44L107.20 41.57Q110.81 37.49 114.73 33.08L114.80 33.15L114.86 33.20Q119.12 28.06 120.30 23.38L120.34 23.42L120.31 23.39Q120.91 21.78 119.64 20.60L119.63 20.60L119.50 20.47Q118.24 19.30 116.45 19.46L116.47 19.47L116.50 19.50Q116.20 19.51 115.86 19.51L115.69 19.34L115.81 19.46Q114.30 19.48 113.05 20.39L113.02 20.36L112.98 20.33Q111.74 21.75 111.97 24.41L112.00 24.44L111.96 24.40Q110.22 24.11 109.00 23.65L108.97 23.62L108.96 23.61Q108.68 22.11 108.60 20.66L108.68 20.74L108.73 20.79Q108.58 19.08 109.19 17.94L109.29 18.04L109.27 18.02Q110.93 16.53 114.28 16.53L114.32 16.56L116.08 16.57L116.10 16.59Q118.35 16.60 119.30 16.71L119.36 16.77L119.28 16.68Q123.69 17.17 123.96 19.61L124.00 19.66L124.02 19.67Q124.06 20.21 123.98 21.00L123.94 20.96L124.03 21.06Q123.88 21.59 123.73 22.28L123.73 22.28L123.78 22.32Q122.12 30.41 114.54 37.26L114.44 37.16L114.54 37.26Q116.02 37.18 117.39 37.18L117.30 37.09L117.31 37.10Q120.48 37.04 123.34 37.84ZM122.76 17.01L122.89 17.13L122.82 17.07Q121.23 16.43 119.52 16.35L119.51 16.35L116.02 16.09L116.15 16.22Q111.60 15.86 109.39 16.97L109.46 17.03L109.36 16.93Q108.32 18.33 108.32 20.38L108.30 20.37L108.30 20.36Q108.44 21.19 108.74 24.01L108.67 23.93L108.62 23.88Q109.26 24.21 110.44 24.52L110.36 24.44L110.42 25.53L110.36 25.47Q110.38 25.98 110.45 26.51L110.47 26.53L110.38 26.44Q111.68 26.60 114.16 26.83L114.15 26.82L114.20 26.88Q114.12 26.45 114.12 26.11L114.19 26.18L114.21 26.20Q114.16 24.32 115.38 22.97L115.42 23.01L115.36 22.95Q116.60 21.62 118.39 21.73L118.47 21.81L118.36 21.70Q119.06 21.68 119.82 21.83L119.86 21.87L119.91 21.92Q120.11 22.39 120.18 22.80L120.18 22.80L120.15 22.77Q120.18 23.18 120.11 23.53L120.01 23.43L120.03 23.45Q118.79 28.22 114.37 33.06L114.45 33.13L114.29 32.97Q112.28 35.35 106.84 41.40L106.87 41.43L106.74 41.30Q106.72 42.31 106.37 42.88L106.24 42.74L106.20 42.70Q107.79 41.81 109.31 41.28L109.31 41.28L109.41 41.38Q108.62 41.89 107.67 43.37L107.82 43.52L107.78 43.48Q107.57 43.74 107.46 44.08L107.43 44.05L107.45 44.07Q112.31 42.00 117.79 42.19L117.87 42.27L117.86 42.26Q123.51 42.39 128.08 44.75L128.07 44.74L127.12 42.65L127.20 42.72Q126.48 41.33 126.22 40.53L126.26 40.57L126.26 40.57Q125.50 40.11 124.28 39.69L124.27 39.69L124.20 39.61Q124.00 38.84 123.62 37.47L123.69 37.54L123.62 37.47Q121.48 36.97 119.19 36.78L119.23 36.81L119.31 36.90Q123.94 32.27 125.46 24.01L125.36 23.91L125.64 21.11L125.58 21.04Q125.53 19.28 124.31 18.60L124.39 18.68L124.21 18.54L124.33 18.65Q124.16 18.45 124.09 18.45L124.14 18.50L124.14 18.50Q124.03 17.78 122.92 17.17Z' />\
                <path d='M1 29 C83 34,91 48,148 28' stroke='#7ced98' fill='none' /></svg>"}
      , {
        type: "details",
        details: [
          {
            name: "Mã khách hàng",
            value: "R012234949883"
          },
          {
            name: "Tên khách hàng",
            value: "Nguyễn Văn B"
          },
          {
            name: "Địa chỉ",
            value: "263 Nguyễn Văn Linh, Đà nẵng, Việt Nam"
          },
          {
            name: "Hình thức thanh toán",
            value: "Tiền mặt"
          },
        ]
      }
      ,
      // buttons for command process
      {
        type: "button"
        , options: [
          { name: "Reset", next: "RESET" }
          , { name: "Close", next: "CLOSE" }
          , { name: "Home", next: "HOME" }
          , { name: "insert sqlite", next: "CALLBACK", table: "table_name"}
          , { name: "update sqlite", next: "CALLBACK", table: "table_name", wheres:["id"]}
          , { name: "Upload files", next: "CALLBACK", url: "./ionic/", type: "FORM-DATA", token: true}
          , { name: "Register", next: "CALLBACK", url: "./ionic/", command: "USER_LOGIN_REDIRECT" }
          , { name: "LOGIN", next: "NEXT", url: "./ionic/", command: "USER_CHECK_EXISTS", token: true }
        ]
      }
    ]
  }

8. Include pipes default to use in this lib

  content | newline | safe

  [{array.isChecked?}] | count_checked

9. add check device for viewer

  // Đây là môi trường di động (web và thiết bị)
  this.apiCommons.isMobile();

  // đây là môi trường thiết bị (sử dụng cordova và mobile)
  this.apiCommons.isDevice();

10. Sử dụng trong share.module.ts để dùng chung cho tất cả các trang khi khai các thư viện ngoài như TimeAgoPipe,...

@NgModule({
    imports: [
        CommonModule,
        FormsModule,
        AutosizeModule,
        IonicModule
    ],
    declarations: [
        // Các pipe dữ liệu không chèn ở entry
        IdeaCardComponent,
        TimeAgoPipe
    ],
    exports: [
        // Phải khai báo xuất bản ra mới sử dụng được nhé
        IdeaCardComponent,
        AutosizeModule,
        TimeAgoPipe
    ]
})
export class SharedModule { }

Define in app.module.ts to use this lib

@NgModule({
  ...
  imports: [
    ...
    Ngxi4DynamicServiceModule.forRoot(), //app.module.ts
    // Ngxi4DynamicServiceModule,        //xyz.module.ts
    SharedModule,
    ...
  ],
  ...

Declare in .module.ts to use card and pipe

@NgModule({
  imports: [
    ...
    Ngxi4DynamicServiceModule, // dùng card và pipe trong .html
    ...
  ],
  declarations: [
    ...
  ]
})