Home

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

npm version npm demo docs: typedoc Join the chat at https://gitter.im/angular-material-extensions/Lobby Build Status codecov dependency Status devDependency Status Greenkeeper Badge license

<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

<a name="demo"/>

Demo

View all the directives and components in action at https://angular-material-extensions.github.io/select-country

<a name="components"/>

Library's components


<a name="dependencies"/>

Dependencies


<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:

<a name="api"/>

API

<mat-select-icon> used to display the main component - see the demo examples

optionbindtypedefaultdescription
iconsInput()MatSelectIcon[]-the icons to display
valueInput()MatSelectIcon-the selected value
onIconSelectedOutput()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


<a name="support"/>

Support

Built by and for developers :heart: we will help you :punch:


jetbrains logo

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>