next-ucap-messenger/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/group/edit-group.dialog.component.html

<mat-card class="confirm-card mat-elevation-z">
  <mat-card-header cdkDrag cdkDragRootElement=".cdk-overlay-pane" cdkDragHandle>
    <mat-card-title>{{ data.title }}</mat-card-title>
  </mat-card-header>
  <mat-card-content>
    <form name="inputForm" [formGroup]="inputForm" novalidate>
      <mat-form-field
        hintLabel="{{
          'common.useOnlyForSpecialCharacter'
            | translate: { specialCharacter: '-,_' }
        }}"
      >
        <input
          matInput
          #input
          maxlength="20"
          placeholder="{{ 'group.name' | translate }}"
          formControlName="groupName"
        />
        <mat-hint align="end">{{ input.value?.length || 0 }}/20</mat-hint>
      </mat-form-field>
    </form>
  </mat-card-content>
  <mat-card-actions class="button-farm flex-row">
    <button
      mat-stroked-button
      (click)="onClickChoice(false)"
      class="mat-primary"
    >
      {{ 'common.messages.no' | translate }}
    </button>
    <button mat-flat-button (click)="onClickChoice(true)" class="mat-primary">
      {{ 'common.messages.yes' | translate }}
    </button>
  </mat-card-actions>
</mat-card>