core/action/action-outlet.component.ts
This component is used as the outlet to show the action list. In a c8ycli app it is by default placed on the header component near app-switcher.
| host | { |
| selector | c8y-action-outlet |
| templateUrl | ./action-outlet.component.html |
Properties |
Methods |
Inputs |
Accessors |
| items |
Type : any
|
|
The current items to display in the action dropdown. |
| invoke | ||||
invoke(action)
|
||||
|
Invokes action after an action is clicked.
Parameters :
Returns :
void
|
| components$ |
Type : Observable<Action[]>
|
Default value : this.items$.pipe(
map(items =>
sortBy(
items.filter(action => action.component),
this.byPriority
)
)
)
|
|
Returns the items that are displayed at the top navigation. |
| isPageToolbarExpanded |
Default value : false
|
|
Identifies if in a mobile view the toolbar is expanded or not. |
| templatesAndLabels$ |
Type : Observable<Action[]>
|
Default value : this.items$.pipe(
map(items =>
sortBy(
items.filter(action => !action.component),
this.byPriority
)
)
)
|
|
Returns the items that are displayed in the "add"-dropdown ordered by priority. |
| items | ||||
getitems()
|
||||
setitems(value)
|
||||
|
The current items to display in the action dropdown.
Parameters :
Returns :
void
|
<ng-container *ngIf="(components$ | async)?.length > 0">
<div class="main-header-item" *ngFor="let item of components$ | async">
<ng-container *ngComponentOutlet="item.component; injector: item.injector"></ng-container>
</div>
</ng-container>
<ng-container>
<div class="main-header-item" *ngIf="(templatesAndLabels$ | async)?.length > 0">
<div class="dropdown" dropdown>
<button
type="button"
class="main-header-button dropdown-toggle c8y-dropdown"
dropdownToggle
aria-haspopup="true"
aria-expanded="true"
title="{{ 'Actions' | translate }}"
>
<i [c8yIcon]="'plus-circle'" class="icon-2x"></i>
</button>
<ul class="dropdown-menu cog-dropdown" *dropdownMenu>
<ng-container *ngFor="let item of templatesAndLabels$ | async">
<ng-container *c8yOutlet="item.template; injector: item.injector"></ng-container>
<li *ngIf="item.label">
<button
title="{{ item.label | translate }}"
[attr.disabled]="item.disabled ? 'disabled' : null"
(click)="invoke(item)"
>
<i *ngIf="item.icon" [c8yIcon]="item.icon"></i>
{{ item.label | translate }}
</button>
</li>
</ng-container>
</ul>
</div>
</div>
</ng-container>