@arriva/angular-ui-lib
Advanced tools
Install latest version
npm install @arriva/angular-ui-lib --save
Install specific version
npm install @arriva/angular-ui-lib@1.0.0 --save
Commands:
To build a libary: ng build arriva-ui-lib
To pack it to tgz file: npm run npm_pack
To install it in your project npm install pathToLibrary.tgz
Introduce lib in project:
This project was generated with Angular CLI version 6.0.8.
Added formatWithMoment() Date extension, usage: var date = new Date(); date.formatWithMoment(moment.HTML5_FMT.DATE); // "2017-12-14" more: https://momentjs.com/docs/
Added MessageboxDialogComponent to show messages to the users.
Changes in header and navigation components
a. Components "nav" and "nav-menu" are obsolete and replaced by "nav-header", "nav-bar" and "nav-hamburger":
<div class="app-container" scroll="no">
<mat-drawer-container class="menu-container">
<mat-drawer #menuDrawer mode="Over">
<lib-nav-hamburger [drawer]="menuDrawer" [menuItems]="menuItems"></lib-nav-hamburger>
</mat-drawer>
<mat-drawer-content>
<lib-nav-header class="nav-container" [name]="name" [drawer]="menuDrawer"></lib-nav-header>
<lib-nav-bar [menuItems]="menuItems"></lib-nav-bar>
<mat-card class="card-container .mat-elevation-z0"> <router-outlet></router-outlet> </mat-card>
</mat-drawer-content>
</mat-drawer-container>
<ngx-spinner bdColor="rgba(51,51,51,0.8)" size="medium" color="#fff" type="ball-scale-multiple"> </ngx-spinner>
</div>
b. Every menu element in the definition of the "click" event should call the "toggleMenuItemsSelection" methog from "MenuItemService":
const elementMenuItemSubject = new Subject<MenuItem>();
elementMenuItemSubject.subscribe(item => {
this.menuItemService.toggleMenuItemsSelection(this.menuItems, item);
...
});
c. A section should be added to the translation files:
EN:
"USERINFO": {
"USERINFO": "Phonenumber",
"EMPLOYEEID": "Employee ID",
"DEFAULTDISTRICT": "Default district ID",
"ROLE": "Role"
}
SV:
"USERINFO": {
"USERINFO": "Telefonnummer",
"EMPLOYEEID": "Anställnings-ID",
"DEFAULTDISTRICT": "Standarddistrikts-ID",
"ROLE": "Roll"
}
???
???
Components "nav-bar" and "nav-hamburger" are obsolete and replaced by "nav-bar-v2" and "nav-hamburger-v2":
To create navigation bar buttons fill navigation object in headerService:
this.headerService.navigation = new Navigation( [new MenuItem('', 'NAV.BUTTON', buttonSubject, undefined)], // list of buttons (currently only one item is supported) [new MenuItem('', 'NAV.ITEM1', undefined, '/example')] // list of navigation items );
If navigation item changes only route Subject is not nessessary - just pass route in fourth parameter.
Take note of flag isMultiDistrict in both components.
Defined only one header object for multiple / single district selection : this.headerService.header = new Header('TestApka', true, true, true, true, true); Last parameter is isMultiDistrict flag (boolean) by default set to false. Currently we don't need to set any parameters on HTML templates like before. Example from app.component.ts:
private initializeDistrictHeader() {
this.headerService.header = new Header('TestApka', true, true, true, true, true);
const list = new Array<HeaderDropdownItem>(
new HeaderDropdownItem(1, '', 'Pagatagen'),
new HeaderDropdownItem(2, '', 'Östgötapendeln'),
new HeaderDropdownItem(3, '', 'Custom district')
);
this.headerService.header.setDropdownItems.next(list);
const selectedItem = list.find(x => x.id === 1);
if (selectedItem) {
this.headerService.header.setSelectedDropdownItems.next([selectedItem]);
}
}
Please remember that now districts operates on arrays of selected items ids, not on id value.
New initialization of districts regarding to loading districts from local storage: private initializeDistrictHeader() { this.headerService.header = new Header('TestApka', true, true, true, true, false); const list = new Array( new HeaderDropdownItem(1, '', 'Pagatagen'), new HeaderDropdownItem(2, '', 'Östgötapendeln'), new HeaderDropdownItem(3, '', 'Custom district') );
this.headerService.header.setDropdownItems.next(list);
const selectedDistrictsFromLocalStorage = this.headerService.getSelectedDropdownsIds();
if (!selectedDistrictsFromLocalStorage) {
this.headerService.header.setSelectedDropdownItems.next([list[0]]);
} else {
this.headerService.header.setSelectedDropdownItems.next(selectedDistrictsFromLocalStorage);
}
}
Run ng serve for a dev server. Navigate to http://localhost:4200/. The app will automatically reload if you change any of the source files.
Run ng generate component component-name to generate a new component. You can also use ng generate directive|pipe|service|class|guard|interface|enum|module.
Run ng build to build the project. The build artifacts will be stored in the dist/ directory. Use the --prod flag for a production build.
Run ng test to execute the unit tests via Karma.
Run ng e2e to execute the end-to-end tests via Protractor.
To get more help on the Angular CLI use ng help or go check out the Angular CLI README.
FAQs
Install latest version
We found that @arriva/angular-ui-lib demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 2 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Product
Socket Fix 2.0 brings targeted CVE remediation, smarter upgrade planning, and broader ecosystem support to help developers get to zero alerts.
Security News
Socket CEO Feross Aboukhadijeh joins Risky Business Weekly to unpack recent npm phishing attacks, their limited impact, and the risks if attackers get smarter.
Product
Socket’s new Tier 1 Reachability filters out up to 80% of irrelevant CVEs, so security teams can focus on the vulnerabilities that matter.