diff --git a/docs/docassets/images/adf-people-list.png b/docs/docassets/images/adf-people-list.png new file mode 100644 index 0000000000..2f671d88cd Binary files /dev/null and b/docs/docassets/images/adf-people-list.png differ diff --git a/docs/people-list.component.md b/docs/people-list.component.md new file mode 100644 index 0000000000..dd28c66e25 --- /dev/null +++ b/docs/people-list.component.md @@ -0,0 +1,80 @@ +# People list component + +Shows a list of users (people). + +![ADF People List](docassets/images/adf-people-list.png) + +## Basic Usage + +Populate the users in the component class: + +```ts +import { UserProcessModel } from 'ng2-alfresco-core'; + +export class SomeComponent implements OnInit { + + people: UserProcessModel[] = [ + { + id: 1, + email: 'john.doe@alfresco.com', + firstName: 'John', + lastName: 'Doe' + }, + { + id: 2, + email: 'jane.doe@alfresco.com', + firstName: 'Jane', + lastName: 'Doe' + } + ]; + + onClickPeopleRow(user: UserProcessModel) { + console.log('Clicked row: ', user); + } + + onClickPeopleAction($event: Event) { + console.log('Clicked action: ', $event); + } +``` + +In the component template use the people list component: + +```html + + + + + {{entry.row.obj.firstName + ' ' + entry.row.obj.lastName}} + + + + +
{{ entry.row.obj.email }}
+
+
+
+
+``` +Note that the people list component is based on the ` + + \ No newline at end of file