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.