8.0.0 • Published 7 years ago
cc-search-library v8.0.0
fdb-cc-search-library
fdb-cc-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": {
"fdb-cc-search-library": "6.0.2"
}
Then install
npm install
Install via npm:
npm install --save fdb-cc-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 'fdb-cc-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: `<fdb-cc-search-panel-container [searchApiUrl]="searchApiUrl"></fdb-cc-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 'fdb-cc-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',
'fdb-cc-search-library':'npm:fdb-cc-search-library/dist/umd/searchLibrary.js'
}
});
})(this);
Prepare your environment
- Install Node.js and NPM (should come with)
- Install local dev dependencies:
npm install
while current directory is this repo
License
MIT