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
• Usage
• Documentation

Installation

Npm

Change to your project's root directory.

# To 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

# install npm modules
npm install

Include the angular-material-simple-components module as a dependency in your application.

angular.module('myApp', ['ngMaterial', 'angular-material-simple-components']);

Usage

Example Template

 <form name="myForm">
    <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>
</form>

Documentation

Directives

errorMessage

errorMessage is a simplification of ngMessage, it is used inside of the components

<error-message [error=""] [message=""]>
... [message]
</error-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

<text-input [name=""] [label=""] [icon=""] [type=""] [ng-model=""] [is-disabled=""] [is-required=""] [no-float=""] [max-length=""] [min-length=""] >
... 
</text-input>

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

<number-input [name=""] [label=""] [icon=""] [ng-model=""] [is-disabled=""] [is-required=""] [no-float=""] [max=""] [min=""] [step=""] >
... 
</number-input>

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

<search-input [name=""] [label=""] [ng-model=""] [is-disabled=""] [is-required=""] [no-float=""] [max-length=""] [min-length=""] >
... 
</search-input>

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

<text-area-input [name=""] [label=""] [icon=""] [ng-model=""] [is-disabled=""] [is-required=""] [no-float=""] [max-length=""] [min-length=""] >
... 
</text-area-input>

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

<html-text-area-input [name=""] [label=""] [icon=""] [ng-model=""] [is-disabled=""] [is-required=""] [max-length=""] [min-length=""] >
... 
</html-text-area-input>

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

<image-input [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=""] >
... 
</image-input>

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

<time-input [name=""] [label=""] [icon=""] [ng-model=""] [is-disabled=""] [is-required=""] [no-float=""] >
... 
</time-input>

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

<date-input [name=""] [label=""] [icon=""] [ng-model=""] [is-disabled=""] [is-required=""] [max-date=""] [min-date=""] [filter-date=""] [date-mask=""]>
... 
</date-input>

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

<md-pagination [items-per-page=""] [current-page=""] [n-items=""] [is-disabled=""]>
... 
</md-pagination>

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) |