Angular-material-simple-components NPM

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.

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