core/dashboard/dashboard-child.component.ts
A dashboard child allows to position elements correctly on a grid.
By setting c8y-dashboard-child-actions
and
c8y-dashboard-child-title
on the element you can add
custom actions or a custom title to the current child.
By adding the correct branded classes, you can define the look and feel of the child. By default it is displayed as a card.
Example :
host | { |
selector | c8y-dashboard-child |
templateUrl | ./dashboard-child.component.html |
Properties |
Methods |
Inputs |
Outputs |
HostBindings |
Accessors |
constructor(dashboard: DashboardComponent, sanitizer: DomSanitizer, element: ElementRef)
|
||||||||||||
Parameters :
|
canToggleFullscreen |
Type : boolean
|
Default value : true
|
class |
Type : string[] | literal type
|
Default value : {}
|
All classes added to this child |
data |
Type : Widget | any
|
The data object can be used as a dataTransfer object for events of the child. |
editMode |
Type : boolean
|
Default value : false
|
If a dashboard editing is disabled no widgets can be moved, edited, removed or added. |
height |
Type : number
|
Default value : 1
|
The height of the component in grid-rows. |
isFrozen |
Type : boolean
|
If a dashboard is frozen, all children cannot be moved or resized. |
margin |
Type : number
|
Default value : 12
|
The margin of the child in pixel. |
useIntersection |
Type : boolean
|
Default value : false
|
The child content is initialized, as soon it is scrolled into viewport |
width |
Type : number
|
Default value : 1
|
The width of the component in grid-columns. |
x |
Type : any
|
The x position of the child. |
y |
Type : any
|
The y position of the child. |
changeEnd |
Type : EventEmitter
|
An event fired if a child change is ended |
changeStart |
Type : EventEmitter
|
An event fired if a child change is started (dragging or resizing) |
toggleFullscreen |
Type : EventEmitter
|
An event fired if the fullscreen toggle button was pressed. |
attr.style |
Type : any
|
nasty workaround for that issue: https://github.com/angular/angular/issues/9343 |
class.fullscreen |
Type : boolean
|
Default value : false
|
addActions | ||||||||||||
addActions(actions: DashboardChildActionComponent[], prepend)
|
||||||||||||
Parameters :
Returns :
void
|
dragStarted | ||||||
dragStarted($event: CdkDragStart)
|
||||||
Parameters :
Returns :
void
|
ngAfterViewInit |
ngAfterViewInit()
|
Returns :
void
|
ngOnChanges |
ngOnChanges()
|
Returns :
void
|
ngOnDestroy |
ngOnDestroy()
|
Returns :
void
|
ngOnInit |
ngOnInit()
|
Returns :
void
|
reset | ||||||
reset($event?: CdkDragEnd)
|
||||||
Parameters :
Returns :
void
|
resizeStarted | ||||||
resizeStarted($event: CdkDragStart)
|
||||||
Parameters :
Returns :
void
|
setDynamicDimension |
setDynamicDimension()
|
Returns :
void
|
_pxHeight |
Type : string
|
Default value : '100%'
|
_pxWidth |
Type : string
|
Default value : '100%'
|
actions |
Type : DashboardChildActionComponent[]
|
Default value : []
|
changeSubscription |
Type : Subscription
|
The observable subscription which is listen to on changes (drag or resize). |
Public dashboard |
Type : DashboardComponent
|
dragSource |
Type : CdkDrag
|
Public element |
Type : ElementRef
|
fullscreen |
Default value : false
|
Decorators :
@HostBinding('class.fullscreen')
|
intersected |
Default value : false
|
An indicator if the child is intersected (that mean visible for the user) |
isDragging |
Default value : false
|
isResize |
Default value : false
|
klasses |
Type : object
|
Default value : {}
|
lastChange |
Type : "drag" | "resize"
|
Default value : null
|
Tells if the last change was a dragging or resizing event; |
Readonly MD_BOOTSTRAP_BREAKPOINT_READONLY_CLASS_PROPERTY |
Type : number
|
Default value : 768
|
templateActions | ||||||
settemplateActions(actions: DashboardChildActionComponent[])
|
||||||
Parameters :
Returns :
void
|
isFrozen | ||||||
setisFrozen(value: boolean)
|
||||||
If a dashboard is frozen, all children cannot be moved or resized.
Parameters :
Returns :
void
|
pxWidth | ||||
setpxWidth(value)
|
||||
Updates the pixel width of the child (used for resizing)
Parameters :
Returns :
void
|
pxHeight | ||||
setpxHeight(value)
|
||||
Updates the pixel height of the child (used for resizing)
Parameters :
Returns :
void
|
inlineStyle |
getinlineStyle()
|
nasty workaround for that issue: https://github.com/angular/angular/issues/9343 |