Socket
Socket
Sign inDemoInstall

@angular-material-extensions/components

Package Overview
Dependencies
10
Maintainers
1
Versions
1
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

    @angular-material-extensions/components


Version published
Weekly downloads
1
Maintainers
1
Created
Weekly downloads
 

Readme

Source

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


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)

FAQs

Last updated on 03 Aug 2019

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc