Action module

This module provides components which can be used to define and display the list of actions. In applications created via c8ycli tool, this list is displayed in the header bar. It consists of rendered action items. You can define an icon and label for an action item or provide a custom template. The associated function is triggered when the action item is clicked.

• c8y-action -> Allows to add an action item to the actions list.
• c8y-action-outlet -> The outlet which will display the actions list.

Usage example

The action can be added by content projection in the template:

<c8y-action>
  <button class="btn" (click)="myAction()">My action</button>
</c8y-action>

or as object:

  import { ActionService } from '@c8y/ngx-components';
  (...)
  constructor(protected actionService: ActionService) {}
  (...)
  ngOnInit () {
    this.actionService.add( {
      label: 'My action',
      action: () => { // do action; }
    });
  }

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

@Injectable()
export class CustomActionFactory implements ActionFactory {
  constructor() {}

  get() {
    const actions: Action[] = [];
    const customAction = {
      label: 'Custom action'
    };
    actions.push(customAction);
    return actions;
  }
}

Use HOOK_ACTION to provide your own class to extend the action list:

providers: [
  {
      provide: HOOK_ACTION,
      useClass: CustomActionFactory,
      multi: true
  }
];

More complex examples can be found in the tutorial application:

c8ycli new <appName> tutorial