@angular-material-extensions/components

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

Table of Contents

• Demo
• Dependencies
• Installation
• API
• Usage
• Other Angular Libraries
• Support
• License

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

• ngx-auth-firebaseui
• ngx-linkifyjs
• @firebaseui/ng-bootstrap
• @angular-material-extensions/password-strength
• @angular-material-extensions/google-maps-autocomplete
• @angular-material-extensions/link-preview
• @angular-material-extensions/pages
• @angular-material-extensions/contacts
• @angular-material-extensions/faq
• @angular-material-extensions/combination-generator

---

Support

• Drop an email to: Anthony Nahas
• or open an appropriate issue
• let us chat on Gitter

Built by and for developers ❤️ we will help you 👊

---

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)