workylab / materialize-angular

Angular library to create awesome materialize websites in angular

Materialize Angular

Materialize Angular, easiest way to create awesome websites.
-- Check our site --
-- Check our Github pages site --

Raising funds

materialize-angular is not backed by a company (yet :D), so the future of this project depends on you. Become a Patreon, check Github Sponsor or contact us directly.

Table of contents

• Why Materialize Angular
• Quickstart
• Documentation
• Available Features
• Supported Browsers
• Changelog
• Contributing
• Copyright and license

Why Materialize Angular

Materialize Angular is a library to help you easily doing beautiful websites. The goal of the project is to help the user in the creation of websites based on Angular and using the Material Design specification. Also, we are trying to do awesome and best quality components for different website types.

It's a very early version but it is ready for production environments. We're working on LTS versions and try to do the library compatible with different Angular versions.

Quickstart

Step 1: Install npm package:

  npm install --save materialize-angular

Step 2: Add styles

Import materialize angular styles by writing the following lines in your styles.scssfile (it is located in my-project/src/styles.scss)

$materialize-fonts-path: '~materialize-angular/fonts';

@import '~materialize-angular/styles/materialize-angular.scss';

Step 3: Import component modules in your app module:

Import just specific components by importing each one like MaterializeButtonModule, MaterializeCardModule, etc.

import { Component, NgModule } from '@angular/core';
import { MaterializeButtonModule, MaterializeCardModule } from 'materialize-angular';

@NgModule({
  imports: [
    MaterializeButtonModule,
    MaterializeCardModule
  ]
})
export class MyModule {}

Step 4: Use imported components:

Finally use the imported components into your apps components:

import { Component } from '@angular/core';

@Component({
  selector: 'app-demo',
  template: `
    <materialize-card>
      <materialize-button>Hello From Materialize Angular!</materialize-button>
    </materialize-card>
  `
})
export class MyDemoComponent {}

Documentation

Documentation is available on the Materialize Angular docs site. Also, if you can't access to our domain, you can access using our Github pages

Available features

Components	Docs
Accordion	Docs
Button	Docs
Card	Docs
Calendar	Docs
Collapsible	Docs
Icon	Docs
Modal	Docs
Ripple	Docs

Forms	Docs
Button Toggle	Docs
Checkbox	Docs
Input	Docs
Label	Docs
Message	Docs
Radio	Docs
Select	Docs
Slider	Docs
Switch	Docs
Textarea	Docs

Layout	Docs
Drawer	Docs
Navbar	Docs
Tab	Docs

Supported Browsers

Browser	Supported versions
Google Chrome	75+
Safari	12.1+
Edge	18+
Firefox	68+
Internet Explorer	11+

Changelog

Learn about the latest improvements.

Contributing

Workylab welcomes contributions to this project. When contributing, please follow this steps.

Copyright and license

© 2019 WorkyLab This project is licensed under the MIT License - see the license file for details.

materialize-angular's Issues

Click events stop registering randomly

Describe the bug
When clicking on the arrow for the next month in the calendar pop up some clicks don't register.

To Reproduce
Steps to reproduce the behavior:

1. Open datepicker popup
2. Click on arrow for next month
3. Repeatedly click fast enough
4. Some clicks don't register

Expected behavior
On every click I should see a new month.