# materialize-angular

> Material UI Angular library

Latest version **0.7.10** (published 2020-03-08) · MIT license · 0 weekly downloads

## Install

```sh
npm install materialize-angular
pnpm add materialize-angular
yarn add materialize-angular
bun add materialize-angular
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.7.10 |
| Published | 2020-03-08 |
| First published | 2019-03-17 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 6.7 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 17 |
| Author | workylab |
| Maintainers | alexzoul, igayoso, rodwyn |
| Keywords | angular, angular-library, material-ui, material-design, angulario, scss-library, typescript-library, typescript, library |

## Links

- npm: https://www.npmjs.com/package/materialize-angular
- Repository: https://github.com/workylab/materialize-angular
- Homepage: https://materialize-angular.workylab.com
- Issues: https://github.com/workylab/materialize-angular/issues
- npm.io page: https://npm.io/package/materialize-angular

## Dependencies (1)

- [tslib](https://npm.io/package/tslib.md) ^1.9.0

## Alternatives

- [@progress/kendo-ooxml](https://npm.io/package/@progress/kendo-ooxml.md) — 152.1K weekly downloads
- [@progress/kendo-react-ripple](https://npm.io/package/@progress/kendo-react-ripple.md) — 8.0K weekly downloads
- [@progress/kendo-react-orgchart](https://npm.io/package/@progress/kendo-react-orgchart.md) — 4.3K weekly downloads
- [@praxisui/dynamic-fields](https://npm.io/package/@praxisui/dynamic-fields.md) — 2.4K weekly downloads
- [@mesalvo/react-ui](https://npm.io/package/@mesalvo/react-ui.md) — 1.7K weekly downloads

## Recent versions

- 0.7.10 (latest) — 2020-03-08
- 0.7.9 — 2020-03-08
- 0.7.8 — 2020-01-29
- 0.7.7 — 2020-01-28
- 0.7.6 — 2019-09-26
- 0.7.5 — 2019-09-25
- 0.7.4 — 2019-09-24
- 0.7.3 — 2019-09-23
- 0.7.2 — 2019-09-16
- 0.7.1 — 2019-09-16
- 0.7.0 — 2019-09-16
- 0.6.0 — 2019-09-12
- 0.5.6 — 2019-09-10
- 0.5.5 — 2019-09-06
- 0.5.4 — 2019-09-06
- … 118 more at https://npm.io/package/materialize-angular/versions

## README

<p align="center">
  <a href="http://materialize-angular.workylab.com/">
    <img src="https://res.cloudinary.com/workylab/image/upload/v1567652656/materialize-angular_logo.png" width="150">
  </a>
</p>

<h3 align="center">Materialize Angular</h3>

<p align="center">
  Materialize Angular, easiest way to create awesome websites.
  <br>
  <a href="https://materialize-angular.workylab.com/"><strong>-- Check our site --</strong></a>
  <br>
  <a href="https://workylab.github.io/materialize-angular"><strong>-- Check our Github pages site --</strong></a>
  <br>
  <br>
  <a href="https://www.patreon.com/materialize_angular"> <img src="https://img.shields.io/endpoint.svg?url=https://shieldsio-patreon.herokuapp.com/materialize_angular" />
  <a href="https://circleci.com/gh/workylab/materialize-angular">
    <img src="https://circleci.com/gh/workylab/materialize-angular/tree/master.svg?style=svg" alt="Circle CI badge" />
  </a>
  <a href="https://badge.fury.io/js/materialize-angular">
    <img src="https://badge.fury.io/js/materialize-angular.svg" alt="npm version badge" />
  </a>
  <a href="https://david-dm.org/workylab/materialize-angular">
    <img src="https://david-dm.org/workylab/materialize-angular.svg" alt="dependencies Status badge" />
    </a>
  <a href="https://david-dm.org/workylab/materialize-angular#info=devDependencies">
    <img src="https://david-dm.org/workylab/materialize-angular/dev-status.svg" alt="devDependency Status badge" />
  </a>
  <a href="https://spectrum.chat/materialize">
    <img src="https://withspectrum.github.io/badge/badge.svg" alt="Join the community on Spectrum" />
  </a>
  <a href="https://codeclimate.com/github/workylab/materialize-angular/maintainability">
    <img src="https://api.codeclimate.com/v1/badges/b87b6059adefcd07fbd8/maintainability" />
  </a>
  <a href="https://codeclimate.com/github/workylab/materialize-angular/test_coverage">
    <img src="https://api.codeclimate.com/v1/badges/b87b6059adefcd07fbd8/test_coverage" />
  </a>
  <a href="https://npmjs.com/package/materialize-angular">
    <img src="https://img.shields.io/npm/dm/materialize-angular.svg" alt="Monthly npm downloads" />
  </a>
</p>

## Raising funds

`materialize-angular` is not backed by a company (yet :D), so the future of this project depends on you. Become a [Patreon](https://www.patreon.com/materialize_angular), check Github Sponsor or [contact us](https://workylab.com/) directly.

## Table of contents

- [Why Materialize Angular](#why-materialize-angular)
- [Quickstart](#quickstart)
- [Documentation](#documentation)
- [Available Features](#available-features)
- [Supported Browsers](#supported-browsers)
- [Changelog](#changelog)
- [Contributing](#contributing)
- [Copyright and license](#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:
```bash
  npm install --save materialize-angular
```

#### Step 2: Add styles
Import materialize angular styles by writing the following lines in your `styles.scss`file (it is located in `my-project/src/styles.scss`)

```SASS
$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.

```typescript
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:

```typescript
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](https://materialize-angular.workylab.com/) docs site. Also, if you can't access to our domain, you can access using our [Github pages](https://workylab.github.io/materialize-angular)

## Available features

| Components       | Docs         |
| ---------------- | ------------ |
| Accordion        | [Docs][1]    |
| Button           | [Docs][2]    |
| Card             | [Docs][3]    |
| Calendar         | [Docs][4]    |
| Collapsible      | [Docs][5]    |
| Icon             | [Docs][6]    |
| Modal            | [Docs][7]    |
| Ripple           | [Docs][8]    |

| Forms            | Docs         |
| ---------------- | ------------ |
| Button Toggle    | [Docs][9]    |
| Checkbox         | [Docs][10]   |
| Input            | [Docs][11]   |
| Label            | [Docs][12]   |
| Message          | [Docs][13]   |
| Radio            | [Docs][14]   |
| Select           | [Docs][15]   |
| Slider           | [Docs][16]   |
| Switch           | [Docs][17]   |
| Textarea         | [Docs][18]   |

| Layout           | Docs         |
| ---------------- | ------------ |
| Drawer           | [Docs][19]   |
| Navbar           | [Docs][20]   |
| Tab              | [Docs][21]   |

 [1]: https://materialize-angular.workylab.com/guide/components/accordion
 [2]: https://materialize-angular.workylab.com/guide/components/button
 [3]: https://materialize-angular.workylab.com/guide/components/card
 [4]: https://materialize-angular.workylab.com/guide/components/calendar
 [5]: https://materialize-angular.workylab.com/guide/components/collapsible
 [6]: https://materialize-angular.workylab.com/guide/components/icon
 [7]: https://materialize-angular.workylab.com/guide/components/modal
 [8]: https://materialize-angular.workylab.com/guide/components/ripple
 [9]: https://materialize-angular.workylab.com/guide/forms/button-toggle
 [10]: https://materialize-angular.workylab.com/guide/forms/checkbox
 [11]: https://materialize-angular.workylab.com/guide/forms/input
 [12]: https://materialize-angular.workylab.com/guide/forms/label
 [13]: https://materialize-angular.workylab.com/guide/forms/message
 [14]: https://materialize-angular.workylab.com/guide/forms/radio
 [15]: https://materialize-angular.workylab.com/guide/forms/select
 [16]: https://materialize-angular.workylab.com/guide/forms/slider
 [17]: https://materialize-angular.workylab.com/guide/forms/switch
 [18]: https://materialize-angular.workylab.com/guide/forms/textarea
 [19]: https://materialize-angular.workylab.com/guide/layout/drawer
 [20]: https://materialize-angular.workylab.com/guide/layout/navbar
 [21]: https://materialize-angular.workylab.com/guide/layout/tab

 ## Supported Browsers

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

## Changelog
[Learn about the latest improvements](CHANGELOG.md).

## Contributing
[Workylab](https://github.com/workylab) welcomes contributions to this project. When contributing, please [follow this steps](CONTRIBUTING.md).

## Copyright and license
&copy; 2019 [WorkyLab](https://github.com/workylab) This project is licensed under the MIT License - see the [license file](LICENSE) for details.

---
_Source: https://npm.io/package/materialize-angular · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._