NgMatIconBar

The component creates an icon-bar which expands a list of Material icons on click. See the demo for the effect:

Installation

Install the dependency via npm:

npm install ng-mat-icon-bar --save

or yarn

yarn add ng-mat-icon-bar

and import the module into your apps app.module.ts like this:

import { NgMatIconBarModule } from 'ng-mat-icon-bar';

...

@NgModule({
  ...,
  imports: [
    ...,
    NgMatIconBarModule
  ],
  ...
})

and you also need to add Material Icons webfont by adding

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

to your index.html.

Usage

You can use the component with its selector:

<mat-icon-bar>
    // add your icons in here like this:
    <mat-icon (click)="doSomething()">icon</mat-icon>
</mat-icon-bar>

The component has two event outputs:

• onOpen: triggered when bar is shown
• onClose: triggered when bar is closed

Optionally you can force the component to show a confirmation dialog before closing. This is done by setting [confirmClose]="true". You can then provide a Translation object to use custom text in the confirm-dialog be setting [translation]-property.

Contributions

Please don't hesitate to file an issue or send in a PR if you have any improvements or found bugs.