0\">\r\n
\r\n \r\n
\r\n
\r\n
\r\n\r\n\r\n \r\n
\r\n
\r\n
\r\n {{event.name}} - {{event.value | json}}\r\n
\r\n
\r\n","import { Component, OnInit } from '@angular/core';\r\n\r\n@Component({\r\n selector: 'demo-select-group',\r\n templateUrl: 'group.html'\r\n})\r\n\r\nexport class DemoSelectGroupComponent implements OnInit {\r\n selectedAccount = 'Adam';\r\n accounts = [\r\n { name: 'Adam', email: 'adam@email.com', age: 12, country: 'United States', child: { state: 'Active' } },\r\n { name: 'Homer', email: 'homer@email.com', age: 47, country: '', child: { state: 'Active' } },\r\n { name: 'Samantha', email: 'samantha@email.com', age: 30, country: 'United States', child: { state: 'Active' } },\r\n { name: 'Amalie', email: 'amalie@email.com', age: 12, country: 'Argentina', child: { state: 'Active' } },\r\n { name: 'Estefanía', email: 'estefania@email.com', age: 21, country: 'Argentina', child: { state: 'Active' } },\r\n { name: 'Adrian', email: 'adrian@email.com', age: 21, country: 'Ecuador', child: { state: 'Active' } },\r\n { name: 'Wladimir', email: 'wladimir@email.com', age: 30, country: 'Ecuador', child: { state: 'Inactive' } },\r\n { name: 'Natasha', email: 'natasha@email.com', age: 54, country: 'Ecuador', child: { state: 'Inactive' } },\r\n { name: 'Nicole', email: 'nicole@email.com', age: 43, country: 'Colombia', child: { state: 'Inactive' } },\r\n { name: 'Michael', email: 'michael@email.com', age: 15, country: 'Colombia', child: { state: 'Inactive' } },\r\n { name: 'Nicolás', email: 'nicole@email.com', age: 43, country: 'Colombia', child: { state: 'Inactive' } }\r\n ];\r\n\r\n constructor() {\r\n }\r\n\r\n ngOnInit() {\r\n }\r\n}","\r\n
\r\nSelected: {{selectedAccount | json}}\r\n\r\n","import { Injectable } from '@angular/core';\r\nimport { Observable, of } from 'rxjs';\r\nimport { delay, map } from 'rxjs/operators';\r\nimport { HttpClient } from '@angular/common/http';\r\n\r\nexport interface Person {\r\n id: string;\r\n isActive: boolean;\r\n age: number;\r\n name: string;\r\n gender: string;\r\n company: string;\r\n email: string;\r\n phone: string;\r\n disabled?: boolean;\r\n}\r\n\r\n@Injectable({\r\n providedIn: 'root'\r\n})\r\nexport class DataService {\r\n constructor(private http: HttpClient) { }\r\n\r\n getGithubAccounts(term: string = null) {\r\n if (term) {\r\n return this.http.get
\r\n Selected value:
\r\n
","import { Component, OnInit } from '@angular/core';\r\n\r\n@Component({\r\n selector: 'demo-select-option-template',\r\n templateUrl: 'option-template.html'\r\n})\r\n\r\nexport class DemoSelectOptionTemplateComponent implements OnInit {\r\n cities = [\r\n {\r\n id: 1,\r\n name: 'Vilnius',\r\n avatar: '//www.gravatar.com/avatar/b0d8c6e5ea589e6fc3d3e08afb1873bb?d=retro&r=g&s=30 2x'\r\n },\r\n { id: 2, name: 'Kaunas', avatar: '//www.gravatar.com/avatar/ddac2aa63ce82315b513be9dc93336e5?d=retro&r=g&s=15' },\r\n {\r\n id: 3,\r\n name: 'Pavilnys',\r\n avatar: '//www.gravatar.com/avatar/6acb7abf486516ab7fb0a6efa372042b?d=retro&r=g&s=15'\r\n },\r\n {\r\n id: 4,\r\n name: 'Siauliai',\r\n avatar: '//www.gravatar.com/avatar/b0d8c6e5ea589e6fc3d3e08afb1873bb?d=retro&r=g&s=30 2x'\r\n },\r\n ];\r\n\r\n selectedCity = this.cities[1].name;\r\n\r\n constructor() {\r\n }\r\n\r\n ngOnInit() {\r\n }\r\n}","\r\n
- \r\n
- {{item.name}} \r\n
{{item.name}}
\r\n \r\n
\r\n \r\n
\r\n {{item.name}}
\r\nCard subtitle
\r\n\r\n \r\n Some quick example text to build\r\n
\r\n Card link\r\n Another link\r\n
\r\n \r\n \r\n
\r\n\r\n
Selected car ID: {{selectedCars | json}}","import { Injectable } from '@angular/core';\r\nimport { Observable, of } from 'rxjs';\r\nimport { delay, map } from 'rxjs/operators';\r\nimport { HttpClient } from '@angular/common/http';\r\n\r\nexport interface Person {\r\n id: string;\r\n isActive: boolean;\r\n age: number;\r\n name: string;\r\n gender: string;\r\n company: string;\r\n email: string;\r\n phone: string;\r\n disabled?: boolean;\r\n}\r\n\r\n@Injectable({\r\n providedIn: 'root'\r\n})\r\nexport class DataService {\r\n constructor(private http: HttpClient) { }\r\n\r\n getGithubAccounts(term: string = null) {\r\n if (term) {\r\n return this.http.get
\r\n
\r\n Selected persons: {{selectedPersons | json}}\r\n
","import { Injectable } from '@angular/core';\r\nimport { Observable, of } from 'rxjs';\r\nimport { delay, map } from 'rxjs/operators';\r\nimport { HttpClient } from '@angular/common/http';\r\n\r\nexport interface Person {\r\n id: string;\r\n isActive: boolean;\r\n age: number;\r\n name: string;\r\n gender: string;\r\n company: string;\r\n email: string;\r\n phone: string;\r\n disabled?: boolean;\r\n}\r\n\r\n@Injectable({\r\n providedIn: 'root'\r\n})\r\nexport class DataService {\r\n constructor(private http: HttpClient) { }\r\n\r\n getGithubAccounts(term: string = null) {\r\n if (term) {\r\n return this.http.get\r\n
\r\n Selected persons: {{selectedPersons | json}}\r\n
","import { Component, OnInit } from '@angular/core';\r\n\r\n@Component({\r\n selector: 'demo-select-template',\r\n templateUrl: 'template.html'\r\n})\r\n\r\nexport class DemoSelectTemplateComponent implements OnInit {\r\n \r\n cities = [\r\n {\r\n id: 1,\r\n name: 'Vilnius',\r\n avatar: '//www.gravatar.com/avatar/b0d8c6e5ea589e6fc3d3e08afb1873bb?d=retro&r=g&s=30 2x'\r\n },\r\n { id: 2, name: 'Kaunas', avatar: '//www.gravatar.com/avatar/ddac2aa63ce82315b513be9dc93336e5?d=retro&r=g&s=15' },\r\n {\r\n id: 3,\r\n name: 'Pavilnys',\r\n avatar: '//www.gravatar.com/avatar/6acb7abf486516ab7fb0a6efa372042b?d=retro&r=g&s=15'\r\n },\r\n {\r\n id: 4,\r\n name: 'Siauliai',\r\n avatar: '//www.gravatar.com/avatar/b0d8c6e5ea589e6fc3d3e08afb1873bb?d=retro&r=g&s=30 2x'\r\n },\r\n ];\r\n\r\n selectedCity = this.cities[0].name;\r\n \r\n constructor() { }\r\n\r\n ngOnInit() {\r\n }\r\n}","Angular ng-select is a lightweight all in one UI Select, Multiselect and Autocomplete library. More example can be found on official demo page
\r\nBasic usage of ng-select
`,\r\n component: require('!!raw-loader!./demos/basic/basic'),\r\n html: require('!!raw-loader!./demos/basic/basic.html'),\r\n outlet: DemoSelectBasicComponent\r\n },\r\n {\r\n title: 'Display data using ng-option',\r\n anchor: 'option',\r\n description: `If you have simple use case, you can omit items array and bind options directly in html using ng-option component.
`,\r\n component: require('!!raw-loader!./demos/options/options'),\r\n html: require('!!raw-loader!./demos/options/options.html'),\r\n outlet: DemoSelectOptionsComponent\r\n },\r\n {\r\n title: 'Bind to default values',\r\n anchor: 'option',\r\n description: `By default ng-select binds to default label property for display, and keeps whole object as selected value.
`,\r\n component: require('!!raw-loader!./demos/bind/bind'),\r\n html: require('!!raw-loader!./demos/bind/bind.html'),\r\n outlet: DemoSelectBindComponent\r\n },\r\n {\r\n title: 'Custom server-side search',\r\n anchor: 'search',\r\n description: `Use typeahead to subscribe to search term and load async items.
`,\r\n component: require('!!raw-loader!./demos/search/search'),\r\n html: require('!!raw-loader!./demos/search/search.html'),\r\n svc: require('!!raw-loader!./demos/search/data.service'),\r\n outlet: DemoSelectSearchComponent\r\n },\r\n {\r\n title: 'Custom tags',\r\n anchor: 'tags',\r\n description: `By providing custom function to [addTag] you can modify result of new tag
`,\r\n component: require('!!raw-loader!./demos/tags/tags'),\r\n html: require('!!raw-loader!./demos/tags/tags.html'),\r\n svc: require('!!raw-loader!./demos/tags/data.service'),\r\n outlet: DemoSelectTagsComponent\r\n },\r\n {\r\n title: 'Custom label template',\r\n anchor: 'template',\r\n description: `Custom selected item label using ng-label-tmp
`,\r\n component: require('!!raw-loader!./demos/template/template'),\r\n html: require('!!raw-loader!./demos/template/template.html'),\r\n outlet: DemoSelectTemplateComponent\r\n },\r\n {\r\n title: 'Custom option template',\r\n anchor: 'option-template',\r\n description: `Custom dropdown panel option template using ng-option-tmp
`,\r\n component: require('!!raw-loader!./demos/option-template/option-template'),\r\n html: require('!!raw-loader!./demos/option-template/option-template.html'),\r\n outlet: DemoSelectOptionTemplateComponent\r\n },\r\n {\r\n title: 'Multi select',\r\n anchor: 'multi-select',\r\n description: `Select multiple elements
`,\r\n component: require('!!raw-loader!./demos/multi/multi'),\r\n html: require('!!raw-loader!./demos/multi/multi.html'),\r\n svc: require('!!raw-loader!./demos/multi/data.service'),\r\n outlet: DemoSelectMultiComponent\r\n },\r\n {\r\n title: 'Output events',\r\n anchor: 'output-events',\r\n description: `All output events
`,\r\n component: require('!!raw-loader!./demos/event/event'),\r\n html: require('!!raw-loader!./demos/event/event.html'),\r\n svc: require('!!raw-loader!./demos/event/data.service'),\r\n outlet: DemoSelectEventComponent\r\n },\r\n {\r\n title: 'Group by item key',\r\n anchor: 'group',\r\n description: `You can group by item key providing key name as a string to groupBy input
`,\r\n component: require('!!raw-loader!./demos/group/group'),\r\n html: require('!!raw-loader!./demos/group/group.html'),\r\n outlet: DemoSelectGroupComponent\r\n },\r\n ]\r\n },\r\n {\r\n name: 'API Reference',\r\n anchor: 'api-reference',\r\n outlet: ApiSectionsComponent,\r\n content: [\r\n {\r\n title: 'SelectComponent',\r\n anchor: 'select-component',\r\n outlet: NgApiDocComponent\r\n }\r\n ]\r\n }\r\n];\r\n","export default \"\\r\\nSelected city object: {{selectedCity | json}}\";","export default \"import { Component, OnInit } from '@angular/core';\\r\\n\\r\\n@Component({\\r\\n selector: 'demo-select-bind',\\r\\n templateUrl: 'bind.html'\\r\\n})\\r\\n\\r\\nexport class DemoSelectBindComponent implements OnInit {\\r\\n\\r\\n defaultBindingsList = [\\r\\n { value: 1, label: 'Vilnius' },\\r\\n { value: 2, label: 'Kaunas' },\\r\\n { value: 3, label: 'Pavilnys', disabled: true }\\r\\n ];\\r\\n\\r\\n selectedCity = null;\\r\\n\\r\\n constructor() { }\\r\\n\\r\\n ngOnInit() {\\r\\n this.selectedCity = this.defaultBindingsList[0];\\r\\n }\\r\\n}\";","export default \"import { Injectable } from '@angular/core';\\r\\nimport { Observable, of } from 'rxjs';\\r\\nimport { delay, map } from 'rxjs/operators';\\r\\nimport { HttpClient } from '@angular/common/http';\\r\\n\\r\\nexport interface Person {\\r\\n id: string;\\r\\n isActive: boolean;\\r\\n age: number;\\r\\n name: string;\\r\\n gender: string;\\r\\n company: string;\\r\\n email: string;\\r\\n phone: string;\\r\\n disabled?: boolean;\\r\\n}\\r\\n\\r\\n@Injectable({\\r\\n providedIn: 'root'\\r\\n})\\r\\nexport class DataService {\\r\\n constructor(private http: HttpClient) { }\\r\\n\\r\\n getGithubAccounts(term: string = null) {\\r\\n if (term) {\\r\\n return this.http.get
0\\\">\\r\\n
\\r\\n \\r\\n
\\r\\n
\\r\\n
\\r\\n\\r\\n\\r\\n \\r\\n
\\r\\n
\\r\\n
\\r\\n {{event.name}} - {{event.value | json}}\\r\\n
\\r\\n
\\r\\n\";","export default \"import { Component, OnInit } from '@angular/core';\\r\\nimport { DataService } from './data.service';\\r\\n\\r\\ninterface Event {\\r\\n name: string;\\r\\n value: any;\\r\\n}\\r\\n\\r\\n@Component({\\r\\n selector: 'demo-select-event',\\r\\n templateUrl: 'event.html'\\r\\n})\\r\\n\\r\\nexport class DemoSelectEventComponent implements OnInit {\\r\\n selectedItems: any;\\r\\n items = [];\\r\\n\\r\\n events: Event[] = [];\\r\\n\\r\\n constructor(private dataService: DataService) {\\r\\n this.dataService.getPeople().subscribe(items => {\\r\\n this.items = items;\\r\\n });\\r\\n }\\r\\n\\r\\n ngOnInit() {\\r\\n }\\r\\n\\r\\n onChange($event) {\\r\\n this.events.push({ name: '(change)', value: $event });\\r\\n }\\r\\n\\r\\n onFocus($event: Event) {\\r\\n this.events.push({ name: '(focus)', value: $event });\\r\\n }\\r\\n\\r\\n onBlur($event: Event) {\\r\\n this.events.push({ name: '(blur)', value: $event });\\r\\n }\\r\\n\\r\\n onOpen() {\\r\\n this.events.push({ name: '(open)', value: null });\\r\\n }\\r\\n\\r\\n onClose() {\\r\\n this.events.push({ name: '(close)', value: null });\\r\\n }\\r\\n\\r\\n onAdd($event) {\\r\\n this.events.push({ name: '(add)', value: $event });\\r\\n }\\r\\n\\r\\n onRemove($event) {\\r\\n this.events.push({ name: '(remove)', value: $event });\\r\\n }\\r\\n\\r\\n onClear() {\\r\\n this.events.push({ name: '(clear)', value: null });\\r\\n }\\r\\n\\r\\n onScrollToEnd($event) {\\r\\n this.events.push({ name: '(scrollToEnd)', value: $event });\\r\\n }\\r\\n\\r\\n onSearch($event) {\\r\\n this.events.push({ name: '(search)', value: $event });\\r\\n }\\r\\n}\";","export default \"\\r\\n
\\r\\nSelected: {{selectedAccount | json}}\\r\\n\\r\\n\";","export default \"import { Component, OnInit } from '@angular/core';\\r\\n\\r\\n@Component({\\r\\n selector: 'demo-select-group',\\r\\n templateUrl: 'group.html'\\r\\n})\\r\\n\\r\\nexport class DemoSelectGroupComponent implements OnInit {\\r\\n selectedAccount = 'Adam';\\r\\n accounts = [\\r\\n { name: 'Adam', email: 'adam@email.com', age: 12, country: 'United States', child: { state: 'Active' } },\\r\\n { name: 'Homer', email: 'homer@email.com', age: 47, country: '', child: { state: 'Active' } },\\r\\n { name: 'Samantha', email: 'samantha@email.com', age: 30, country: 'United States', child: { state: 'Active' } },\\r\\n { name: 'Amalie', email: 'amalie@email.com', age: 12, country: 'Argentina', child: { state: 'Active' } },\\r\\n { name: 'Estefanía', email: 'estefania@email.com', age: 21, country: 'Argentina', child: { state: 'Active' } },\\r\\n { name: 'Adrian', email: 'adrian@email.com', age: 21, country: 'Ecuador', child: { state: 'Active' } },\\r\\n { name: 'Wladimir', email: 'wladimir@email.com', age: 30, country: 'Ecuador', child: { state: 'Inactive' } },\\r\\n { name: 'Natasha', email: 'natasha@email.com', age: 54, country: 'Ecuador', child: { state: 'Inactive' } },\\r\\n { name: 'Nicole', email: 'nicole@email.com', age: 43, country: 'Colombia', child: { state: 'Inactive' } },\\r\\n { name: 'Michael', email: 'michael@email.com', age: 15, country: 'Colombia', child: { state: 'Inactive' } },\\r\\n { name: 'Nicolás', email: 'nicole@email.com', age: 43, country: 'Colombia', child: { state: 'Inactive' } }\\r\\n ];\\r\\n\\r\\n constructor() {\\r\\n }\\r\\n\\r\\n ngOnInit() {\\r\\n }\\r\\n}\";","export default \"import { Injectable } from '@angular/core';\\r\\nimport { Observable, of } from 'rxjs';\\r\\nimport { delay, map } from 'rxjs/operators';\\r\\nimport { HttpClient } from '@angular/common/http';\\r\\n\\r\\nexport interface Person {\\r\\n id: string;\\r\\n isActive: boolean;\\r\\n age: number;\\r\\n name: string;\\r\\n gender: string;\\r\\n company: string;\\r\\n email: string;\\r\\n phone: string;\\r\\n disabled?: boolean;\\r\\n}\\r\\n\\r\\n@Injectable({\\r\\n providedIn: 'root'\\r\\n})\\r\\nexport class DataService {\\r\\n constructor(private http: HttpClient) { }\\r\\n\\r\\n getGithubAccounts(term: string = null) {\\r\\n if (term) {\\r\\n return this.http.get
\\r\\n Selected value:
\\r\\n
\";","export default \"import { Component, OnInit } from '@angular/core';\\r\\nimport { Observable } from 'rxjs';\\r\\nimport { DataService } from './data.service';\\r\\n\\r\\n@Component({\\r\\n selector: 'demo-select-multi',\\r\\n templateUrl: 'multi.html'\\r\\n})\\r\\n\\r\\nexport class DemoSelectMultiComponent implements OnInit {\\r\\n \\r\\n people$: Observable\\r\\n
- \\r\\n
- {{item.name}} \\r\\n
{{item.name}}
\\r\\n \\r\\n
\\r\\n \\r\\n
\\r\\n {{item.name}}
\\r\\nCard subtitle
\\r\\n\\r\\n \\r\\n Some quick example text to build\\r\\n
\\r\\n Card link\\r\\n Another link\\r\\n
\\r\\n \\r\\n \\r\\n
\\r\\n\\r\\n
Selected car ID: {{selectedCars | json}}\";","export default \"import { Component, OnInit } from '@angular/core';\\r\\n\\r\\n@Component({\\r\\n selector: 'demo-select-options',\\r\\n templateUrl: 'options.html'\\r\\n})\\r\\n\\r\\nexport class DemoSelectOptionsComponent implements OnInit {\\r\\n selectedCars = [3];\\r\\n cars = [\\r\\n { id: 1, name: 'Volvo' },\\r\\n { id: 2, name: 'Saab', disabled: true },\\r\\n { id: 3, name: 'Opel' },\\r\\n { id: 4, name: 'Audi' },\\r\\n ];\\r\\n\\r\\n ngOnInit() {\\r\\n\\r\\n }\\r\\n\\r\\n toggleDisabled() {\\r\\n const car: any = this.cars[1];\\r\\n car.disabled = !car.disabled;\\r\\n }\\r\\n}\";","export default \"import { Injectable } from '@angular/core';\\r\\nimport { Observable, of } from 'rxjs';\\r\\nimport { delay, map } from 'rxjs/operators';\\r\\nimport { HttpClient } from '@angular/common/http';\\r\\n\\r\\nexport interface Person {\\r\\n id: string;\\r\\n isActive: boolean;\\r\\n age: number;\\r\\n name: string;\\r\\n gender: string;\\r\\n company: string;\\r\\n email: string;\\r\\n phone: string;\\r\\n disabled?: boolean;\\r\\n}\\r\\n\\r\\n@Injectable({\\r\\n providedIn: 'root'\\r\\n})\\r\\nexport class DataService {\\r\\n constructor(private http: HttpClient) { }\\r\\n\\r\\n getGithubAccounts(term: string = null) {\\r\\n if (term) {\\r\\n return this.http.get
\\r\\n
\\r\\n Selected persons: {{selectedPersons | json}}\\r\\n
\";","export default \"import { Component, OnInit } from '@angular/core';\\r\\nimport { concat, Observable, of, Subject } from 'rxjs';\\r\\nimport { DataService, Person } from './data.service';\\r\\nimport { catchError, debounceTime, distinctUntilChanged, switchMap, tap } from 'rxjs/operators';\\r\\n\\r\\n@Component({\\r\\n selector: 'demo-select-search',\\r\\n templateUrl: 'search.html'\\r\\n})\\r\\n\\r\\nexport class DemoSelectSearchComponent implements OnInit {\\r\\n \\r\\n people$: Observable\\r\\n
\\r\\n Selected persons: {{selectedPersons | json}}\\r\\n
\";","export default \"import { Component, OnInit } from '@angular/core';\\r\\nimport { concat, Observable, of, Subject } from 'rxjs';\\r\\nimport { DataService, Person } from './data.service';\\r\\nimport { catchError, debounceTime, distinctUntilChanged, switchMap, tap } from 'rxjs/operators';\\r\\n\\r\\n@Component({\\r\\n selector: 'demo-select-tags',\\r\\n templateUrl: 'tags.html'\\r\\n})\\r\\n\\r\\nexport class DemoSelectTagsComponent implements OnInit {\\r\\n people$: Observable