In this ionic tutorial you will learn how to access the image gallery and take pictures from an ionic app. Also we will show you how to add a image cropper. This ionic tutorial includes a working ionic app example you can reuse for your needs.

Stars: ✭ 35 (+45.83%)

Mutual labels: angular4, ionic2, ionic3

Dianoia-app

Mobile (Ionic 3 - Angular 4) app about non-pharmaceutical activities and information for people with dementia.

Stars: ✭ 13 (-45.83%)

Mutual labels: angular4, ionic2, ionic3

ionic-modal-custom-transitions

Add Custom Transitions to Ionic Modals.

Stars: ✭ 22 (-8.33%)

Mutual labels: angular4, ionic2, ionic3

ionic-app-with-aws-cognito

Angular 4, Ionic 3, and AWS (Amazon) Cognito User Pools. Authentication out of the box.

Stars: ✭ 62 (+158.33%)

Mutual labels: angular4, ionic3

birdchain-mvp

Decentralized application (Dapp) similar to instant messenger. The BIG difference is that it will allow its users to make a monthly passive income, while providing companies with higher quality and better-priced services.

Stars: ✭ 25 (+4.17%)

Mutual labels: angular4, ionic2

ionic3-awesome

😃 ionic3自定义组件及常用例子演示地址

Stars: ✭ 95 (+295.83%)

Mutual labels: ionic2, ionic3

ionic-workflow-guide

Create a full and powerful worflow with Ionic (Unit Testing, Environment variables, Automatic documentation, Production App Server, Automatic deployment)

Stars: ✭ 46 (+91.67%)

Mutual labels: ionic2, ionic3

ionicfirebasecrud

An example of crud with Firebase and Ionic

Stars: ✭ 15 (-37.5%)

Mutual labels: ionic2, ionic3

ionicfirebaseauth

Exemplo de alguns tipos de autenticação com Ionic 2 e Firebase

Stars: ✭ 18 (-25%)

Mutual labels: ionic2, ionic3

ngx-konami

A simple directive to add easter eggs in your Angular application 👾

Stars: ✭ 34 (+41.67%)

Mutual labels: directive, angular4

View All Similar Projects ➔

ionic2-mask-directive

Ionic2MaskDirective help you add mask on ion-input with just a directive and a very simple configuration.

Install

npm i ionic2-mask-directive --save

Import directive

Import the directive into your app module.

import {Ionic2MaskDirective} from "ionic2-mask-directive";

@NgModule({
    declarations: [
        MyApp,
        Ionic2MaskDirective,
        HomePage
    ],
    imports: [
        BrowserModule,
        IonicModule.forRoot(MyApp),
        HttpModule
    ],
    bootstrap: [IonicApp],
    entryComponents: [
        MyApp,
        HomePage
    ],
    providers: [
        StatusBar,
        SplashScreen,
        {provide: ErrorHandler, useClass: IonicErrorHandler}        
    ]
})
export class AppModule {
}

Usage

To configure the mask, you can use 3 types of characters.

# - any type of char;
9 - only numbers;
A - only letters;

Example

<!-- phone number in Brasil -->
<ion-input type="text" mask="(99) 9999-9999" placeholder="Phone" [(ngModel)]="user.phone" required></ion-input>
<!-- brasilian document -->
<ion-input type="text" mask="999.999.999-99" placeholder="CPF" [(ngModel)]="user.document" required></ion-input>

Contribute

Any pull-request and issue is more than welcome.

License

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].

Cheap and reliable Node.js hosting starts at $3/month, and $1/month static HTML hosting

tiaguinho / ionic2-mask-directive

Programming Languages

Labels

Projects that are alternatives of or similar to ionic2-mask-directive

ionic2-mask-directive

Install

Import directive

Usage

Example

Contribute

License