@propmix/profet-common-header
v2.3.1
Published
This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 15.2.0.
Downloads
160
Readme
CommonHeader
This library was generated with Angular CLI version 15.2.0.
Usage
Install the package using the command
npm i @propmix/profet-common-header
Import the library and required pipes in module
import { CommonHeaderModule } from "@propmix/profet-common-header"; imports: [ // Other import statements CommonHeaderModule ], providers: [TitleCasePipe, LowerCasePipe]
Use library in the component html
Input
template
- To pass custom HTML that need to render in the header libraryHTML Usage -
<lib-header [template]="reference"></lib-header>
Sample
<lib-header [template]="create_ref" (menuEvent)="sideMenuToggle()"></lib-header> <ng-template #create_ref> <button>Create</button> </ng-template>
appName
- To pass the current applicationHTML Usage -
<lib-header [appName]="app"></lib-header>
The
appName
is a constant that can be assigned one of the following values provided by the library.import { PROFET_APPS } from '@propmix/profet-common-header'; export class AppComponent { app = PROFET_APPS.profet_portal; // Assigning the constant value to the app variable }
The
PROFET_APPS
can have the following possible values:| Constant | Description | |----------------------------------------|----------------------------------------| |
PROFET_APPS.profet_portal
| Represents Profet Portal | |PROFET_APPS.appraisal_management
| Represents Profet Order Management | |PROFET_APPS.appraisal_review
| Represents Profet Review | |PROFET_APPS.appraisal_valuation
| Represents Profet Valuation |
Output
menuEvent
- To capture the side menu clickHTML Usage -
<lib-header (menuEvent)="sideMenuToggle()"></lib-header>
Typescript -
sideMenuToggle(){ // Mat menu toogle logic this.sidenav.toggle(); }
infoEvent
- Getting company data from headerHTML Usage -
<lib-header (infoEvent)="getCompanyData($event)"></lib-header>
Config
Use an initializer function to configure parameters
import { HeaderConfig } from '@propmix/profet-common-header/lib/utils/HeaderConfig';
import { Amplify } from 'aws-amplify';
import { environment } from 'src/environments/environment';
export function initializeHeaderConfig(): HeaderConfig {
const headerConfig: HeaderConfig = {
apiUrl: environment.portalApiUrl,
portalFrontendUrl: environment.portalFrontendUrl,
// portalFrontendUrl is optional
signOutUrl: Amplify.getConfig().Auth.Cognito.loginWith.oauth.redirectSignOut[0]
// signOutUrl - using this option to specify the logout path.
// Usually take this from the Amplify config
};
return headerConfig;
}
Use the configuration option in the app.module.ts file
import { CommonHeaderService } from '@propmix/profet-common-header';
import { HeaderConfig } from '@propmix/profet-common-header/lib/utils/HeaderConfig';
providers: [
CommonHeaderService,
{ provide: 'headerConfig', useFactory: initializeHeaderConfig }
]
Pipes Used
This library uses two Angular pipes, so you need to ensure they are available in your module:
TitleCasePipe
: Transforms strings into Title Case.
LowerCasePipe
: Transforms strings to lowercase.
Make sure to provide these pipes in the AppModule of your application.
providers: [TitleCasePipe, LowerCasePipe]
Publishing to npm repository
ng build common-header
cd dist/common-header
npm publish --access public
Local Development & testing
Do these steps from the library directory
ng build common-header --watch
cd dist/common-header/
npm link
Do these steps from the consumer application
npm ci
npm link @propmix/profet-common-header
Running unit tests
Run ng test common-header
to execute the unit tests via Karma.
Further help
To get more help on the Angular CLI use ng help
or go check out the Angular CLI Overview and Command Reference page.