File

core/action-bar/action-bar.module.ts

Description

An action bar can be added with content projection or multi provider extension. It allows to show them in three positions (left, right or more). The actions placed here are always local actions to the current route like "add device" or "lock dashboard".

Declarations

Imports

CommonModule
RouterModule

Exports

Action Bar Module

An action bar is usually an icon and a label which is at the top of the current view. It can be used to call for action. Components in this module are

c8y-action-bar-item -> Allows to set an action bar item on the current view.
c8y-action-bar -> The outlet which will display the action bars. Usually there is no need to use that.

Usage example

The component can be fully used by content projection in the template. A simple example is:

<c8y-action-bar-item [placement]="'right'">
  <button class="btn btn-link" (click)="addRandom()"><i class="fa fa-plus"></i> Add random</button>
</c8y-action-bar-item>

Due to content projection, anything can be placed inside the action-bar-item:

<c8y-action-bar-item [placement]="'left'" [priority]="100">
  <a href="http://cumulocity.com">Check out our Website</a>
</c8y-action-bar-item>

For complex cases the multi provider concept can be used (e.g. if you only want to add it to certain routes):

providers: [
  {
    provide: HOOK_ACTION_BAR,
    useValue: [{ template: SomeComponent, priority: 10, placement: 'left' } as ActionBarItem], // alternative useClass: get() {}
    multi: true
  }
];

More complex examples can be found in the tutorial application:

npx @c8y/cli new myTutorialApp tutorial
cd myTutorialApp
npm install
npm start -- -u http://your-cumulocity-tenant.cumulocity.com