dc-common v1.100.0
DC-Common NPM Library
Steps To follow to integrate Dc-Common NPM Library:-
Dc-Common NPM Library URL:-
https://www.npmjs.com/package/dc-common
- Install the Library:-
Install the library into your application by the command
npm i dc-common
- Import " HeaderFooterModule" and "overlayService" to your app.module.ts
- import { NgModule } from'@angular/core';
- import { BrowserModule } from'@angular/platform-browser';
- import { AppComponent } from'./app';
- import { HeaderFooterModule } from '../../node_modules/dc-common/src/app/headerFooter.module';
- import { OverlayService } from '../../node_modules/dc-common/src/app/services/verlay.service';
- @NgModule({
- imports: BrowserModule, HeaderFooterModule,
- declarations: AppComponent,
- bootstrap: AppComponent,
- providers: OverlayService,
- })
- exportclassAppModule {}
- Now let's add the component definition to our template. Edit app/app.component.html as fallows
- \<divclass="content-fluid"\>
- \<DC-Sidebar-Tab\>\</DC-Sidebar-Tab\>
- \<main#mainWrapperclass="main_wrap"\>
\<DC-Header-Tab\>\</DC-Header-Tab\>
\<divclass="container"\>
\<router-outlet\>
\<endpoint-watcher\>\</endpoint-watcher\>
\</router-outlet\>
\</div\>
\<DC-Footer-Tab\>\</DC-Footer-Tab\>
- \</main\>
\</div\>
Now let's add the overlayService in the components and add the path of overlayservice pointing to node_Module and pass the Track Name, Page Name, Tab Names(optional perameter) to overlayService by the method setOverlayImage.
Eg:-
import { Component, OnInit, Output, EventEmitter, ElementRef, ViewChild,
HostListener, Input, ChangeDetectorRef , OnChanges} from'@angular/core';
//import OverlayService pointing the path to node_module
import { OverlayService } from'../../node_modules/header-footer/src/app/services/overlay.service';
@Component({
selector:'app-root',
templateUrl:'./app.component.html',
styleUrls: './app.component.css'
})
exportclassAppComponentimplementsOnInit {
constructor(
//to initiate the overlayService in the component add overlayService in the constructor
privateoverlayService: OverlayService,
) { }
ngOnInit() {
//pass the Track Name, Page Name, Tab Names(optional perameter) to overlayService by the method setOverlayImage
this.overlayService.setOverlayImg('Hardware', 'Home');
}
}
Parameters to be passed for DC-Header-Tab :-
Parameters Type:-
// Input Parameters from other applications
// UserId and UserName is to be passed in order to mitigate the getUserId calls
userData: any = {
userId:'anthfern',
userName:'Subba Reddy Nusum',
};
// piwikData has to be passed PiwikSite and piwikId are different for different tracts
piwikData: any = {
piwikSite:'\*.devscui-stg.cloudapps.cisco.com',
piwikSiteId:'10',
};
// Base Url should be passed to let library known in what environment the user is in
localHostMode: string = 'https://dc-stg1.cisco.com';
// End url has to passed by the Tracks who are using wrapper service if not default url will be used
getMenuListUrl: string = 'devscapp/dsc/getMenuList';
getHWPUserAccessUrl: string = 'devscapp/dsc/getHWPUserAccess';
notificationsUrl: string = 'devscapp/dsc/notifications1';
getSEEMAdminsUrl: string = 'getSEEMAdmins';
overlayUrl: string = 'devscapp/images/imagemap';
getTracksUrl: string = 'devscapp/sef/getReleaseRevisionTracks';
//Input parameters ends here
How to pass parameters in app.component.html for DC-Header-Tab Tag
\<DC-Header-TabpiwikData='this.piwikData'localHostMode='this.localHostMode'
getMenuListUrl='this.getMenuListUrl'
getHWPUserAccessUrl='this.getHWPUserAccessUrl'
[notificationsUrl]='this.notificationsUrl'[getSEEMAdminsUrl]='this.getSEEMAdminsUrl'[overlayUrl]='this.overlayUrl'[getTracksUrl]='this.getTracksUrl'\>\</DC-Header-Tab\>
7 months ago
2 years ago
2 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago