argos/dmp-frontend/src/app/ui/admin/user/listing/role-editor/user-role-editor.component.html

<form class="row user-role-editor" *ngIf="formGroup" [formGroup]="formGroup" (ngSubmit)="formSubmit()">
	<div class="row align-items-center">
	<div *ngIf="!this.nowEditing"class="roles col">
		<ng-container *ngFor="let role of this.formGroup.get('roles').value">
			<div>
				<span  class="user-role" [ngClass]="{'user': role == appRole.User, 'tenant-manager': role == appRole.TenantManager, 'admin': role == appRole.Admin, 'tenant-admin': role == appRole.TenantAdmin, 'tenant-user': role == appRole.TenantUser,'tenant-description-template-editor': role == appRole.TenantDescriptionTemplateEditor}">
					{{enumUtils.toAppRoleString(role)}}
				</span>
			</div>
		</ng-container>
	</div>
	<div class="col-8">
		<mat-form-field *ngIf="this.nowEditing" class="w-100">
			<mat-select formControlName="roles" multiple required>
				<ng-container *ngFor="let role of appRoleEnumValues">
					<mat-option [value]="role">{{enumUtils.toAppRoleString(role)}}</mat-option>
				</ng-container>
			</mat-select>
			<mat-error *ngIf="formGroup.get('roles').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
		</mat-form-field>
	</div>

	<button *ngIf="!this.nowEditing" class="col" mat-icon-button color="primary" type="button" (click)="editItem()">
		<mat-icon class="mat-24" matTooltip="{{'USER-LISTING.ACTIONS.EDIT' | translate}}">edit</mat-icon>
		<span class="row-action"></span>
	</button>
	<button *ngIf="this.nowEditing" class="col-auto save-button" mat-icon-button color="primary" type="submit">
		<mat-icon class="mat-24" matTooltip="{{'USER-LISTING.ACTIONS.SAVE' | translate}}">save</mat-icon>
	</button>
	</div>

</form>