@angular-material-extensions/select-icon v2.0.1

@angular-material-extensions/select-icon - Angular component that allows to select an option in form of a material design icon button

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

Library's components

• <mat-select-icon> used to display the main component

Dependencies

• Angular developed and tested with 10.x

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

interface MatSelectIcon {
  url: string;
  value?: any;
  color?: ThemePalette;
  tags?: string[]; // todo: 10.2020
}

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');
  }

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]);

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

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

License

Copyright (c) 2020 Anthony Nahas. Licensed under the MIT License (MIT)

                                                                                                      </p>