https://github.com/layzeedk/ngx-material-components
[WIP] Material Components for Angular
https://github.com/layzeedk/ngx-material-components
angular angular-components components material material-components material-components-web material-design mdc-web
Last synced: 3 months ago
JSON representation
[WIP] Material Components for Angular
- Host: GitHub
- URL: https://github.com/layzeedk/ngx-material-components
- Owner: LayZeeDK
- License: mit
- Created: 2018-06-03T01:08:30.000Z (almost 7 years ago)
- Default Branch: develop
- Last Pushed: 2018-06-19T08:41:35.000Z (almost 7 years ago)
- Last Synced: 2025-02-23T06:41:31.539Z (3 months ago)
- Topics: angular, angular-components, components, material, material-components, material-components-web, material-design, mdc-web
- Language: TypeScript
- Size: 230 KB
- Stars: 1
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# Material Components for Angular (ngx-material-components)
Material Components for Angular web apps.
Angular Components implementing [*Material Components for the Web*](https://material.io/develop/web) Adapters.
## Installation
Install using NPM CLI
```
npm install --save ngx-material-components
```
or using Yarn CLI
```
yarn add ngx-material-components
```
## Checkbox
### Sass imports
```scss
// styles.scss
@import "~@material/ripple/mdc-ripple";
@import "~@material/checkbox/mdc-checkbox";
@import "~@material/form-field/mdc-form-field"; // Optional - for example below
```
### Angular Module import
```typescript
// my-feature.module.ts
import { NgModule } from '@angular/core';
import { MdcCheckboxModule } from 'ngx-material-components';
@NgModule({
imports: [
MdcCheckboxModule,
],
})
export class MyFeatureModule {}
```
### Template usage
```html
My checkbox
```
### Component usage
#### Component template
```html
My checkbox
```
#### Component model
```typescript
// my-feature.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'app-my-feature',
templateUrl: './my-feature.component.html',
})
export class MyFeatureComponent {
checked: boolean = false;
}
```