diff --git a/ng-seed/src/app/appoinment/appoinments/appointment-addcustomer/appointment-addcustomer.component.html b/ng-seed/src/app/appoinment/appoinments/appointment-addcustomer/appointment-addcustomer.component.html
index 84ed95f..092fd3c 100644
--- a/ng-seed/src/app/appoinment/appoinments/appointment-addcustomer/appointment-addcustomer.component.html
+++ b/ng-seed/src/app/appoinment/appoinments/appointment-addcustomer/appointment-addcustomer.component.html
@@ -23,11 +23,11 @@
       </mat-form-field>
       <mat-form-field  appearance="outline" class="card-mat-pane">
        <mat-label>Phone</mat-label>
-        <input placeholder=" Phone" matInput formControlName="phoneNo">
-        <!-- <mat-error *ngIf="myError('phoneNo', 'required')">Contact No is required</mat-error>
+        <input placeholder=" Phone" type="text" appMobileNumberPattern maxlength="10" minlength="10" matInput formControlName="phoneNo">
+        <mat-error *ngIf="myError('phoneNo', 'required')">Contact No is required</mat-error>
         <mat-error *ngIf="myError('phoneNo', 'pattern')">Invalid Contact No </mat-error>
         <mat-error *ngIf="myError('phoneNo', 'minlength')"> Contact No must be at least 10 characters</mat-error>
-        <mat-error *ngIf="myError('phoneNo', 'maxlength')">Limit exceed</mat-error> -->
+        <mat-error *ngIf="myError('phoneNo', 'maxlength')">Limit exceed</mat-error>
       </mat-form-field> 
     </div>
       <div class="popup-button">
diff --git a/ng-seed/src/app/appoinment/appoinments/appointment-addcustomer/appointment-addcustomer.component.ts b/ng-seed/src/app/appoinment/appoinments/appointment-addcustomer/appointment-addcustomer.component.ts
index 73c7adc..6edd6a4 100644
--- a/ng-seed/src/app/appoinment/appoinments/appointment-addcustomer/appointment-addcustomer.component.ts
+++ b/ng-seed/src/app/appoinment/appoinments/appointment-addcustomer/appointment-addcustomer.component.ts
@@ -17,11 +17,14 @@ export class AppointmentAddcustomerComponent implements OnInit {
     this.form = new FormGroup({
       name: new FormControl('', [Validators.required]),
       email: new FormControl('', [Validators.required]),
-      phoneNo: new FormControl('', [Validators.required]),
+      phoneNo: new FormControl('', [Validators.required,Validators.minLength(10),Validators.maxLength(10)]),
        
     
     });
   }
+  public myError = (controlName: string, errorName: string) =>{
+    return this.form.controls[controlName].hasError(errorName);
+    }
   save(){
 
   }
diff --git a/ng-seed/src/app/appoinment/business/add-business/add-business.component.html b/ng-seed/src/app/appoinment/business/add-business/add-business.component.html
index e2f3aca..b806b3c 100644
--- a/ng-seed/src/app/appoinment/business/add-business/add-business.component.html
+++ b/ng-seed/src/app/appoinment/business/add-business/add-business.component.html
@@ -25,7 +25,7 @@
      </mat-error>
     </mat-form-field>
     <mat-form-field  appearance="outline" *ngIf="action != 'Delete'; else elseTemplate" class="mat-pane">
-      <input type="number" placeholder="Phone No" matInput [(ngModel)]="local_data.contactNo" formControlName="contactNo">
+      <input type="text" appMobileNumberPattern maxlength="10" minlength="10" placeholder="Phone No" matInput [(ngModel)]="local_data.contactNo" formControlName="contactNo">
         <mat-error *ngIf="myError('contactNo', 'required')">Contact No is required</mat-error>
       <mat-error *ngIf="myError('contactNo', 'pattern')">Invalid Contact No  </mat-error>
       <mat-error *ngIf="myError('contactNo', 'minlength')"> Contact No must be at least 10 characters</mat-error>
@@ -59,7 +59,7 @@
         <img *ngIf="action == 'Update' && imageViewStatus != true" class="image mb-2" [src]="image_view(local_data.logo)" height="150" width="150"/>
         <img *ngIf="imageViewStatus == true" class="image mb-2" [src]="url" height="150" width="150"><br/>
         <input type='file'accept="image/*" data-max-size="2048" style="width: 50%;" (change)="onSelectFile($event)" formControlName="logo"><br>
-        <span *ngIf="imageViewStatus != true" class="imgSizeValidation">Upload Below 2MB <br> Supported File (jpg,jpeg anf png)</span>
+        <span *ngIf="imageViewStatus != true" class="imgSizeValidation">Upload Below 2MB <br> Supported File (jpg,jpeg and png)</span>
       </div>
       <div fxFlex.xs="30" fxFlex.sm="30" fxFlex.md="30" fxFlex.lg="30" fxFlex.xl="30" fxLayoutAlign="start end">
         <mat-checkbox *ngIf="action != 'Update'" class="example-margin mt-2" formControlName="admin_checked" (change)="showOptions($event)">Add Admin</mat-checkbox>
diff --git a/ng-seed/src/app/appoinment/business/add-business/add-business.component.ts b/ng-seed/src/app/appoinment/business/add-business/add-business.component.ts
index 19cd671..a0521c7 100644
--- a/ng-seed/src/app/appoinment/business/add-business/add-business.component.ts
+++ b/ng-seed/src/app/appoinment/business/add-business/add-business.component.ts
@@ -97,7 +97,7 @@ export class AddBusinessComponent implements OnInit {
     email: new FormControl('', [Validators.required, Validators.email,Validators.pattern(
       '[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+.[a-zA-Z]{2,63}$',
     ),]),
-    contactNo: new FormControl('', [Validators.required,  Validators.minLength(10),Validators.maxLength(10),Validators.pattern('^[0-9]{10}$')]),
+    contactNo: new FormControl('', [Validators.required,  Validators.minLength(10),Validators.maxLength(10)]),
     createdBy:new FormControl(userrole,[Validators.required]),
     });
     
@@ -107,7 +107,7 @@ export class AddBusinessComponent implements OnInit {
     public myError = (controlName: string, errorName: string) =>{
       return this.form.controls[controlName].hasError(errorName);
     }
-    
+
     submit(){
         let tmp = this.form.value
         tmp.id = this.local_data.id
diff --git a/ng-seed/src/app/appoinment/business/business.module.ts b/ng-seed/src/app/appoinment/business/business.module.ts
index e9b3af3..6404b91 100644
--- a/ng-seed/src/app/appoinment/business/business.module.ts
+++ b/ng-seed/src/app/appoinment/business/business.module.ts
@@ -56,8 +56,8 @@ const customNotifierOptions: NotifierOptions = {
 @NgModule({
   declarations: [
     BusinessListComponent,
-    AddBusinessComponent
-  
+    AddBusinessComponent,
+      
   ],
   imports: [
     DemoMaterialModule,
diff --git a/ng-seed/src/app/appoinment/customers/add-customers/add-customers.component.html b/ng-seed/src/app/appoinment/customers/add-customers/add-customers.component.html
index 5205346..d4a0377 100644
--- a/ng-seed/src/app/appoinment/customers/add-customers/add-customers.component.html
+++ b/ng-seed/src/app/appoinment/customers/add-customers/add-customers.component.html
@@ -23,7 +23,7 @@
         </mat-error>
         </mat-form-field>
         <mat-form-field  appearance="outline" *ngIf="action != 'Delete'; else elseTemplate" class="mat-pane">
-          <input placeholder=" Phone" matInput [(ngModel)]="local_data.phoneNo" formControlName="phoneNo">
+          <input placeholder=" Phone" type="text" appMobileNumberPattern maxlength="10" minlength="10" matInput [(ngModel)]="local_data.phoneNo" formControlName="phoneNo">
           <mat-error *ngIf="myError('phoneNo', 'required')">Contact No is required</mat-error>
           <mat-error *ngIf="myError('phoneNo', 'pattern')">Invalid Contact No </mat-error>
           <mat-error *ngIf="myError('phoneNo', 'minlength')"> Contact No must be at least 10 characters</mat-error>
diff --git a/ng-seed/src/app/appoinment/customers/add-customers/add-customers.component.ts b/ng-seed/src/app/appoinment/customers/add-customers/add-customers.component.ts
index 432507d..d87e84d 100644
--- a/ng-seed/src/app/appoinment/customers/add-customers/add-customers.component.ts
+++ b/ng-seed/src/app/appoinment/customers/add-customers/add-customers.component.ts
@@ -52,15 +52,15 @@ export class AddCustomersComponent implements OnInit {
     this.form = new FormGroup({
     // businessselect: new FormControl('', [Validators.required]),
     // image: new FormControl('', null),
-    cusName: new FormControl('', [Validators.required, Validators.maxLength(20)]),
-    address_1: new FormControl('', [Validators.required, Validators.maxLength(50)]),
-    city: new FormControl('', [Validators.required, Validators.maxLength(10)]),
-    state: new FormControl('', [Validators.required, Validators.maxLength(10)]),
-    pincode: new FormControl('', [Validators.required, Validators.maxLength(10)]),
+    cusName: new FormControl('', [Validators.required]),
+    address_1: new FormControl('', [Validators.required, Validators.maxLength(100)]),
+    city: new FormControl('', [Validators.required]),
+    state: new FormControl('', [Validators.required]),
+    pincode: new FormControl('', [Validators.required, Validators.maxLength(6)]),
     email: new FormControl('', [Validators.required, Validators.email,Validators.pattern(
       '[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+.[a-zA-Z]{2,63}$',
     ),]),
-    phoneNo: new FormControl('', [Validators.required,  Validators.minLength(10),Validators.maxLength(10),  Validators.pattern('^[0-9]{10}$')]),
+    phoneNo: new FormControl('', [Validators.required,  Validators.minLength(10),Validators.maxLength(10)]),
     
     });
     this.form.patchValue(this.local_data)
diff --git a/ng-seed/src/app/appoinment/customers/customers-list/customers-list.component.ts b/ng-seed/src/app/appoinment/customers/customers-list/customers-list.component.ts
index 80b4331..7281b1a 100644
--- a/ng-seed/src/app/appoinment/customers/customers-list/customers-list.component.ts
+++ b/ng-seed/src/app/appoinment/customers/customers-list/customers-list.component.ts
@@ -87,7 +87,7 @@ export class CustomersListComponent implements OnInit {
       this._app.getAppoinmentsListDetails(param).subscribe(res => {
       if (res.status == 200) {
       this.appoinmentsList = res.data; 
-      this.recordStatus=true;
+      // this.recordStatus=true;
       let id = localStorage.getItem('user_id')
       console.log(id)
       console.log(this.appoinmentsList)
diff --git a/ng-seed/src/app/appoinment/service-list-details/add-service/add-service.component.ts b/ng-seed/src/app/appoinment/service-list-details/add-service/add-service.component.ts
index 64e81c3..3b714a3 100644
--- a/ng-seed/src/app/appoinment/service-list-details/add-service/add-service.component.ts
+++ b/ng-seed/src/app/appoinment/service-list-details/add-service/add-service.component.ts
@@ -38,7 +38,7 @@ closeDialog(){
 
 ngOnInit() {
   this.form = new FormGroup({
-    servicesName: new FormControl('', [Validators.required, Validators.maxLength(20)]),
+    servicesName: new FormControl('', [Validators.required]),
     duration: new FormControl('',[Validators.required]),
     description: new FormControl('',[Validators.required]),
     fees:new FormControl('',[Validators.required])
diff --git a/ng-seed/src/app/appoinment/user/add-user/add-user.component.html b/ng-seed/src/app/appoinment/user/add-user/add-user.component.html
index 408f220..3613825 100644
--- a/ng-seed/src/app/appoinment/user/add-user/add-user.component.html
+++ b/ng-seed/src/app/appoinment/user/add-user/add-user.component.html
@@ -20,8 +20,7 @@
                   {{business.busName}}
               </mat-option>
           </mat-select>
-          <mat-error *ngIf="myError('businessselect', 'required')">business is required</mat-error>
-          
+          <mat-error *ngIf="myError('businessselect', 'required')">business is required</mat-error>          
       </mat-form-field>
         <mat-form-field  appearance="outline" *ngIf="action != 'Delete'; else elseTemplate" class="mat-pane" [readonly]="true">
           <mat-label>Role</mat-label>
@@ -31,7 +30,7 @@
                 {{roleNmae.name}}
             </mat-option>
           </mat-select>
-        <mat-error *ngIf="myError('businessselect', 'required')">role is required</mat-error> 
+        <mat-error *ngIf="myError('role', 'required')">role is required</mat-error> 
         </mat-form-field>
   
       <mat-form-field  appearance="outline" *ngIf="action != 'Delete'; else elseTemplate" class="mat-pane">
@@ -52,7 +51,7 @@
       </mat-form-field>
       <mat-form-field appearance="outline" *ngIf="action != 'Delete'; else elseTemplate" class="mat-pane">
         <mat-label>Phone No</mat-label>
-        <input matInput type="number" placeholder="Enter Phone No" formControlName="contactNo" id="contactNo">
+        <input matInput type="text" appMobileNumberPattern maxlength="10" minlength="10" placeholder="Enter Phone No" formControlName="contactNo" id="contactNo">
         <mat-error *ngIf="myError('contactNo', 'required')">Contact No is required</mat-error>
         <mat-error *ngIf="myError('contactNo', 'pattern')">Invalid Contact No  </mat-error>
         <mat-error *ngIf="myError('contactNo', 'minlength')"> Contact No must be at least 10 characters</mat-error>
@@ -80,7 +79,7 @@
       <img *ngIf="action == 'Update' && imageViewStatus != true" class="image mb-2" [src]="image_view(local_data.logo)" height="150" width="150"/>
       <img *ngIf="imageViewStatus == true" class="image mb-2" [src]="url" height="150" width="150"><br/>
       <input type='file'accept="image/*" data-max-size="2048" style="width: 33%;" (change)="onSelectFile($event)" formControlName="logo"><br>
-      <span *ngIf="imageViewStatus != true" class="imgSizeValidation">Upload Below 2MB <br> Supported File (jpg,jpeg anf png)</span>
+      <span *ngIf="imageViewStatus != true" class="imgSizeValidation">Upload Below 2MB <br> Supported File (jpg,jpeg and png)</span>
       <!-- <mat-form-field  appearance="outline" *ngIf="action != 'Delete'; else elseTemplate" class="mat-pane">
         <input placeholder="ConfirmPassword" matInput  formControlName="confirmPassword">
         <mat-error *ngIf="myError('confirmPassword', 'required')">confirmPassword is required</mat-error>
diff --git a/ng-seed/src/app/appoinment/user/add-user/add-user.component.ts b/ng-seed/src/app/appoinment/user/add-user/add-user.component.ts
index fbc2ed1..242ff41 100644
--- a/ng-seed/src/app/appoinment/user/add-user/add-user.component.ts
+++ b/ng-seed/src/app/appoinment/user/add-user/add-user.component.ts
@@ -53,7 +53,7 @@ export class AddUserComponent implements OnInit {
     role: new FormControl('', [Validators.required]),
     userName: new FormControl('', [Validators.required]),
     // contactNo: new FormControl('', [Validators.required, Validators.maxLength(20)]),
-    contactNo: new FormControl('', [Validators.required,  Validators.minLength(10),Validators.maxLength(10),  Validators.pattern('^[0-9]{10}$')]),
+    contactNo: new FormControl('', [Validators.required,  Validators.minLength(10),Validators.maxLength(10)]),
     // lastName: new FormControl('', [Validators.required, Validators.maxLength(20)]),
     email: new FormControl('', [Validators.required, Validators.email,Validators.pattern(
       '[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+.[a-zA-Z]{2,63}$',
@@ -74,6 +74,7 @@ export class AddUserComponent implements OnInit {
       this.form.patchValue(this.local_data)
     }, 500);
     }
+    
     public myError = (controlName: string, errorName: string) =>{
       return this.form.controls[controlName].hasError(errorName);
       }
diff --git a/ng-seed/src/app/appoinment/user/user.module.ts b/ng-seed/src/app/appoinment/user/user.module.ts
index 8840571..74c4d3d 100644
--- a/ng-seed/src/app/appoinment/user/user.module.ts
+++ b/ng-seed/src/app/appoinment/user/user.module.ts
@@ -53,7 +53,8 @@ const customNotifierOptions: NotifierOptions = {
 @NgModule({
   declarations: [
     UserListComponent,
-    AddUserComponent
+    AddUserComponent,
+    
   ],
   imports: [
     DemoMaterialModule,
diff --git a/ng-seed/src/app/end-user/customer-info/customer-info.component.html b/ng-seed/src/app/end-user/customer-info/customer-info.component.html
index e849c1a..933490d 100644
--- a/ng-seed/src/app/end-user/customer-info/customer-info.component.html
+++ b/ng-seed/src/app/end-user/customer-info/customer-info.component.html
@@ -31,7 +31,7 @@
                         <div fxLayout="row">
                             <div fxFlex.xs="80" fxFlex.sm="80" fxFlex.md="80" fxFlex.lg="80" fxFlex.xl="80">
                                 <mat-form-field style="width: 100%">
-                                    <input matInput placeholder="Phone No" type="text" name="phone" formControlName="phoneNo"  [readonly]="verifyOTP == '1'" required>
+                                    <input matInput type="text" appMobileNumberPattern maxlength="10" minlength="10" placeholder="Phone No"  name="phone" formControlName="phoneNo"  [readonly]="verifyOTP == '1'" required>
                                     <mat-error *ngIf="myError('phoneNo', 'required')">Contact No is required</mat-error>
                                     <mat-error *ngIf="myError('phoneNo', 'pattern')">Invalid Contact No  </mat-error>
                                     <mat-error *ngIf="myError('phoneNo', 'minlength')"> Contact No must be at least 10 characters</mat-error>
diff --git a/ng-seed/src/app/end-user/customer-info/customer-info.component.ts b/ng-seed/src/app/end-user/customer-info/customer-info.component.ts
index 4d8f6c0..9f870c5 100644
--- a/ng-seed/src/app/end-user/customer-info/customer-info.component.ts
+++ b/ng-seed/src/app/end-user/customer-info/customer-info.component.ts
@@ -44,12 +44,12 @@ export class CustomerInfoComponent implements OnInit {
       email: new FormControl('', [Validators.required, Validators.email,Validators.pattern(
         '[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+.[a-zA-Z]{2,63}$',
       ),]),
-      phoneNo: new FormControl('', [Validators.required,  Validators.minLength(10),Validators.maxLength(10),  Validators.pattern('^[0-9]{10}$')]),
-      address_1: new FormControl('', [ Validators.maxLength(50)]),
-      city: new FormControl('', [ Validators.maxLength(10)]),
-      state: new FormControl('', [ Validators.maxLength(10)]),
-      otp: new FormControl('', [ Validators.maxLength(10)]),
-      pincode: new FormControl('',[ Validators.maxLength(6)]),
+      phoneNo: new FormControl('', [Validators.required,  Validators.minLength(10),Validators.maxLength(10)]),
+      address_1: new FormControl('', [ Validators.maxLength(100)]),
+      city: new FormControl(''),
+      state: new FormControl(''),
+      otp: new FormControl('', [ Validators.maxLength(6),Validators.minLength(6)]),
+      pincode: new FormControl(''),
       });
   }
 
diff --git a/ng-seed/src/app/session/register/register.component.ts b/ng-seed/src/app/session/register/register.component.ts
index 4448ee4..7b45085 100644
--- a/ng-seed/src/app/session/register/register.component.ts
+++ b/ng-seed/src/app/session/register/register.component.ts
@@ -21,10 +21,10 @@ export class RegisterComponent {
 
 ngOnInit() {
   this.form = new FormGroup({
-  bus_name: new FormControl('', [Validators.required, Validators.maxLength(20)]),
-  address: new FormControl('', [Validators.required, Validators.maxLength(50)]),
-  city: new FormControl('', [Validators.required, Validators.maxLength(10)]),
-  state: new FormControl('', [Validators.required, Validators.maxLength(10)]),
+  bus_name: new FormControl('', [Validators.required]),
+  address: new FormControl('', [Validators.required, Validators.maxLength(100)]),
+  city: new FormControl('', [Validators.required]),
+  state: new FormControl('', [Validators.required]),
   email: new FormControl('', [Validators.required, Validators.email,Validators.pattern(
     '[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+.[a-zA-Z]{2,63}$',
   ),]),
diff --git a/ng-seed/src/app/shared/demo.module.ts b/ng-seed/src/app/shared/demo.module.ts
index 35156ca..83a20d7 100644
--- a/ng-seed/src/app/shared/demo.module.ts
+++ b/ng-seed/src/app/shared/demo.module.ts
@@ -41,58 +41,149 @@ import {PortalModule} from '@angular/cdk/portal';
 import { FormGroup, FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { MatCardModule } from '@angular/material/card';
 import { FlexModule } from '@angular/flex-layout';
+import { MobileNumberPatternDirective } from './mobile_number_pattern/mobile-number-pattern.directive';
 
 
 /**
  * NgModule that includes all Material modules that are required to serve the demo-app.
  */
-const modules = [
-  MatCardModule,
-  MatAutocompleteModule,
-  MatButtonModule,
-  MatButtonToggleModule,
-  MatCheckboxModule,
-  MatChipsModule,
-  MatTableModule,
-  MatDatepickerModule,
-  MatDialogModule,
-  MatDividerModule,
-  MatExpansionModule,
-  MatFormFieldModule,
-  MatGridListModule,
-  MatIconModule,
-  MatInputModule,
-  MatListModule,
-  MatMenuModule,
-  MatPaginatorModule,
-  MatProgressBarModule,
-  MatProgressSpinnerModule,
-  MatRadioModule,
-  MatRippleModule,
-  MatSelectModule,
-  MatSidenavModule,
-  MatSlideToggleModule,
-  MatSliderModule,
-  MatSnackBarModule,
-  MatSortModule,
-  MatStepperModule,
-  MatTabsModule,
-  MatToolbarModule,
-  MatTooltipModule,
-  MatNativeDateModule,
-  CdkTableModule,
-  A11yModule,
-  BidiModule,
-  CdkAccordionModule,
-  ObserversModule,
-  OverlayModule,
-  PlatformModule,
-  PortalModule, 
-  FlexModule,
-  FormsModule,
-  ReactiveFormsModule]
+// const modules = [
+//   MatCardModule,
+//   MatAutocompleteModule,
+//   MatButtonModule,
+//   MatButtonToggleModule,
+//   MatCheckboxModule,
+//   MatChipsModule,
+//   MatTableModule,
+//   MatDatepickerModule,
+//   MatDialogModule,
+//   MatDividerModule,
+//   MatExpansionModule,
+//   MatFormFieldModule,
+//   MatGridListModule,
+//   MatIconModule,
+//   MatInputModule,
+//   MatListModule,
+//   MatMenuModule,
+//   MatPaginatorModule,
+//   MatProgressBarModule,
+//   MatProgressSpinnerModule,
+//   MatRadioModule,
+//   MatRippleModule,
+//   MatSelectModule,
+//   MatSidenavModule,
+//   MatSlideToggleModule,
+//   MatSliderModule,
+//   MatSnackBarModule,
+//   MatSortModule,
+//   MatStepperModule,
+//   MatTabsModule,
+//   MatToolbarModule,
+//   MatTooltipModule,
+//   MatNativeDateModule,
+//   CdkTableModule,
+//   A11yModule,
+//   BidiModule,
+//   CdkAccordionModule,
+//   ObserversModule,
+//   OverlayModule,
+//   PlatformModule,
+//   PortalModule, 
+//   FlexModule,
+//   FormsModule,
+//   ReactiveFormsModule]
 @NgModule({
-  imports: [...modules],
-  exports: [...modules]
+  declarations:[MobileNumberPatternDirective],
+  imports: [
+    MatCardModule,
+    MatAutocompleteModule,
+    MatButtonModule,
+    MatButtonToggleModule,
+    MatCheckboxModule,
+    MatChipsModule,
+    MatTableModule,
+    MatDatepickerModule,
+    MatDialogModule,
+    MatDividerModule,
+    MatExpansionModule,
+    MatFormFieldModule,
+    MatGridListModule,
+    MatIconModule,
+    MatInputModule,
+    MatListModule,
+    MatMenuModule,
+    MatPaginatorModule,
+    MatProgressBarModule,
+    MatProgressSpinnerModule,
+    MatRadioModule,
+    MatRippleModule,
+    MatSelectModule,
+    MatSidenavModule,
+    MatSlideToggleModule,
+    MatSliderModule,
+    MatSnackBarModule,
+    MatSortModule,
+    MatStepperModule,
+    MatTabsModule,
+    MatToolbarModule,
+    MatTooltipModule,
+    MatNativeDateModule,
+    CdkTableModule,
+    A11yModule,
+    BidiModule,
+    CdkAccordionModule,
+    ObserversModule,
+    OverlayModule,
+    PlatformModule,
+    PortalModule, 
+    FlexModule,
+    FormsModule,
+    ReactiveFormsModule],
+  exports: [
+    MatCardModule,
+    MatAutocompleteModule,
+    MatButtonModule,
+    MatButtonToggleModule,
+    MatCheckboxModule,
+    MatChipsModule,
+    MatTableModule,
+    MatDatepickerModule,
+    MatDialogModule,
+    MatDividerModule,
+    MatExpansionModule,
+    MatFormFieldModule,
+    MatGridListModule,
+    MatIconModule,
+    MatInputModule,
+    MatListModule,
+    MatMenuModule,
+    MatPaginatorModule,
+    MatProgressBarModule,
+    MatProgressSpinnerModule,
+    MatRadioModule,
+    MatRippleModule,
+    MatSelectModule,
+    MatSidenavModule,
+    MatSlideToggleModule,
+    MatSliderModule,
+    MatSnackBarModule,
+    MatSortModule,
+    MatStepperModule,
+    MatTabsModule,
+    MatToolbarModule,
+    MatTooltipModule,
+    MatNativeDateModule,
+    CdkTableModule,
+    A11yModule,
+    BidiModule,
+    CdkAccordionModule,
+    ObserversModule,
+    OverlayModule,
+    PlatformModule,
+    PortalModule, 
+    FlexModule,
+    FormsModule,
+    ReactiveFormsModule,
+    MobileNumberPatternDirective]
 })
 export class DemoMaterialModule {}
\ No newline at end of file
diff --git a/ng-seed/src/app/shared/mobile_number_pattern/mobile-number-pattern.directive.spec.ts b/ng-seed/src/app/shared/mobile_number_pattern/mobile-number-pattern.directive.spec.ts
new file mode 100644
index 0000000..8f52bb1
--- /dev/null
+++ b/ng-seed/src/app/shared/mobile_number_pattern/mobile-number-pattern.directive.spec.ts
@@ -0,0 +1,8 @@
+import { MobileNumberPatternDirective } from './mobile-number-pattern.directive';
+
+describe('MobileNumberPatternDirective', () => {
+  it('should create an instance', () => {
+    const directive = new MobileNumberPatternDirective();
+    expect(directive).toBeTruthy();
+  });
+});
diff --git a/ng-seed/src/app/shared/mobile_number_pattern/mobile-number-pattern.directive.ts b/ng-seed/src/app/shared/mobile_number_pattern/mobile-number-pattern.directive.ts
new file mode 100644
index 0000000..2479327
--- /dev/null
+++ b/ng-seed/src/app/shared/mobile_number_pattern/mobile-number-pattern.directive.ts
@@ -0,0 +1,18 @@
+import { Directive, ElementRef, HostListener } from '@angular/core';
+
+@Directive({
+  selector: '[appMobileNumberPattern]'
+})
+export class MobileNumberPatternDirective {
+
+  constructor(private _el: ElementRef) { }
+
+  @HostListener('input', ['$event']) onInputChange(event) {
+    const initalValue = this._el.nativeElement.value;
+    this._el.nativeElement.value = initalValue.replace(/[^0-9]*/g, '');
+    if ( initalValue !== this._el.nativeElement.value) {
+      event.stopPropagation();
+    }
+  }
+
+}