Elm-angular-lib NPM

elm-angular-lib

Installation

To install this library, run:

$ npm install elm-angular-lib --save

Consuming your library

Once you have published your library to npm, you can import your library in any Angular application by running:

$ npm install elm-angular-lib

and then from your Angular AppModule:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';

// Import Elm Date Picker Component & from Module
import { ElmDatepickerComponent } from 'elm-angular-lib';
import { FormsModule } from '@angular/forms';

@NgModule({
  declarations: [
    AppComponent,
	// Specify Elm Date Picker Component as an declaration
	  ElmDatepickerComponent
  ],
  imports: [
    BrowserModule,

    // Specify Forms Module as an import
    FormsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

then you need to reference Js and CSS files in your angular-cli.json as the following:

  "styles": [

        "../node_modules/elm-angular-lib/css/jquery.calendars.picker.css",
        "../node_modules/elm-angular-lib/css/ui.calendars.picker.css"
        
        
      ],
      "scripts": [
 "../node_modules/jquery/dist/jquery.min.js",
	    "../node_modules/elm-angular-lib/js/jquery.plugin.min.js",
		 "../node_modules/elm-angular-lib/js/jquery.calendars.all.min.js",
		  "../node_modules/elm-angular-lib/js/jquery.calendars.picker-ar-DZ.js",
		   "../node_modules/elm-angular-lib/js/jquery.calendars.plus.js",
		    "../node_modules/elm-angular-lib/js/jquery.calendars.ummalqura.min.js"
	  ],

Once your library is imported, you can use its components, directives and pipes in your Angular application:

<!-- You can now use your library component in app.component.html -->
<div class="form-group">
  <label>تاريخ ميلاد المفوض<span class="Str"> *</span> </label>
  <ElmDatePicker placeholder="تاريخ ميلاد المفوض" name="DateBrith" #DateBrith="ngModel" [(ngModel)]="BirthDate"
      dateType='UmmAlQura' ngDefaultControl></ElmDatePicker>
  <div [hidden]="DateBrith.valid || DateBrith.untouched">
      <div *ngIf=" DateBrith.errors && DateBrith.errors?.empty" class="alert alert-danger">
          تاريخ الميلاد مطلوب
      </div>
      <div *ngIf="DateBrith.errors && !DateBrith.errors?.valid && !DateBrith.errors?.empty" class="alert alert-danger">
          تاريخ الميلاد المدخل غير صحيح
      </div>
  </div>
</div>