Fly Select

Fly Select is a customizable select component for Angular 6+. Used for displaying options and groups of options with default minimalistic design.

Demo

Contents

• Installing
• Simple usage
• Custom Option Templates
• Groups
• Reactive Forms
• Styling
• Inputs
• Outputs
• Directives
• Keyboard Events

Installing

Install the package from npm:

npm i fly-select --save

Simple usage

Add the FlySelectModule in the imports array in AppModule:

import {FlySelectModule} from 'fly-select';

Add the fly-select component in your component:

<fly-select
    [data]="data">
</fly-select>

Add the data array in you component class:

const data = [
    {
        label: 'Tony Stark',
        value: 'ironman'
    },
    {
        label: 'Bruce Wayne',
        value: 'batman'
    },
    {
        label: 'Clark Kent',
        value: 'superman'
    }
];

The basic data structure (obecjts in the array must have label and value properites) looks like the above example, but you can use a different structure. If your data don't have label nad value properties, there is no need to transform the data to the previous structure. In this case you specify two additioanl inputs (labelProperty, valueProperty) on the component:

<fly-select
    [data]="data"
    [labelProperty]="'name'"
    [valueProperty]="'id'">
</fly-select>

const data = [
    {
        id: 1,
        name: 'Tony Stark',
        alias: 'Ironman',
        company: 'Stark Industries',
        avatar: 'https://cdn0.iconfinder.com/data/icons/superhero-2/256/Ironman-512.png'
    }
];

Custom Option Templates

You can customize the options by adding template inside the fly-select component with the directive flySelectItemBody, you can use the data inside the template if you create option (which will contain the original data under the property original) varaible:

<fly-select
    [data]="data"
    [labelProperty]="'name'"
    [valueProperty]="'id'">
    <ng-template let-option="option" flySelectItemBody>
        <div class="hero-card">
            <div class="image" [style.backgroundImage]="'url(' + option.original.avatar + ')'"></div>
        
            <div class="info">
                <div class="alias">{{option.original.alias}}</div>
                <div class="name-copmany">{{option.original.name}}, {{option.original.company}}</div>
            </div>
        </div>
    </ng-template>
</fly-select>

Groups

Fly Select support option groups, the data structure is different from previous examples. Group objects must contain groupLabel and groupOptions properties or two additional inputs (groupLabelProperty, groupOptionsProperty) to be specified on the component.

groups = [
    {
        groupLabel: 'Marvel',
        avatar: 'https://cdn3.iconfinder.com/data/icons/movie-company/129/MARVEL.png',
        groupOptions: [
            {
                  id: 1,
                  name: 'Tony Stark',
                  alias: 'Ironman',
                  gender: 'Male',
                  company: 'Stark Industries',
                  avatar: 'https://cdn0.iconfinder.com/data/icons/superhero-2/256/Ironman-512.png'
            }
        ]
    }
];

You can also change the body of the group label by adding template inside fly-select component with directive flySelectGroupBody. You can access the group data by creating group variable in the template, if your data objects have more properties they will be moved in the groupOriginal.

<form [formGroup]="formOne">
    <fly-select
      [data]="groups"
      [labelProperty]="'name'"
      [valueProperty]="'id'">
        <ng-template let-group="group" flySelectGroupBody>
            <div class="universe-card">
                <div class="image" [style.backgroundImage]="'url(' + group.groupOriginal.avatar + ')'"></div>
                
                <div class="info">{{group.groupLabel}}</div>
            </div>
        </ng-template>
        
        <ng-template let-option="option" flySelectItemBody>...</ng-template>
    </fly-select>
</form>

Reactive Forms

You can use the component with reactive forms:

form = new FormGroup({
    hero: new FormControl('', [Validators.required])
});

<fly-select
    [data]="data"
    [formControlName]="'hero'">
</fly-select>

If you want to set a default value, lets say you want Superman to be selected on component init:

ngOnInit() {
  this.form.get('hero').setValue(this.data[2]);
}

Styling

You can style the select to your need, just set the input style to false on the component and you are good to go. Useful css classes for stying:

• .fly-select-head-wrapper (have :hover)
• .fly-select-body-wrapper
• .fly-select-option-wrapper
• .fly-select-group-wrapper
• .fly-select-group-label

Added classes after some event:

• fly-select.host-focus
• .fly-select-wrapper.open
• .fly-select-head-wrapper.disabled
• .fly-select-option-wrapper.highlight

Inputs

Input	Type	Description
data	Array	Data of the options or the groups
placeholder	string	Custom text to show when no option is selected
labelProperty	string	Property to get the option label from
valueProperty	string	Property to get the option value from
groupLabelProperty	string	Property to get the group label value from
groupOptionsProperty	string	Property to get the group options from
style	boolean	Switch component styling

Outputs

Output	Type	Description
selected	EventEmitter	Emitted when option is selected

Directives

Directive Name	Description
flySelectGroupBody	Use it for customizing the groups template
flySelectItemBody	Use it for customizing the options template

Keyboard events

Keyboard events are available for esc, enter, arrowup, arrowdown.

Key	Description
Esc	Close the select if opened
Enter	Select option from the select if highlighted
ArrowUp/ArrowDown	Navigate through the options