@arunkeshavareddy/dc-common NPM

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"\>

\&lt;DC-Header-Tab\&gt;\&lt;/DC-Header-Tab\&gt;

\&lt;divclass=&quot;container&quot;\&gt;

```
  \&lt;router-outlet\&gt;
```

    \&lt;endpoint-watcher\&gt;\&lt;/endpoint-watcher\&gt;

```
  \&lt;/router-outlet\&gt;
```
```
\&lt;/div\&gt;
```

\&lt;DC-Footer-Tab\&gt;\&lt;/DC-Footer-Tab\&gt;

\</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(&#39;Hardware&#39;, &#39;Home&#39;);

}

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:&#39;anthfern&#39;,

userName:&#39;Subba Reddy Nusum&#39;,

};

// piwikData has to be passed PiwikSite and piwikId are different for different tracts

piwikData: any = {

 piwikSite:&#39;\*.devscui-stg.cloudapps.cisco.com&#39;,

 piwikSiteId:&#39;10&#39;,

};

// 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]=&#39;this.notificationsUrl&#39;[getSEEMAdminsUrl]=&#39;this.getSEEMAdminsUrl&#39;[overlayUrl]=&#39;this.overlayUrl&#39;[getTracksUrl]=&#39;this.getTracksUrl&#39;\&gt;\&lt;/DC-Header-Tab\&gt;