<div class="title">
  <h3>Add Role To group: {{data.group.name}}</h3>
</div>
<div class="filter">
  <mat-form-field class="input-field">
    <mat-label>Search user </mat-label>
    <input matInput  type="text" [(ngModel)]="searchText" (keydown)="onSearch()">
  </mat-form-field>
</div>

<div class="userList" *ngFor="let role of displayedRoles | async">
  <div>{{role.name}}</div>
  <mat-icon (click)="addRole(role)" *ngIf="!loading">add</mat-icon>
  <mat-spinner *ngIf="loading"></mat-spinner>
</div>
