Angular Material Simple Components
A module that simplify design elements based on Angular Material Design. With additional features that are similar to NgMessage to input validations.
Demo
Demo Hosted on github.io Click Here Quick Links:Installation
Npm
Change to your project's root directory. ```bashTo install latest
npm install angular-material-simple-components
To install latest and update package.json
npm install angular-material-simple-components --save
```
setup
install modules ```bashinstall npm modules
npm install
```
Include the angular-material-simple-components module as a dependency in your application.
```javascript
angular.module('myApp', 'ngMaterial', 'angular-material-simple-components');
```
Usage
Example Template ```html<text-input icon="text_fields" label="Text Input Sample" ng-model="input" is-required="true" max-length="50"><error-message error="required">This field is required.</error-message></text-input><number-input icon="attach_money" label="Number Input Sample" ng-model="number" is-required="true" max-length="50"><error-message error="required">This field is required.</error-message></number-input><image-input name="image" ng-model="image" is-required="true"><error-message error="required">This field is required.</error-message><error-message error="image">This field must be a valid image.</error-message></image-input><search-input label="Search Input Sample" name="search" ng-model="search" ></search-input><html-text-area-input name="htmlTextArea" icon="text_fields" label="Html Input Sample" ng-model="htmlTextArea" is-required="true" max-length="50"><error-message error="required">This field is required.</error-message></html-text-area-input>Documentation
Directives
errorMessage
errorMessage is a simplification of ngMessage, it is used inside of the components
```
error="" message="">
... message
```
Attributes
| Param | Type | Details | | :--: | :--: | :--: | | error | string= | The key of error. (key of $error object on an ngModel instance) | | message | string= | The message to show when the error happens (You can put error inside the component or on the attribute message) |Components
textInput
textInput is a component to input text
```
name="" label="" icon="" type="" ng-model="" is-disabled="" is-required="" no-float="" max-length="" min-length="" >
...
```
Attributes
| Param | Type | Details | | :--: | :--: | :--: | | name | string= | Property name of the form under which the control is published. | | label | string= | The label of the input. | | icon | string= | Icon class name based on Material Icons. When present, will put a icon on left of component. | | type | string= | The type of component (text, password or email, url). | | ng-model | string= | The ngModel directive. | | is-disabled | boolean= | If the expression is truthy, then the disabled attribute will be set on the element. | | is-required | boolean= | Sets required attribute if set to true. | | no-float | boolean= | When present, placeholder attributes on the input will not be converted to floating labels. | | max-length | number= | Sets maxlength validation error key if the value is longer than maxlength. | | min-length | number= | Sets minlength validation error key if the value is shorter than minlength. |numberInput
numberInput is a component to input numbers
```
name="" label="" icon="" ng-model="" is-disabled="" is-required="" no-float="" max="" min="" step="" >
...
```
Attributes
| Param | Type | Details | | :--: | :--: | :--: | | name | string= | Property name of the form under which the control is published. | | label | string= | The label of the input. | | icon | string= | Icon class name based on Material Icons. When present, will put a icon on left of component. | | ng-model | string= | The ngModel directive. | | is-disabled | boolean= | If the expression is truthy, then the disabled attribute will be set on the element. | | is-required | boolean= | Sets required attribute if set to true. | | no-float | boolean= | When present, placeholder attributes on the input will not be converted to floating labels. | | max | number= | Sets max number value allowed. | | min | number= | Sets min number value allowed. | | step | number= | Sets step increment value. |searchInput
searchInput is a component to input text
```
name="" label="" ng-model="" is-disabled="" is-required="" no-float="" max-length="" min-length="" >
...
```
Attributes
| Param | Type | Details | | :--: | :--: | :--: | | name | string= | Property name of the form under which the control is published. | | label | string= | The label of the input. | | ng-model | string= | The ngModel directive. | | is-disabled | boolean= | If the expression is truthy, then the disabled attribute will be set on the element. | | is-required | boolean= | Sets required attribute if set to true. | | max-length | number= | Sets maxlength validation error key if the value is longer than maxlength. | | min-length | number= | Sets minlength validation error key if the value is shorter than minlength. |textAreaInput
textAreaInput is a component to input long texts
```
name="" label="" icon="" ng-model="" is-disabled="" is-required="" no-float="" max-length="" min-length="" >
...
```
Attributes
| Param | Type | Details | | :--: | :--: | :--: | | name | string= | Property name of the form under which the control is published. | | label | string= | The label of the input. | | icon | string= | Icon class name based on Material Icons. When present, will put a icon on left of component. | | ng-model | string= | The ngModel directive. | | is-disabled | boolean= | If the expression is truthy, then the disabled attribute will be set on the element. | | is-required | boolean= | Sets required attribute if set to true. | | no-float | boolean= | When present, placeholder attributes on the input will not be converted to floating labels. | | max-length | number= | Sets maxlength validation error key if the value is longer than maxlength. | | min-length | number= | Sets minlength validation error key if the value is shorter than minlength. |htmlTextAreaInput
htmlTextAreaInput is a component to input, edit and preview long html texts
```
name="" label="" icon="" ng-model="" is-disabled="" is-required="" max-length="" min-length="" >
...
```
Attributes
| Param | Type | Details | | :--: | :--: | :--: | | name | string= | Property name of the form under which the control is published. | | label | string= | The label of the input. | | icon | string= | Icon class name based on Material Icons. When present, will put a icon on left of component. | | ng-model | string= | The ngModel directive. | | is-disabled | boolean= | If the expression is truthy, then the disabled attribute will be set on the element. | | is-required | boolean= | Sets required attribute if set to true. | | max-length | number= | Sets maxlength validation error key if the value is longer than maxlength. | | min-length | number= | Sets minlength validation error key if the value is shorter than minlength. |imageInput
imageInput is a component to input Image
```
name="" ng-model="" is-disabled="" is-required="" preview="" show-buttons="" allow-webcam="" override-class="" fallback-img="" take-picture-text="" sel-picture-text="" remove-picture-text="" >
...
```
Attributes
| Param | Type | Details | | :--: | :--: | :--: | | name | string= | Property name of the form under which the control is published. | | ng-model | string= | The ngModel directive. | | is-disabled | boolean= | If the expression is truthy, then the disabled attribute will be set on the element. | | is-required | boolean= | Sets required attribute if set to true. | | preview | boolean= | Allow preview the input image. | | show-buttons | boolean= | Allow show the control buttons of the input (Select and Remove Image). | | allow-webcam | boolean= | Allow take picture from user webcam. | | override-class | string= | Css class to put on preview image div. | | fallback-img | string= | Url of fallback image to present when user don't have a valid image or not selected one. | | take-picture-text | string= | Button text, default: "Take a photo". | | sel-picture-text | string= | Button text, default: "Select a picture". | | remove-picture-text | string= | Button text, default: "Remove picture". |timeInput
timeInput is a component to input time
```
name="" label="" icon="" ng-model="" is-disabled="" is-required="" no-float="" >
...
```
Attributes
| Param | Type | Details | | :--: | :--: | :--: | | name | string= | Property name of the form under which the control is published. | | label | string= | The label of the input. | | icon | string= | Icon class name based on Material Icons. When present, will put a icon on left of component. | | ng-model | string= | The ngModel directive. | | is-disabled | boolean= | If the expression is truthy, then the disabled attribute will be set on the element. | | is-required | boolean= | Sets required attribute if set to true. | | no-float | boolean= | When present, placeholder attributes on the input will not be converted to floating labels. |dateInput
dateInput is a component to input date
```
name="" label="" icon="" ng-model="" is-disabled="" is-required="" max-date="" min-date="" filter-date="" date-mask="">
...
```
Attributes
| Param | Type | Details | | :--: | :--: | :--: | | name | string= | Property name of the form under which the control is published. | | label | string= | The label of the input. | | ng-model | string= | The ngModel directive. | | is-disabled | boolean= | If the expression is truthy, then the disabled attribute will be set on the element. | | is-required | boolean= | Sets required attribute if set to true. | | max-date | date= | The max date allowed in input. | | min-date | date= | The min date allowed in input. | | filter-date | function= | The function to used to filter the allowed dates in the input, ``function(testDate : date) : boolean``. |
| date-mask | string= | String mask based on ngMask, default: '19/39/9999'. |
mdPagination
mdPagination is a component to pagination
```
items-per-page="" current-page="" n-items="" is-disabled="">
...
```
Attributes
| Param | Type | Details | | :--: | :--: | :--: | | items-per-page | number= | Quantity of items to show per page. | | n-items | number= | Total of items to paginate. | | current-page | number= | The current page to show, this bind two way. | | is-disabled | boolean= | If the expression is truthy, then the disabled attribute will be set on the element. |Services
CameraService
CameraService is a service to use user webcam
Methods
showCamera
Show the dialog to take a picture Parameters | Param | Type | Details | | :--: | :--: | :--: | | options.title | string= |dialog title
| | options.height | string= |dialog height
| | options.width | string= |dialog width
| Returns | Param | Details | | :--: | :--: | | promise |a promise that will return the photo (base 64)
|