diff --git a/CHANGELOG.md b/CHANGELOG.md
index ec68dce59f..a7cac7de5c 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -33,6 +33,7 @@ Our versioning strategy is as follows:
* Richtext component ([#1864](https://github.com/Sitecore/jss/pull/1864))
* Container component ([#1872](https://github.com/Sitecore/jss/pull/1872))
* Angular SXA layout ([#1873](https://github.com/Sitecore/jss/pull/1873))([#1880](https://github.com/Sitecore/jss/pull/1880))([#1890](https://github.com/Sitecore/jss/pull/1890))
+ * Link-List ([#1898](https://github.com/Sitecore/jss/pull/1898))
* Column-Splitter ([#1889](https://github.com/Sitecore/jss/pull/1889))
### 🛠Breaking Change
diff --git a/packages/create-sitecore-jss/src/templates/angular-xmcloud/src/app/components/link-list/link-list.component.html b/packages/create-sitecore-jss/src/templates/angular-xmcloud/src/app/components/link-list/link-list.component.html
new file mode 100644
index 0000000000..73345c8ddb
--- /dev/null
+++ b/packages/create-sitecore-jss/src/templates/angular-xmcloud/src/app/components/link-list/link-list.component.html
@@ -0,0 +1,17 @@
+
\ No newline at end of file
diff --git a/packages/create-sitecore-jss/src/templates/angular-xmcloud/src/app/components/link-list/link-list.component.ts b/packages/create-sitecore-jss/src/templates/angular-xmcloud/src/app/components/link-list/link-list.component.ts
new file mode 100644
index 0000000000..b05924d97d
--- /dev/null
+++ b/packages/create-sitecore-jss/src/templates/angular-xmcloud/src/app/components/link-list/link-list.component.ts
@@ -0,0 +1,36 @@
+import { Component, OnInit } from '@angular/core';
+import { SxaComponent } from '../sxa.component';
+import { Field, LinkField, SxaLinkListFields } from '@sitecore-jss/sitecore-jss-angular';
+
+@Component({
+ selector: 'app-link-list',
+ templateUrl: './link-list.component.html',
+})
+export class LinkListComponent extends SxaComponent implements OnInit {
+ title?: Field;
+ fieldLinks: LinkField[] = [];
+
+ getFieldLinkClass(index: number): string {
+ let className = `item${index}`;
+ className += (index + 1) % 2 == 0 ? ' even' : ' odd';
+ if (index === 0) {
+ className += ' first';
+ }
+ if (index + 1 === this.fieldLinks.length) {
+ className += ' last';
+ }
+ return className;
+ }
+
+ ngOnInit() {
+ super.ngOnInit();
+ const datasource = this.rendering.fields?.data?.datasource;
+ if (datasource) {
+ this.title = datasource.field?.title as Field;
+ datasource.children.results.forEach(item => {
+ if (item.field?.link)
+ this.fieldLinks.push(item.field.link as LinkField);
+ });
+ }
+ }
+}
diff --git a/packages/create-sitecore-jss/src/templates/angular-xmcloud/src/app/components/sxa.component.ts b/packages/create-sitecore-jss/src/templates/angular-xmcloud/src/app/components/sxa.component.ts
index 8a0ab7c6b8..c01fad47e7 100644
--- a/packages/create-sitecore-jss/src/templates/angular-xmcloud/src/app/components/sxa.component.ts
+++ b/packages/create-sitecore-jss/src/templates/angular-xmcloud/src/app/components/sxa.component.ts
@@ -1,9 +1,9 @@
import { OnInit, Input, Directive } from '@angular/core';
-import { ComponentRendering } from '@sitecore-jss/sitecore-jss-angular';
+import { ComponentFields, ComponentRendering } from '@sitecore-jss/sitecore-jss-angular';
@Directive()
-export abstract class SxaComponent implements OnInit {
- @Input() rendering: ComponentRendering;
+export abstract class SxaComponent implements OnInit {
+ @Input() rendering: ComponentRendering;
id?: string;
styles?: string;
diff --git a/packages/sitecore-jss-angular/src/components/rendering-field.ts b/packages/sitecore-jss-angular/src/components/rendering-field.ts
index f9f7d783f0..8fdc1807bf 100644
--- a/packages/sitecore-jss-angular/src/components/rendering-field.ts
+++ b/packages/sitecore-jss-angular/src/components/rendering-field.ts
@@ -44,6 +44,25 @@ export interface LinkField extends LinkFieldValue, RenderingField {
editableLastPart?: string;
}
+interface LayoutServiceLinkField {
+ field: {
+ link: LinkField;
+ };
+}
+
+export interface SxaLinkListFields {
+ data: {
+ datasource: {
+ children: {
+ results: LayoutServiceLinkField[];
+ };
+ field: {
+ title: TextField;
+ };
+ };
+ };
+}
+
export interface RichTextField extends RenderingField {}
export interface TextField extends RenderingField {}
diff --git a/packages/sitecore-jss-angular/src/public_api.ts b/packages/sitecore-jss-angular/src/public_api.ts
index da7ec5f344..0aff40dc54 100644
--- a/packages/sitecore-jss-angular/src/public_api.ts
+++ b/packages/sitecore-jss-angular/src/public_api.ts
@@ -30,6 +30,7 @@ export {
RenderingField,
RichTextField,
TextField,
+ SxaLinkListFields,
} from './components/rendering-field';
export { RichTextDirective } from './components/rich-text.directive';
export { TextDirective } from './components/text.directive';
diff --git a/packages/sitecore-jss/src/layout/models.ts b/packages/sitecore-jss/src/layout/models.ts
index 3f60e02081..97adc1e5a2 100644
--- a/packages/sitecore-jss/src/layout/models.ts
+++ b/packages/sitecore-jss/src/layout/models.ts
@@ -93,12 +93,12 @@ export interface ComponentParams {
/**
* Definition of a component instance within a placeholder on a route
*/
-export interface ComponentRendering {
+export interface ComponentRendering {
componentName: string;
dataSource?: string;
uid?: string;
placeholders?: PlaceholdersData;
- fields?: ComponentFields;
+ fields?: T;
params?: ComponentParams;
}
@@ -137,7 +137,7 @@ export interface FieldMetadata {
}
/**
- * Content data returned from Content Service
+ * Content data returned from Layout Service
*/
export interface Item {
name: string;