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 c8yIcon="plus-circle"></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