<p align="center"> <img alt="angular-material-extensions's logo" height="256px" width="256px" style="text-align: center;" src="https://cdn.jsdelivr.net/gh/angular-material-extensions/select-icon@master/assets/angular-material-extensions-logo.svg"
npm install @angular-material-extensions/select-icon
height="256px" width="256px" style="text-align: center;"
src="https://cdn.jsdelivr.net/gh/angular-material-extensions/select-icon@master/assets/angular-material-extensions-logo.svg">










src="https://raw.githubusercontent.com/angular-material-extensions/select-icon/HEAD/assets/v1.0.0/demo.gif">
If you like this project, support angular-material-extensions
by starring :star: and sharing it :loudspeaker:
View all the directives and components in action at https://angular-material-extensions.github.io/select-country
used to display the main component---
10.x---
If Angular Material Design is not setup, just run ng add @angular/material learn more
Now add the library via the angular schematics
``shell`
ng add @angular-material-extensions/select-icon
Now install @angular-material-extensions/select-icon via:`shell`
npm install --save @angular-material-extensions/select-icon
If you installed the library via angular schematics, you can skip this step
`typescript
import { MatSelectIconModule } from '@angular-material-extensions/select-icon';
@NgModule({
declarations: [AppComponent, ...],
imports: [MatSelectIconModule, ...],
bootstrap: [AppComponent]
})
export class AppModule {
}
`
Other modules in your application like for lazy loading import MatSelectIconModule into your feature module:
| option | bind | type | default | description |
|:-------------------|:--------:|:------:|:------------:|:-------------------------------------------------------------------------------------------------|
| icons | Input() | MatSelectIcon[] | - | the icons to displayInput()
| value | | MatSelectIcon | - | the selected valueOutput()
| onIconSelected | | EventEmitter | - | emits the selected icon as object (see the interface below)
`typescript`
interface MatSelectIcon {
url: string;
value?: any;
color?: ThemePalette;
tags?: string[]; // todo: 10.2020
}
`html`
`typescript
import { MatSelectIcon } from '@angular-material-extensions/select-icon';
icons: MatSelectIcon[] = [
{
url: 'assets/icons/countrys-flags/lebanon.svg'
// color: 'accent'
},
{
url: 'assets/icons/countrys-flags/germany.svg',
color: 'warn'
},
{
url: 'assets/icons/countrys-flags/italy.svg',
color: 'primary'
},
{
url: 'assets/icons/countrys-flags/france.svg',
color: 'primary'
},
{
url: 'assets/icons/countrys-flags/spain.svg',
color: 'accent'
},
{
url: 'assets/icons/countrys-flags/united-kingdom.svg',
color: 'accent'
}
];
onIconSelected(selectedIcon: MatSelectIcon) {
console.log('selected icon');
}
`
src="https://raw.githubusercontent.com/angular-material-extensions/select-icon/HEAD/assets/v1.0.0/demo.png">
#### with reactive forms
`html`
`typescript
import { MatSelectIcon } from '@angular-material-extensions/select-icon';
selectIconFC: FormControl = new FormControl();
`
with selected value
`html`
`typescript
import { MatSelectIcon } from '@angular-material-extensions/select-icon';
selectIconDefault: FormControl = new FormControl(this.icons[0]);
`
Build the library
`bash`
$ npm run build:lib
Serve the demo app
`bash``
$ npm start
---
This project is supported by jetbrains with 1 ALL PRODUCTS PACK OS LICENSE incl. webstorm
---
Copyright (c) 2020 Anthony Nahas. Licensed under the MIT License (MIT)
height="92px" width="92px" style="text-align: center;"
src="https://cdn.jsdelivr.net/gh/angular-material-extensions/select-icon@master/assets/badge_made-in-germany.svg">