ngx-material-inputs v0.0.3

ngxMaterialInputs

this is a angular material input To make you comfortable for using inputs in angular .

Demo

install

Run npm i ngx-material-inputs

add Library to app.module.ts

import { NgxMaterialInputsModule } from 'ngx-material-inputs';/// add this line 
import { FormsModule } from '@angular/forms';/// add this line 

and import

imports: [
    BrowserModule,
    FormsModule,/// add this line 
    NgxMaterialInputsModule,  /// and  add this line 
    AppRoutingModule,
  ],

full example of add to app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { FormsModule } from '@angular/forms';/// add this line 
import { NgxMaterialInputsModule } from 'ngx-material-inputs';/// add this line 


@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,/// add this line 
    NgxMaterialInputsModule,  /// and  add this line 
    AppRoutingModule,
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

how to use => you can use angular ngModel to get input value. and you can use all angular input events for example (keyup) or (keydown) or (focus) or (click) and other angular events

 <akbari-material-input [(ngModel)]="input"  title="input-title" direction="rtl" width="40%"  ></akbari-material-input>

use with events

in html

    <akbari-material-input [(ngModel)]="input" (keyup)="keyup()" ></akbari-material-input>

in ts

 keyup() {

 }

Inputs

direction => type ="string" => values 'rtl' or 'ltr'

you can pass direction in string format;

example

    <akbari-material-input direction="rtl"  ></akbari-material-input>

or 

    <akbari-material-input direction="ltr"  ></akbari-material-input>


or


<akbari-date-picker [direction]="'rtl'"  ></akbari-date-picker>

width => type ="string" => values in precen for example '50%' or pixel for example '50px'

you can pass width string format;

example

    <akbari-material-input width="40%"  ></akbari-material-input>


or 

    <akbari-material-input width="40px"  ></akbari-material-input>


or

<akbari-date-picker [width]="'40px'"  ></akbari-date-picker>

title => type ="string" => this is for input title

you can pass width string format;

example

    <akbari-material-input title="input-title"  ></akbari-material-input>

finall

report bugs to makbarics@gmail.com

hope to enjoy it .