core/action-bar/action-bar.module.ts
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".
Example :<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>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.The component can be fully used by content projection in the template. A simple example is:
Example :<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:
Example :<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):
Example :providers: [
hookActionBar({ template: SomeComponent, priority: 10, placement: 'left' })
];More complex examples can be found in the tutorial application:
Example :npx @c8y/cli new myTutorialApp tutorial
cd myTutorialApp
npm install
npm start -- -u http://your-cumulocity-tenant.cumulocity.com