> fdb-cc-search-library
npm install cc-search-library> fdb-cc-search-library
json
"dependencies":{
"@angular/common": "^2.0.0",
"@angular/core": "^2.0.0",
"@angular/http": "^2.0.0",
"@angular/forms": "^2.0.0"
}
`
$3
Add package to package.json
js
"dependencies": {
"fdb-cc-search-library": "6.0.2"
}
`
Then install
npm install
$3
npm install --save fdb-cc-search-library
Add Module and Services to your app module:
typescript
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:
typescript
import { Component } from '@angular/core';@Component({
selector: 'app',
template:
,
})
export class AppComponent {
searchApiUrl: string = SEARCH API ENDPOINT;
}
`
Finally use in one of your apps components:
typescript
import { Component } from '@angular/core';
import { SelectedResultService, ToggleSearchPanelService} from 'fdb-cc-search-library';@Component({
template:
})
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.jsjs
/**
* 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);
`$3
* Install Node.js and NPM (should come with)
* Install local dev dependencies: MIT