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

<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

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

: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