Material Community Components

Angular Material components that are not implemented in official package.

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 Angular, Material 2 and CDK. Since version 7.1.0 only Angular 9+ is supported.

The color-picker component has an additional peer-dependency to @thebespokepixel/es-tinycolor to help with color calculations.

Check out our documentation & live demo

Components

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

Component	Package	Screenshot
Color Picker	mcc-color-picker
Scrollspy	mcc-scrollspy
Speed Dial	mcc-speed-dial
Timer Picker	mcc-timer-picker

If you miss any component, please follow the CONTRIBUTION GUIDELINE to open an issue or file your idea here.

Install

step: 1

We use some components from Angular Material. To be able to use this components, 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';

@NgModule({
  ...
  imports: [BrowserAnimationsModule],
  ...
})
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';

@NgModule({
  ...
  imports: [NoopAnimationsModule],
  ...
})
export class PizzaPartyAppModule { }

step: 2

Install material community components package:

    npm install material-community-components

  yarn add material-community-components

Theming

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

@use '~@angular/material' as mat;
@use '~material-community-components/theming' as mcc;

@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.define-palette(mat.$green-palette);
$demo-accent: mat.define-palette(mat.$pink-palette, A200, A100, A400);

// The warn palette is optional (defaults to red).
$demo-warn: mat.define-palette(mat.$red-palette);

// Create the theme object (a Sass map containing all of the palettes).
$demo-theme: mat.define-light-theme($demo-primary, $demo-accent, $demo-warn);

// build angular material theme
@include mat.all-component-themes($demo-theme);

// pass angular material theme to material community components
@include mcc.mcc-theme($demo-theme);

Right now only timer-picker and speed-dial do support the theme (see ISSUE-172).

Upgrading from 7.x.x

Since version 9.0.0 the lib only provides secondary entry-points for import. To migrate change your imports like that:

Before:

import { MccColorPickerModule} from 'material-community-components';
import { MccTimerPickerModule} from 'material-community-components';
import { MccSpeedDialModule} from 'material-community-components';
import { MccScrollspyModule} from 'material-community-components';

After:

import { MccColorPickerModule} from 'material-community-components/color-picker';
import { MccTimerPickerModule} from 'material-community-components/timer-picker';
import { MccSpeedDialModule} from 'material-community-components/speed-dial';
import { MccScrollspyModule} from 'material-community-components/scrollspy';

How to use

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

tiaguinho / material-community-components

readme