Awesome
<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"> </p>@angular-material-extensions/select-icon - Angular component that allows to select an option in form of a material design icon button
<p align="center"> <img alt="@angular-material-extensions/select-icon demonstration" style="text-align: center;" src="https://raw.githubusercontent.com/angular-material-extensions/select-icon/HEAD/assets/v1.0.0/demo.gif"> </p>Built by and for developers :heart:
Do you have any question or suggestion ? Please do not hesitate to contact us! Alternatively, provide a PR | open an appropriate issue here
If you like this project, support angular-material-extensions by starring :star: and sharing it :loudspeaker:
Table of Contents
- Demo
- Components
- Dependencies
- Installation
- API
- Usage
- Run Demo App Locally
- Other Angular Libraries
- Support
- License
Demo
View all the directives and components in action at https://angular-material-extensions.github.io/select-country
<a name="components"/>Library's components
<mat-select-icon>
used to display the main component
<a name="dependencies"/>
Dependencies
- Angular developed and tested with
10.x
<a name="installation"/>
Installation
1. Install via ng add. (Recommended)
If Angular Material Design is not setup, just run ng add @angular/material
learn more
Now add the library via the angular schematics
ng add @angular-material-extensions/select-icon
2. Install via npm. (Alternative)
Now install @angular-material-extensions/select-icon
via:
npm install --save @angular-material-extensions/select-icon
Import the library
If you installed the library via angular schematics, you can skip this step
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:
API
<mat-select-icon>
used to display the main component - see the demo examples
option | bind | type | default | description |
---|---|---|---|---|
icons | Input() | MatSelectIcon[] | - | the icons to display |
value | Input() | MatSelectIcon | - | the selected value |
onIconSelected | Output() | EventEmitter<MatSelectIcon> | - | emits the selected icon as object (see the interface below) |
interface MatSelectIcon {
url: string;
value?: any;
color?: ThemePalette;
tags?: string[]; // todo: 10.2020
}
<a name="usage"/>
Usage
<mat-select-icon [icons]="icons" (onIconSelected)="onIconSelected($event)"></mat-select-icon>
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');
}
<p align="center">
<img alt="@angular-material-extensions/select-icon demonstration" style="text-align: center;"
src="https://raw.githubusercontent.com/angular-material-extensions/select-icon/HEAD/assets/v1.0.0/demo.png">
</p>
with reactive forms
<mat-select-icon [icons]="icons" [formControl]="selectIconFC"></mat-select-icon>
import { MatSelectIcon } from '@angular-material-extensions/select-icon';
selectIconFC: FormControl = new FormControl();
with selected value
<mat-select-icon [icons]="icons" [formControl]="selectIconDefault"></mat-select-icon>
import { MatSelectIcon } from '@angular-material-extensions/select-icon';
selectIconDefault: FormControl = new FormControl(this.icons[0]);
<a name="run-demo-app-locally"/>
Run Demo App Locally
Build the library
$ npm run build:lib
Serve the demo app
$ npm start
Other Angular Libraries
- ngx-auth-firebaseui
- ngx-linkifyjs
- @angular-material-extensions/password-strength
- @angular-material-extensions/google-maps-autocomplete
- @angular-material-extensions/link-preview
- @angular-material-extensions/fab-menu
- @angular-material-extensions/select-country
- @angular-material-extensions/pages
- @angular-material-extensions/contacts
<a name="support"/>
Support
- Drop an email to: Anthony Nahas
- or open an appropriate issue
- let us chat on Gitter
Built by and for developers :heart: we will help you :punch:
This project is supported by jetbrains with 1 ALL PRODUCTS PACK OS LICENSE incl. webstorm
<a name="license"/>
License
Copyright (c) 2020 Anthony Nahas. Licensed under the MIT License (MIT) <p align="center"> <img alt="angular-material-extensions's logo" 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"> </p>