Angular 2 Menu – Salesforce

Angular 2 Menu from Salesforce, you can use it to allow a user to select an item from a dropdown Menu.

angular 2 menu
angular 2 menu

Simply add the directive nglDropdown to a div to convert it into a dropdown menu.

You can open or close the menu by adding the nglDropdownTrigger directive to a child element (e.g. <button> / <a>)

To indicate that an item is part of our dropdown menu simply add the directive nglDropdownItem.

To create a Picklist use the nglPick directive.

angular 2 picklist menu
angular 2 picklist menu

 

You can use the keyboard to toggle, close, select element from a menu.

Angular 2 Menu developed using The Lightning Design System CSS Framework.

Angular 2 Menu is a native Angular 2 directive (component) developed with typescript.

If you want to setup the environment read this article.

Try Online Example at the end of article: try-it-angular-2

 

HTML File:


<div style="padding-left:10px;padding-top:10px">
<div class="slds-text-heading--label slds-m-bottom--small">Angular 2 Dropdown Menu</div>
<span nglDropdown [(open)]="open">
<button class="slds-button slds-button--neutral" nglDropdownTrigger>
<span class="slds-truncate">Select an item</span>
<ngl-icon icon="down" size="x-small"></ngl-icon>
</button>
<div class="slds-dropdown slds-dropdown--left">
<ul class="dropdown__list" role="menu">
<li class="slds-dropdown__item" *ngFor="#item of items;">
<a role="menuitem" nglDropdownItem (click)="selected = item.value; open = false;">
<p class="slds-truncate">{{item.value}}</p>
<ngl-icon [icon]="item.icon" size="x-small"></ngl-icon>
</a>
</li>
</ul>
</div>
</span>

<button type="button" nglButton="neutral" (click)="onToggle($event)">Open</button>
<button type="button" nglButton="neutral" style="margin-left: 0px;" (click)="open = !open">Toggle</button>

<div *ngIf="selected" class="slds-m-top--large">You selected: <b>{{selected}}</b></div>


<div class="slds-text-heading--label slds-m-bottom--small slds-m-top--x-large">Picklist Multi select</div>
<span nglDropdown [(open)]="open2" [(nglPick)]="picks" nglPickMultiple>
<button class="slds-button slds-button--neutral" nglDropdownTrigger>
<span class="slds-truncate">{{picks.length ? picks.length + ' options selected' : 'Select an Option'}}</span>
<ngl-icon icon="down" size="x-small"></ngl-icon>
</button>
<div class="slds-dropdown slds-dropdown--left">
<ul class="dropdown__list" role="menu">
<li class="slds-dropdown__item" *ngFor="#item of items;" [nglPickOption]="item" nglPickActiveClass="slds-is-selected">
<a role="menuitem" nglDropdownItem>
<p class="slds-truncate">
<ngl-icon icon="check" size="x-small" svgClass="slds-icon--selected slds-m-right--small"></ngl-icon>
{{item.value}}
</p>
</a>
</li>
</ul>
</div>
</span>
</div>

 

TypeScrip File :


import {bootstrap}  from 'angular2/platform/browser';
import {Component} from 'angular2/core';
import {NGL_DIRECTIVES, provideNglConfig} from 'ng-lightning/ng-lightning';

@Component({
selector: 'my-app',
directives: [NGL_DIRECTIVES],
templateUrl: 'app/angular-2-menu.html'
})
export class Angular2Menu {

open: boolean;
picks: any[] = [];

items = [
{ value: 'Element 1', icon: 'BMW 1' },
{ value: 'Element 2', icon: 'BMW 2' },
{ value: 'Element 3', icon: 'BMW 3' },
{ value: 'Element 4', icon: 'BMW 4' },
];

onToggle($event: Event) {
$event.stopPropagation();
this.open = true;
}

}

bootstrap(Angular2Menu, [provideNglConfig()]);

 

API Documentation:


[nglDropdown]

Input


open?: boolean: Whether the dropdown should be open or not.

handlePageEvents?: boolean: Whether the dropdown should handle page events (e.g., clicking on the page closes the dropdown).


Output


openChange: EventEmitter<boolean>: Whether the dropdown is open.


[nglDropdownTrigger]

Input


None


Output


None


[nglDropdownItem]

Input


None


Output


None

all files from here : ng-lightning

angular 2 menu