angular-material-simple-components

This include simplification of angular material components

Stats

stars 🌟issues ⚠️updated 🛠created 🐣size 🏋️‍♀️
00Jun 19, 2017Apr 10, 2017Minified + gzip package size for angular-material-simple-components in KB

Readme

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.

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)

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.