---
Title: Group Cloud component
Added: v3.0.0
Status: Experimental
Last reviewed: 2019-03-20
---
# [Group Cloud component](../../../lib/process-services-cloud/src/lib/group/components/group-cloud.component.ts "Defined in group-cloud.component.ts")
Searches Groups.
## Basic Usage
```html
```
## Class members
### Properties
| Name | Type | Default value | Description |
| ---- | ---- | ------------- | ----------- |
| appName | `string` | | Name of the application. If specified this shows the users who have access to the app. |
| mode | `string` | | User selection mode (single/multiple). |
| preSelectGroups | [`IdentityGroupModel`](../../../lib/core/models/identity-group.model.ts)`[]` | \[] | Array of users to be pre-selected. This pre-selects all users in multi selection mode and only the first user of the array in single selection mode. |
| roles | `string[]` | \[] | Role names of the groups to be listed. |
| searchGroupsControl | `FormControl` | new FormControl() | FormControl to search the group |
| title | `string` | | Title of the field |
### Events
| Name | Type | Description |
| ---- | ---- | ----------- |
| removeGroup | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<`[`IdentityGroupModel`](../../../lib/core/models/identity-group.model.ts)`>` | Emitted when a group is removed. |
| selectGroup | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<`[`IdentityGroupModel`](../../../lib/core/models/identity-group.model.ts)`>` | Emitted when a group is selected. |
## Details
### Selection Mode
You can specify either single selection or multiple selection (single
is the default):
#### Single selection
```html
```
#### Multiple selection
```html
```
### Pre-selection
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
```