The items are placed on a grid. To specify the design of items. Be aware that the item itself is responsible for its own responsiveness.

Use the grid list only, if your content profits from the format. This can apply to images, charts, but also to object cards or quick views. Another option is to mimick the format (but not the visual) of existing objects (e.g. business cards).

<fdp-grid-list
    [id]="list Id"
    [headerTitle]="header title"
    [footerText]="footer text"
     --------
    >
    <fdp-grid-list-item *ngFor="let item of listItems"
                        [id]="{{item?.id}}"
			[disabled]="{{item?.(true|false)}}"
                        [counter]="{{item?.count}}"
                        [type]="{{item?.(active| detail| detailsAndactive| inactive| navigatio)}}"
			(click)="onitemPress">
                        <ng-content></ng-content>
		</fdp-grid-list-item>
</fdp-grid-list>

id of the object list item it is optional.

counter of the item

Defines behavoiur of item.

export type listType = 'active| detail| detailsAndactive| inactive| navigation';

item is disabled or not.

Fires when item is clicked.

Template:

<li fd-list-item id="listitem”………………….>
 <ng-content></ng-content>
</li>

N/A

N/A

Are used along with this component.

Link to general support for i18n: Supporting internationalization in ngx/platform

Special Usecase: No

• fdp-grid-list-item can be supported as:

<fdp-grid-list-item *ngFor="let item of listItems"
                        i18n="@@gridItem"
                        [id]="{{item?.id}}"
                        [counter]="{{item?.count}}"
			(click)="onitemPress">
                        <ng-content></ng-content>
</fdp-grid-list-item>

• The counter attribute can be supported by using DecimalPipe which can automatically translate numbers depending on the locale.

Redesign Required: No

Sushma: During development need to explore if we can create a style for Grid list item and reuse any of list items of List. Then separate component creation can be avoided.

Kevin:

• Remove titleDirection, numberTextDirection, and introTextDirection, 'RTL' should be handled internally by the component, ideally by CSS rules or alternatively using the RtlService-Done