List

The o-list component is used to display a series of items. There is different types of predefined list items you can add to the list component.

For adding a list component to your application you must insert the o-list in your page and include a o-list-item component wrapping the desired list item type you want to display. Check the different list items types below.

List item

List item: text

The o-list-item-text component is used to display list items with a maximum of two lines of text and a title.

<o-list #list keys="id" columns="id;name;username;email" [static-data]="getUsers()"
  title="List" quick-filter="true" quick-filter-columns="name;username;email"
  refresh-button="true" insert-button="false" delete-button="false"
  selectable="false" detail-button-in-row="false"
  detail-button-in-row-icon="chevron_right" edit-button-in-row="false"
  edit-button-in-row-icon="edit" detail-mode="none" pagination-controls="false"
  page-size-options="5;10" insert-button-position="bottom" show-buttons-text="false">
  <o-list-item *ngFor="let row of list.dataArray">
    <o-list-item-text #item  title=""
      primary-text="" secondary-text="" (icon-action)="addToFavorites(row, item)">
    </o-list-item-text>
  </o-list-item>
</o-list>

You can see an example of this component in the OntimizeWeb playground.

List item: avatar

The o-list-item-avatar component is used to display list items with an avatar and a maximum of two lines of text and a title.

<o-list #list keys="id" columns="id;name;username;email" [static-data]="getUsers()"
  title="List" quick-filter="true" quick-filter-columns="name;username;email"
  refresh-button="true" insert-button="false" delete-button="false"
  selectable="false" detail-button-in-row="false"
  detail-button-in-row-icon="chevron_right" edit-button-in-row="false"
  edit-button-in-row-icon="edit" detail-mode="none">
  <o-list-item *ngFor="let row of list.dataArray">
    <o-list-item-avatar #tem  avatar="" title="" primary-text=""
      secondary-text="" (icon-action)="addToFavorites(row, item)">
    </o-list-item-avatar>
  </o-list-item>
</o-list>

You can see an example of this component in the OntimizeWeb playground.

List item: card

The o-list-item-card component is used to display a card list item with text, image and action buttons.

	<o-list #list attr="list" title="List" columns="id;name;username;email;street;phone" keys="id"
  [static-data]="getStaticData()" refresh-button="true" quick-filter="true" insert-button="false"
  row-height="medium" detail-mode="none">
  <o-list-item *ngFor="let row of list.dataArray">
    <o-list-item-card #item title="" subtitle="" show-image="true" image=""
      action-1-text="ACTION 1" action-2-text="ACTION 2"
      (action-1)="onAction1()" (action-2)="onAction2()">
    </o-list-item-card>
  </o-list-item>
</o-list>

You can see an example of this component in the OntimizeWeb playground.

List item: card image

The o-list-item-card-image component is used to display card list items with a big image.

<o-list #list attr="list" title="List" columns="id;name;username;email;street;phone" keys="id"
  [static-data]="getStaticData()" refresh-button="true" insert-button="false"
  quick-filter="no" row-height="medium" detail-mode="none">
  <o-list-item *ngFor="let row of #list.dataArray">
    <o-list-item-card-image title="" subtitle="" content=""
      image="" action-1-text="ACTION 1" action-2-text="ACTION 2" (action-1)="onAction1()" (action-2)="onAction2()"
       (icon-action)="onIconAction()" collapsible="false" collapsed="true">
    </o-list-item-card-image>
  </o-list-item>
</o-list>

You can see an example of this component in the OntimizeWeb playground.

Custom list item

When building an o-list component you can include one of the predefined list items the OntimizeWeb offers or you can include your own list item. For including a custom list item, OntimizeWeb offers the o-list-item directive that can be attached to an angular material list item (mat-list-item) or an angular material card (mat-card).

	<o-list #list attr="list" columns="id;name;username;email;street;phone" quick-filter-columns="name;username" [static-data]="getStaticData()">
  <mat-card *ngFor="let row of list.dataArray" [o-list-item]="row">
    <mat-card-header>
      <div mat-card-avatar>
        <img src="" fxFill />
      </div>
      <mat-card-title></mat-card-title>
      <mat-card-subtitle></mat-card-subtitle>
    </mat-card-header>
  </mat-card>
</o-list>

Custom content in toolbar new

The o-list component allows to add content in the toolbar with the selector o-list-toolbar at start position by default but you can configure the position with position='start' at the start or at the end with the position='end'.

If the selector o-list-toolbar is used together with position='start' the content will always be placed to the right of the New/Refresh/Delete buttons and if used together with position='end' the content will always be placed to the left of the quickfilter

<o-list #list attr="list" ... refresh-button="yes" quick-filter="yes"...>
  <!-- Custom content toolbar in position start -->
  <o-combo o-list-toolbar position="start" label="Sort" width="100px"...></o-combo>
  <!-- Custom content toolbar in position end -->
  <o-slide-toggle o-list-toolbar position="end"....></o-slide-toggle>
</o-list>

Pagination new

By default, the list is not paginating the data, but if you want that behaviour you must set pagination-controls= "yes" in the o-list component.

The paginator displays a dropdown of page sizes for you to choose from. The options for this dropdown can be set via page-size-options. For more information see the API.

You can also configure the number of records initially displayed with query-rows attribute.

Support JDBC UUID new

Ontimize web now supports the JDBC UUID sql type. To indicate that a key column is of type UUID, all you have to do is to set to set the UUID via input keys-sql-types in the o-list as indicated in the following example.

  <o-list  #list service="..." entity="..." keys="ID" keys-sql-types="UUID">
      <o-list-item *ngFor="let list of list.dataArray">
       ....
      </o-list-item>
    </o-list>

OListComponent

Directive: o-list

Component hierarchy

• o-list
  • o-list-item
    • o-list-item-text
    • o-list-item-avatar
    • o-list-item-card
    • o-list-item-card-image

Inherited inputs

• from OServiceBaseComponent:
  • attr
  • columns
  • delete-method
  • entity
  • insert-method
  • keys
  • pageable
  • paginated-query-method
  • parent-keys
  • query-fallback-function
  • query-method
  • query-on-bind
  • query-on-init
  • query-rows
  • query-with-null-parent-keys
  • service
  • service-type
  • static-data
  • store-state
  • update-method
• from OServiceComponent:
  • controls
  • detail-button-in-row
  • detail-button-in-row-icon
  • detail-form-route
  • detail-mode
  • edit-button-in-row
  • edit-button-in-row-icon
  • edit-form-route
  • enabled
  • insert-button
  • insert-form-route
  • page-size-options
  • pagination-controls
  • quick-filter
  • quick-filter-appearance
  • quick-filter-placeholder
  • recursive-detail
  • recursive-edit
  • recursive-insert
  • row-height
  • title
  • visible

Inputs

Name	Since	Description	Default
delete-button no | false | yes | true		Indicates whether or not to show a delete button. The delete button is shown only when some list item is selected	yes
dense no | false | yes | true		Indicates whether or not to display the table in dense mode	no
insert-button-floatable no | false | yes | true		Indicates whether or not the insert button is floatable.	yes
insert-button-position 'bottom' | 'top'		Indicates the insert button is attached at the top or at the bottom of the list when the button is floatable	bottom
keys-sql-types string		Entity keys SQL types, separated by ‘;’
pagination-controls no | false | yes | true		Indicates whether or not to show the pagination controls	no
quick-filter-columns string		Columns used by the quick filter. Separated by ‘;’	columns attribute value
refresh-button no | false | yes | true		Indicates whether or not to show a button for refreshing data	yes
selectable no | false | yes | true		Indicates whether or not to show selection check boxes on the list items	no
show-buttons-text no | false | yes | true		Indicates whether or not to show text in header buttons	no
sort-columns string		Initial ordering, using [ ASC or DESC ] format. Separated by ‘;’

Outputs

Name	Since	Description
beforeGoEditMode		Event triggered befoe going to form edition mode
onDataLoaded		Event triggered when the data is loaded
onFormModeChange		Event triggered when form mode changes
onPaginatedDataLoaded		Event triggered when the paginated data is loaded

List item

Directive: o-list-item

List item directive

Directive: o-list-item

Inputs

Name	Since	Description	Default
o-list-item Object		The list item model data
selectable no | false | yes | true		Indicates whether the list item is selectable or not	no

Outputs

Name	Since	Description
click		Event triggered when the list item is clicked
dblclick		Event triggered when the list item is double clicked

List item: text

Directive: o-list-item-text

Inputs

Name	Since	Description	Default
icon string		Name of google icon (see Google material design icons)
icon-position left | right		The icon position
primary-text string		The primary of the list item
secondary-text string		The secondary of the list item
title string		The title of the list item

Outputs

Name	Since	Description
icon-action		Event triggered when the list item icon is clicked

List item: avatar

Directive: o-list-item-avatar

Inherited inputs

• from List item text:
  • icon
  • primary-text
  • secondary-text
  • title

Inherited outputs

• from List item text:
  • icon-action

List item: card

Directive: o-list-item-card

Inputs

Name	Since	Description
action-1-text string		The text of the first button
action-2-text string		The text of the second button
image string		The image of the list item
subtitle string		The subtitle of the list item
title string		The title of the list item

Outputs

Name	Since	Description
action-1		Event triggered when first button is clicked
action-2		Event triggered when second button is clicked

List item: card image

Directive: o-list-item-card-image

Inherited inputs

• from List item card:
  • action-1-text
  • action-2-text
  • image
  • subtitle
  • title

Inputs

Name	Since	Description
avatar string		The avatar of the list item

Inherited outputs

• from List item card:
  • action-1
  • action-2