This library is used for Academia-Uniandes system.


Keywords
Angular, Angular-cli, utils components, academia, search-box-widget, typeahead-completions, uniandes
License
MIT
Install
npm install ngx-academia-uniandes-library@0.2.7-beta.81

Documentation

Ngx Academia Uniandes Library

This library is used for Academia-Uniandes system.

Install

Use npm package manager and execute following command:

npm i ngx-academia-uniandes-library --save

Then import any avaliable ngx-academia-uniandes module in your main module. The following example imports SearchComboBoxModule module.

    import { AppComponent } from './app.component';
    import { SearchComboBoxModule } from 'ngx-academia-uniandes';



    @NgModule({
    declarations: [
        AppComponent
    ],
    imports: [
        BrowserModule,
        SearchComboBoxModule
    ],
    providers: [],
    bootstrap: [AppComponent]
    })
    export class AppModule { }

Use

Once ngx-academia uniandes modules were imported, you can add the components in your main app.

Search Combo Box

  1. Define a component model object in component.ts like this :
    this.componentModel = {
        "urlService" : "http://myapi/items",
        "queryParams" : [{"name": "start", "value": 0}],
        "collectionName": "records",
        "optionField" : "fullName"; //Optional
        "placeholder" : "Search items"; //Optional
        "optionsLimit" : 5; //Optional
    }

where urlService is an API service URL, queryParams is an array with queryParams for API requests, collectioName is attribute name where are located array data (if response object is paginated), optionField is attribute name that contains the options value to show, placeholder is a string for setting the placeholder to component (Default "search") and with optionsLimit you can configure number of options to display.

Finally, add component selector in html template like this:

<form [formGroup]="formGroup">
<div class="form-group">
  <app-search-combo-box-generic [componentModel]="componentModel" [itemControl]="formGroup.controls.searchItemDepCtrl" (itemSelected)="itemSelected=$event"></app-search-combo-box-generic>
</div>

Where componentModel is previous object defined, itemControl is a formControl object of reactive angular forms and itemSelected is a event when someone selects a option.

Thanks JYM16