---
Title: Group Cloud component
Added: v3.0.0
Status: Active
Last reviewed: 2018-20-11
---
# [Group Cloud component](../../lib/process-services-cloud/src/lib/group-cloud/components/group-cloud.component.ts "Defined in group-cloud.component.ts")
Searches Groups.
## Basic Usage
```html
```
## Class members
### Properties
| Name | Type | Default value | Description |
| ---- | ---- | ------------- | ----------- |
| applicationName | `string` | | Name of the application. If specified, shows the groups who have access to the app. |
| mode | `string` | 'single' | Mode of the user selection (single/multiple). |
| preSelectGroups | `GroupModel[]` | Array of groups to be pre-selected. Pre-select all groups in `multiple` mode and only the first group of the array in `single` mode. |
### Events
| Name | Type | Description |
| ---- | ---- | ----------- |
| selectGroup | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<`[`GroupModel`](../../lib/process-services-cloud/src/lib/group-cloud/models/group.model.ts)`>` | Emitted when a group selected. |
| removeGroup | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<`[`GroupModel`](../../lib/process-services-cloud/src/lib/group-cloud/models/group.model.ts)`>` | Emitted when selected group is removed in `multiple` mode. |
| error | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`` |
## Details
### Selection Mode
You can provide selection mode singe(default)/multiple
## Single select
```html
```
## Multiple select
```html
```
## Pre-select
Usage example:
```ts
import { ObjectDataTableAdapter } from '@alfresco/adf-core';
@Component({...})
export class MyComponent {
groups: any;
constructor() {
this.groups =
[
{id: 1, name: 'Group 1'},
{id: 2, name: 'Group 2'}
];
}
}
```
```html
```