File

core/properties-list/properties-list.component.ts

Description

Renders a list of properties of an object.

<c8y-properties-list
  icon="info"
  [properties]="properties"
  [data]="options"
  [emptyLabel]="'-'"
  [title]="'Application properties' | translate"
></c8y-properties-list>

Metadata

Index

Methods
Inputs
Accessors

Inputs

data
Type : literal type

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 emptyLabel assigned. If the empty label is not set, defaults to 'c8ydontshow' and it not rendered

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 : []

The properties that this list should display.

title
Type : string

A title for the list.

Methods

hasGroup
hasGroup(item: PropertiesListItem)

Checks if a certain property has an group associated.

Parameters :
Name Type Optional Description
item PropertiesListItem No

The property to verify.

Returns : any

Accessors

properties
setproperties(items: PropertiesListItem[])

The properties that this list should display.

Parameters :
Name Type Optional
items PropertiesListItem[] No
Returns : void
data
setdata(data: literal type)

An object where the properties keys are resolved from.

Parameters :
Name Type Optional
data literal type No
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="flex-item-right">
      <span *ngSwitchCase="'string'" class="flex-item-right">{{ prop.value }}</span>
      <a
        *ngSwitchCase="'link'"
        (click)="prop.action($event, prop)"
        class="flex-item-right pointer text-truncate m-l-4"
        >{{ prop.value }}</a
      >
      <span *ngSwitchCase="'array'">
        <span
          class="label label-default m-l-4 text-truncate-wrap"
          *ngFor="let propTag of prop.value"
          (click)="prop.action && prop.action($event, propTag)"
          [ngClass]="{
            pointer: prop.action
          }"
          >{{ propTag }}</span
        >
      </span>
    </span>
  </li>
</ul>

results matching ""

    No results matching ""