Learn about our RFC process, Open RFC meetings & more.Join in the discussion! »


7.0.0 • Public • Published

Material Community Components

Angular Material components that are not implemented in official package.

npm version CircleCI patreon

The idea of the Material Community Components is to provide components that aren't available in the Angular Material2 yet.

All the components are created using just Angular, Material 2 and CDK.

Check out our documentation & live demo

Components Status

All the components have the prefix mcc followed by the package name.

Component Status package
Carousel - ---
Color Picker Available mcc-color-picker
File Manager - ---
Google Recaptcha - ---
Scrollspy Available mcc-scrollspy
Speed Dial Available mcc-speed-dial
Timer Picker Available mcc-timer-picker

If you miss any component, please follow the CONTRIBUTION GUIDELINE to open an issue.


step: 1

We use some components from the Angular Material. To be able to use this component, you have to install the @angular/animations. If you follow all the steps in Material Guide, you already have this step done.

    npm install --save @angular/animations

Note: @angular/animations uses the WebAnimation API that isn't supported by all browsers yet. If you want to support Material component animations in these browsers, you'll have to include a polyfill.

import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
export class PizzaPartyAppModule { }

If you don't want to add another dependency to your project, you can use the NoopAnimationsModule.

import {NoopAnimationsModule} from '@angular/platform-browser/animations';
export class PizzaPartyAppModule { }

step: 2

Install material community components package:

    npm install material-community-components


  yarn add material-community-components


To use the same theme of Angular Material add the following code to your style.scss.

@import '~@angular/material/theming';
@import '~material-community-components/theming';
@include mat-core();
// Define the palettes for your theme using the Material Design palettes available in palette.scss 
// (imported above). For each palette, you can optionally specify a default, lighter, and darker 
// hue. Available color palettes: https://material.io/design/color/ 
$demo-primary: mat-palette($mat-green);
$demo-accent: mat-palette($mat-pink, A200, A100, A400);
// The warn palette is optional (defaults to red). 
$demo-warn: mat-palette($mat-red);
// Create the theme object (a Sass map containing all of the palettes). 
$demo-theme: mat-light-theme($demo-primary, $demo-accent, $demo-warn);
// build angular material theme 
@include angular-material-theme($demo-theme);
// pass angular material theme to material community components 
@include mcc-theme($demo-theme);

this is available for timer-picker and speed-dial

How to use

For more examples, you can see our app-demo folder or read the full documentation


The MIT License (MIT) Copyright (c) 2018


alt text


npm i material-community-components

DownloadsWeekly Downloads






Unpacked Size

1.42 MB

Total Files


Last publish


  • avatar