GS1UiShowNavigation - Gs1TestTeam/GS1_Angular_Prototype GitHub Wiki
Display GS1 Canada menu (navigation) bar on the top of its website.
| Attributes | type | Description |
|---|---|---|
| displayNames | Array | Define function names in GS1 Canada's menu bar (e.g: ['Analysis View1', 'Analysis View2', 'Analysis View3']) |
| gUrls | Array | Define function path, which are used in Angular Routing (e.g: ['list1', 'list2', 'list3']) |
The list of navigation items and their links are stored in an array of menuItem classes. A variable navList: MenuItem[]; exists in .ts file, it is initialized by a service that provides the array of menuItem classes. Navigation bar content can be changed by editing the array of menuItem classes.
<div class="navigation">
<div class="container">
<nav class="navbar yamm navbar-default" role="navigation">
<div id="navbar-collapse-example" class="navbar-collapse collapse">
<ul class="nav navbar-nav" style="overflow: hidden;">
<li class="dropdown yamm-fw" routerLinkActive="active" *ngFor="let menuItem of navList;">
<a routerLink="{{menuItem.link}}">{{menuItem.name}}</a>
</li>
</ul>
</div>
</nav>
</div>
</div>Source Code:
import { MenuItem } from './MenuItem';
export const MenuList: MenuItem[] = [
{ name: 'Analysis View1', link: 'list1' },
{ name: 'Analysis View2', link: 'list2' },
{ name: 'Analysis View3', link: 'list3' },
];Output:
Source Code:
import { MenuItem } from './MenuItem';
export const MenuList: MenuItem[] = [
{ name: 'Analysis View1', link: 'list1' },
{ name: 'Analysis View2', link: 'list2' },/* remove 'Analysis View3'*/
];Output:
