core/properties-list/properties-list.component.ts
Renders a list of properties of an object.
Example :<c8y-properties-list
icon="info"
[properties]="properties"
[data]="options"
[emptyLabel]="'-'"
[title]="'Application properties' | translate"
></c8y-properties-list>
OnChanges
| selector | c8y-properties-list |
| templateUrl | ./properties-list.component.html |
Methods |
Inputs |
| data |
Type : object
|
|
An object where the properties keys are resolved from. |
| emptyLabel |
Type : string
|
Default value : null
|
|
Set this label to display all properties but the empty ones
get the |
| groups |
Type : string[]
|
Default value : []
|
|
A string array of groups that are shown. If noParse is set to false, each complex key will form a group. |
| icon |
Type : string
|
|
An icon which is displayed next to the title. |
| noParse |
Type : boolean
|
Default value : false
|
|
The component tries to parse the properties and resolve keys and types. You can avoid this by setting this property to true. |
| properties |
Type : PropertiesListItem[]
|
Default value : []
|
|
The properties that this list should display. |
| title |
Type : string
|
|
A title for the list. |
| hasGroup | ||||||||
hasGroup(item: PropertiesListItem)
|
||||||||
|
Checks if a certain property has an group associated.
Parameters :
Returns :
any
|
| ngOnChanges | ||||||
ngOnChanges(changes: SimpleChanges)
|
||||||
|
Parameters :
Returns :
void
|
<p class="m-b-8" *ngIf="title">
<i *ngIf="icon" [c8yIcon]="icon" class="text-info m-r-8"></i>
<span class="text-label-small">{{ title | translate }}</span>
</p>
<ul class="list-unstyled small">
<li
class="p-t-4 p-b-4 d-flex"
*ngFor="let prop of properties; let i = index; trackBy: identity"
[ngClass]="{'separator-top-bottom': i === 0,
'separator-bottom': i > 0}"
>
<div
[ngClass]="{
'm-l-16': hasGroup(prop),
legend: prop.type === 'group',
'form-block': prop.type === 'group',
'm-b-0': prop.type === 'group',
'm-t-4': prop.type === 'group'
}"
class="small text-medium text-nowrap m-r-4"
>
{{ prop.label | translate }}
</div>
<span [ngSwitch]="prop.type" class="m-l-auto">
<span *ngSwitchCase="'string'" class="m-l-auto">{{ prop.value }}</span>
<a
*ngSwitchCase="'link'"
(click)="prop.action($event, prop.value)"
class="m-l-auto pointer text-truncate m-l-4"
>{{ prop.value }}</a>
<span *ngSwitchCase="'array'">
<span
class="label label-info m-l-4"
*ngFor="let propTag of prop.value"
(click)="prop.action && prop.action($event, propTag)"
[ngClass]="{
pointer: prop.action
}"
>{{ propTag }}</span>
</span>
</span>
</li>
</ul>