Ct-search-library NPM

ct-search-library

ct-search-library

About

An UMD and ESM Search Module For Prescribable Drugs

Angular 2 Installation

Module Dependencies: Add/Ensure these Angular 2 npm dependencies are installed

"dependencies":{
  "@angular/common": "^2.0.0",
  "@angular/core": "^2.0.0",
  "@angular/http": "^2.0.0",
  "@angular/forms": "^2.0.0"
}

Install via package.json:

Add package to package.json

"dependencies": {
    "ct-search-library": "6.0.2"
  }

Then install

    npm install

Install via npm:

npm install --save ct-search-library

Add Module and Services to your app module:

import { Component, NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';

import { PrescribableDrugSearchModule, SelectedResultService, ToggleSearchPanelService} from 'ct-search-library';

@NgModule({
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    SearchLibraryModule.forRoot() // Make sure its the last module imported
  ],
  providers:[SelectedResultService, ToggleSearchPanelService]
})
export class AppModule {}

In your AppComponent add search panel selector and search API endpoint:

import { Component } from '@angular/core';

@Component({
    selector: 'app',
    template: `<ct-search-panel-container [searchApiUrl]="searchApiUrl"></ct-search-panel-container>
               <router-outlet></router-outlet>`,
})
export class AppComponent {
    searchApiUrl: string = SEARCH API ENDPOINT;
}

Finally use in one of your apps components:

import { Component } from '@angular/core';
import { SelectedResultService, ToggleSearchPanelService} from 'ct-search-library';

@Component({
  template: `
            <h2>Button Example</h2>
            <button class="btn btn-primary" (click)="toggle()">Search</button>
            <div class="alert alert-success" *ngIf="searchResult.PrescribableDrugID">
                <i class="glyphicon glyphicon-ok"></i>
                <span>You Selected:</span>
                <span>{{searchResult.PrescribableDrugID}}</span>
                <span>{{searchResult.PrescribableDrugDesc}}</span>
            </div>`
})
export class MyComponent {

    searchResult: any = {};
    showSearchPanel: any = false;

    constructor(private selectedResultService: SelectedResultService, 
                private toggleSearchPanelService: ToggleSearchPanelService) {

    }

    ngOnInit() {

        // subscribe to selected result service, 
        this.selectedResultService.SearchResultSelectedObserver.subscribe(data => {
            this.searchResult = data;
        });

        // subscribe to component toggle service
        this.toggleSearchPanelService.SearchPanelObserver.subscribe(data => {
            this.showSearchPanel = data;
        });
    }

    toggle() {
        // toggles search panel - show/hide
        this.toggleSearchPanelService.togglePanel(!this.showSearchPanel);
    }
}

Using Webpack

No extra configuration needed

Using System.js

In Systemjs.config.js

/**
 * System configuration for Angular 2
 * Adjust as necessary for your application needs.
 */
(function (global) {
    System.config({
        paths: {
            // paths serve as alias
            'npm:': 'node_modules/'
        },
        // map tells the System loader where to look for things
        map: {
            // our app is within the app folder
            app: 'app',

            // other libraries
            'rxjs': 'npm:rxjs',
            'ct-search-library':'npm:ct-search-library/dist/umd/searchLibrary.js'
        }
    });
})(this);