1.2.0 • Published 5 years ago

@angular-material-extensions/components v1.2.0

Weekly downloads
5
License
-
Repository
-
Last release
5 years ago

@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

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


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)