@angular-material-extensions/components

<p align="center"> <img alt="angular-material-extensions's logo" height="256px" width="256px" style="text-align: center;" src="https://cdn.rawgit.com/angular-material-extensions/core/master/assets/angular-material-extensions-logo.svg"> </p>

Usage no npm install needed!

<script type="module">
  import angularMaterialExtensionsComponents from 'https://cdn.skypack.dev/@angular-material-extensions/components';
</script>

README

angular-material-extensions's logo

@angular-material-extensions/components - contains a set of prebuilt extended angular material components, simple API and easy to use.

Table of Contents

Demo

View all the directives in action at https://angular-material-extensions.io/

Dependencies

  • Angular developed and tested with 8.x

Installation

Now install @angular-material-extensions/components via:

npm install --save @angular-material-extensions/components

Components

mat-menu-button - material selection box with icons or images learn more

Import the library

Once installed you need to import the main module:

import { MatMenuButtonModule } from '@angular-material-extensions/components';

The only remaining part is to list the imported module in your application module. The exact method will be slightly different for the root (top-level) module for which you should end up with the code similar to (notice MatPasswordStrengthModule .forRoot()):

import { MatMenuButtonModule } from '@angular-material-extensions/components';
import { MatDialogModule } from '@angular/material';

@NgModule({
  declarations: [AppComponent, ...],
  imports: [
    MatMenuButtonModule,
    MatDialogModule,
     ...],  
  bootstrap: [AppComponent]
})
export class AppModule {
}

Usage

<mat-menu-button [menuItems]="menuItems" 
                 (onMenuItemSelected)="onMenuItemSelected($event)">
</mat-menu-button>

import {MatMenuButtonItem} from '@angular-material-extensions/components';


menuItems: MatMenuButtonItem[] = [
    {
      key: 'mute_key',
      imgURL: 'assets/img/icons/essential-collection/png/mute.png',
      text: 'Mute'
    },
    {
      key: 'play_key',
      imgURL: 'assets/img/icons/essential-collection/png/play-button-1.png',
      text: 'Play'
    },
    {
      key: 'pause_key',
      imgURL: 'assets/img/icons/essential-collection/png/pause-1.png',
      text: 'Pause'
    },
  ];

onMenuItemSelected(menuKey: string) {
    console.log('menu key:', menuKey);
  }

Other Angular Libraries

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

License

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