select2-aurora

Select2-aurora is a new implementation for Select Control Form. In this module, you are able to add options list just like before. It is possible to search in list. In order to get information from an API server, the output of your service must be a list with two components of id and label. In this way, optionList will be fulfilled automatically and set in module.

This library was generated with Angular CLI version 11.2.8.

Installation

for last version run

npm i select2-aurora@latest

for a special version run

npm i [email protected]

After the package Installation, you must add Select2AuroraModule in app.modules.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { Select2AuroraModule } from 'select2-aurora';       // <-- here

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    Select2AuroraModule     // <-- here
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

How to use package with the optionList property

Select2-aurora has an property named optionList. To create an optionList, you must define a list of AuroraSelectModel objects. First of all import AuroraSelectModel in your component, then define your list with this model. The AuroraSelectModel has two properties, one is id, and label.

import { AuroraSelectModel } from 'select2-aurora';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

export class AppComponent implements OnInit {
  countriesList: Array<AuroraSelectModel> = new Array<AuroraSelectModel>();

  ngOnInit()
  {
    this.initOptionList();
  }

  initOptionList()
  {
    this.countriesList = new Array<AuroraSelectModel>();
    this.countriesList.push(new AuroraSelectModel(1, 'Austria'));
    this.countriesList.push(new AuroraSelectModel(2, 'Belgium'));
    this.countriesList.push(new AuroraSelectModel(3, 'Finland'));
    this.countriesList.push(new AuroraSelectModel(4, 'France'));
    this.countriesList.push(new AuroraSelectModel(5, 'Germany'));
    this.countriesList.push(new AuroraSelectModel(6, 'Spain'));
    this.countriesList.push(new AuroraSelectModel(7, 'Portugal'));
  }
}

Then you can define select2-aurora in your template.

<select2-aurora
  [optionList]="countriesList"  
>
</select2-aurora>

Using select2-aurora in a form

Following is an example of using select2-aurora in a form.

import { FormControl, FormGroup, FormBuilder } from '@angular/forms';
import { AuroraSelectModel } from 'select2-aurora';

export class AppComponent implements OnInit {
  countriesList: Array<AuroraSelectModel> = new Array<AuroraSelectModel>();  
  formGroup: FormGroup;

  constructor(private formBuilder: FormBuilder)
  {}

  ngOnInit()
  {
    this.initOptionList();
    this.createForm();
  }

  createForm()
  {
    this.formGroup = this.formBuilder.group({
      countryFC: new FormControl()
    });
  }

  initOptionList()
  {
    // as previous example
  }

  onSaveForm()
  {
    console.log(this.formGroup.value);
  }
}

You can set a default value for form control.

this.formGroup = this.formBuilder.group({
  countryFC: new FormControl(2)
});

in the template

<form [formGroup]="formGroup" (ngSubmit)="onSaveForm()">
  <span>Countries:</span>
  <select2-aurora
    formControlName="countryFC"
    [optionList]="countriesList"
  >
  </select2-aurora>
  <br>

  <button type="submit" name="button">Save</button>
</form>

API service

You can fill the options list with an API service. For this purpose, just write an API that its response is a list with id and label properties.

apiUrl = 'http://127.0.0.1:8000/view1/';

<select2-aurora
  formControlName="countryFC"
  [apiUrl]="apiUrl"
>
</select2-aurora>

If your API has JWT token, then you can pass through your token to this module

apiUrl = 'http://127.0.0.1:8000/view1/';
jwtToken = 'dfsdfe3423i4jfhsdjnvsjhr3h4j23h4j23h4j232j4';

<select2-aurora
  formControlName="countryFC"
  [apiUrl]="apiUrl"
  [jwtToken]="jwtToken"
>
</select2-aurora>

If you use both optionList and apiUrl simultaneously, the module will only use apiUrl.

Source code

The project is open source and you can access the source code here