> For the complete documentation index, see [llms.txt](https://cedrus.gitbook.io/project-fusion/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://cedrus.gitbook.io/project-fusion/components/form-controls/select.md).

# Select

#### cf-select

Input component is based on Angular Material select and has such extended options:

* options filter;
* notification;
* innerHtml for option text.

### Usage

app.html

```markup
<h3>{{title}}:</h3>
<cf-select [properties]="myFruits" [required]="isRequired" [display]="isVisible" [disable]="isDisable" (cfOnOpen)="log('On open event')" (cfOnChange)="log('On change event')" (cfOnClose)="log('On close event')">
</cf-select>
<div style="text-align: left">
    <h4>List of CF Demo Select 1 events:</h4>
    <div *ngFor="let selectEvent of selectEvents; let i = index">{{ i + ': ' + selectEvent }}</div>
</div>

<h3>{{title2}}:</h3>
<div>
    <cf-select [properties]="myAccounts" [notification]="myNotifications"></cf-select>
    <cf-button md-raised-button [properties]="sender" (click)="sendMessage()"></cf-button>
</div>    
<cf-select [properties]="myAccounts"></cf-select>
```

app.ts

```typescript
title: string = "CF Demo Select 1 (with filter)";
title2: string = "CF Demo Select 1 (with HTML options)";
isVisible: Boolean = true;
isDisable: Boolean = false;
isRequired: Boolean = true;
selectEvents: Array<any> = [];

log(ev): void { this.selectEvents.push(ev); }

myFruits = new SelectModel ({
    placeholder: 'Selected fruit is: ',
    items: [
        {itemValue: 'apl', itemLabel: 'Apple'}, 
        {itemValue: 'ban', itemLabel: 'Banana'}, 
        {itemValue: 'wtm', itemLabel: 'Watermelon'}, 
        {itemValue: 'per', itemLabel: 'Pear'}, 
        {itemValue: 'pec', itemLabel: 'Peach'}, 
        {itemValue: 'org', itemLabel: 'Orange'}, 
        {itemValue: 'man', itemLabel: 'Mango'}, 
        {itemValue: 'gra', itemLabel: 'Grapes'}, 
        {itemValue: 'lim', itemLabel: 'Lime'}, 
        {itemValue: 'lem', itemLabel: 'Lemon'} 
    ],
    selected: '',
    showFilter: true
});

myCurrency: string = 'usd';
myAccounts = new SelectModel ({
    placeholder: 'Select currency: ',
    items: [
        {itemValue: 'usd', itemLabel: '<b style="color: #4caf50"><span style="margin-right: 8px" class="fa fa-usd"></span>USD</b>'},
        {itemValue: 'eur', itemLabel: '<b style="color: #309be3"><span style="margin-right: 8px" class="fa fa-eur"></span>EURO</b>'},
        {itemValue: 'gbp', itemLabel: '<b style="color: #7a73a9"><span style="margin-right: 8px" class="fa fa-gbp"></span>GBP</b>'}
    ],
    selected: this.myCurrency,
    showFilter: false
});

letters = 0;
  myNotifications: NotificationModel = {
    value: this.letters
  };
  sender = new ButtonModel({
    label: "Send mail",
    color: {
      foreground: "",
      background: "primary"
    },
    icon: null,
    icon_position:"right"
  });
  sendMessage() { ++this.myNotifications.value; }
```

app.scss

```css
:host {
    text-align: center;
    display: flex;
       flex-direction: column;
}
cf-select {
    margin: 20px;
}
```

## Select input properties

|     Attr    |        Type        | Details                                                                                                 |
| :---------: | :----------------: | ------------------------------------------------------------------------------------------------------- |
|    items    | SelectItemModel\[] | It is array with option items json objects                                                              |
|   selected  |       string       | It means that component must have some selected option and it is value of option property **itemLabel** |
| placeholder |       string       | It is Select component placeholder text                                                                 |
|  showFilter |       boolean      | It is property to show/hide filter                                                                      |
|   display   |       boolean      | To show / hide component                                                                                |
|   disable   |       boolean      | To enable / disable component                                                                           |
|   required  |       boolean      | If component is required                                                                                |

## Select option input properties

|    Attr   |  Type  | Details                                                          |
| :-------: | :----: | ---------------------------------------------------------------- |
| itemValue | string | It is name of item property to be used as md-option value        |
| itemLabel | string | It is name of item property to be used as md-option display text |

## Select styling properties

|    Attr   |     Type     | Dateils                                   |
| :-------: | :----------: | ----------------------------------------- |
| container | StylingModel | Styling for the container                 |
|   select  | StylingModel | Styling for the md-select itself          |
|   filter  | StylingModel | Styling for the filter md-input-container |
|  options  | StylingModel | Styling for the md-options                |

## Select output properties

|    Attr    | Details                               |
| :--------: | ------------------------------------- |
|  cfOnOpen  | Fired when options was opened         |
| cfOnChange | Fired when selected value was changed |
|  cfOnClose | Fired when options was closed         |