Select 2

Select

Angular Bootstrap Select is a form control, that after the click displays a collapsible list of multiple values which can be used in forms, menus or surveys.

Contrast Angular Bootstrap Select enables you to use ↑ and ↓ arrow keys to navigate through options and use ↵ key to select required option (works for stateful select).

Select Button

html

<CDBSelect2 [options]='select2Options' [iconBrand]=true selected="Choose an option" color="white"></CDBSelect2>

typescript

import { Component, OnInit } from '@angular/core';
@Component({
  selector: 'app-select2',
  templateUrl: './select2.component.html',
  styleUrls: ['./select2.component.scss'],
})
export class Select2Component implements OnInit {
  select2Options = [
    {
      text: 'Select Option',
      icon: 'stack-overflow',
    },
    {
      text: 'Another Option',
      icon: 'reddit',
    },
    {
      text: 'Option 3',
      icon: 'instagram',
    },
    {
      text: 'Option 4',
    },
    {
      text: 'Last Option',
    },
  ];
  constructor() {}
  ngOnInit(): void {}
}

Disable Select Button

html

<CDBSelect2 [options]='select2Options' [iconBrand]=true selected="Choose an option" [disabled]=true color="none"></CDBSelect2>

typescript

import { Component, OnInit } from '@angular/core';
@Component({
  selector: 'app-select2',
  templateUrl: './select2.component.html',
  styleUrls: ['./select2.component.scss'],
})
export class Select2Component implements OnInit {
  select2Options = [
    {
      text: 'Select Option',
      icon: 'stack-overflow',
    },
    {
      text: 'Another Option',
      icon: 'reddit',
    },
    {
      text: 'Option 3',
      icon: 'instagram',
    },
    {
      text: 'Option 4',
    },
    {
      text: 'Last Option',
    },
  ];
  constructor() {}
  ngOnInit(): void {}
}

Colored Select Button

html

<CDBSelect2 [options]='select2Options' [iconBrand]=true selected="Choose an option" color="primary"></CDBSelect2>
<CDBSelect2 [options]='select2Options' [iconBrand]=true selected="Choose an option" color="secondary"></CDBSelect2>
<CDBSelect2 [options]='select2Options' [iconBrand]=true selected="Choose an option" color="success"></CDBSelect2>
<CDBSelect2 [options]='select2Options' [iconBrand]=true selected="Choose an option" color="warning"></CDBSelect2>
<CDBSelect2 [options]='select2Options' [iconBrand]=true selected="Choose an option" color="dark"></CDBSelect2>

typescript

import { Component, OnInit } from '@angular/core';
@Component({
  selector: 'app-select2',
  templateUrl: './select2.component.html',
  styleUrls: ['./select2.component.scss'],
})
export class Select2Component implements OnInit {
  select2Options = [
    {
      text: 'Select Option',
      icon: 'stack-overflow',
    },
    {
      text: 'Another Option',
      icon: 'reddit',
    },
    {
      text: 'Option 3',
      icon: 'instagram',
    },
    {
      text: 'Option 4',
    },
    {
      text: 'Last Option',
    },
  ];
  constructor() {}
  ngOnInit(): void {}
}

Colored Options with Hover

html

<CDBSelect2 [options]='select2Options' [iconBrand]=true selected="Choose an option" [hoverColor]=true color="danger"></CDBSelect2>

typescript

import { Component, OnInit } from '@angular/core';
@Component({
  selector: 'app-select2',
  templateUrl: './select2.component.html',
  styleUrls: ['./select2.component.scss'],
})
export class Select2Component implements OnInit {
  select2Options = [
    {
      text: 'Select Option',
      icon: 'stack-overflow',
    },
    {
      text: 'Another Option',
      icon: 'reddit',
    },
    {
      text: 'Option 3',
      icon: 'instagram',
    },
    {
      text: 'Option 4',
    },
    {
      text: 'Last Option',
    },
  ];
  constructor() {}
  ngOnInit(): void {}
}

API

Here in this section you will find information about required modules and available inputs, outputs, methods and events of this component.

Contrast Select2 Bootstrap Modules used

import {Select2Module } from 'cdbangular';

API Reference: Contrast Select2 Inputs

The table below shows the possible input of the Select2 component.

Name	Type	Default	Description	Example
class	String		Adds custom classes	class="myClass"
disable	Boolean	false	If `true` - the option wont be clickable.	disabled=true
color	String		Sets colorful hover effect on select options.	color="primary"
iconSize	String		Sets size of icon brand in select option	iconSize="20px"
iconBrand	Boolean	false	adds icon to the select option	iconBrand=true
iconLight	Boolean	false	Sets the icon light	iconLight=true
iconRegular	Boolean	false	Sets the icon regular	iconRegular=true
iconClass	String		Adds custom class to icon	iconClass="myClass"
options	Array of Objects		Sets options array as source of data. This property is used in alternative `Select` version.	options=[options]
hoverColor	Boolean	false	Sets hover effect on select options.	hoverColor=true
selected	String		Set default select text content.	selected="Choose one"
optionClassName	String		Adds custom classes to options	optionClassName="my-class"