core/wizard/wizard-outlet/wizard-outlet.component.ts
| selector | c8y-wizard-outlet |
| templateUrl | ./wizard-outlet.component.html |
Properties |
Methods |
Inputs |
Outputs |
constructor(router: Router, c8yWizardService: WizardService, viewContainerRef: ViewContainerRef, injector: Injector)
|
|||||||||||||||
|
Parameters :
|
| id |
Type : string
|
|
The id parameter identifies the particular wizard and can be used to refer to it when hooking wizard entries. Example: "wizardId". |
| initialState |
Type : any
|
Default value : {}
|
|
The initial state to be assigned to the created component. |
| onPath |
Type : EventEmitter<string>
|
|
The event that is emitted when the URL path is provided. |
| onSelect |
Type : EventEmitter<WizardEntry>
|
|
The event that is emitted when the wizard entry is clicked. |
| handleEntry | ||||||||||
handleEntry(entry: WizardEntry)
|
||||||||||
|
Handles the wizard entry, if the entry contains a path, the user will be redirected to it. Otherwise, an attempt will be made to create a dynamic component provided in the entry.
Parameters :
Returns :
void
|
| ngAfterViewInit |
ngAfterViewInit()
|
|
Returns :
void
|
| ngOnDestroy |
ngOnDestroy()
|
|
Returns :
void
|
| reset |
reset()
|
|
Resets the wizard to its initial state.
Returns :
void
|
| container |
Type : ViewContainerRef
|
Decorators :
@ViewChild('container', {read: ViewContainerRef})
|
| entries |
Type : WizardEntry[]
|
Default value : []
|
|
List of wizard entries. |
<ng-container>
<div class="modal-inner-scroll animated fadeIn" *ngIf="showList">
<p class="p-16 text-center text-medium separator-bottom">
<span translate>Select method</span>
</p>
<div class="list-group list-group-links" *ngIf="entries.length > 0; else emptyState">
<button
*ngFor="let entry of entries"
type="button"
class="list-group-item d-flex a-i-center p-t-8 p-b-8"
(click)="handleEntry(entry)"
>
<div class="list-item-icon">
<i [c8yIcon]="entry.c8yIcon || 'cogs'"></i>
</div>
<div title="{{ entry.name | translate }}" class="list-item-body text-truncate">
{{ entry.name | translate }}
</div>
</button>
</div>
<ng-template #emptyState>
<div class="c8y-empty-state">
<p>{{ 'No options available.' | translate }}</p>
</div>
</ng-template>
</div>
</ng-container>
<template #container [hidden]="showList"></template>