next-ucap-messenger/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/chat/edit-chat-room.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>
      <div>
        <mat-form-field hintLabel="">
          <input
            matInput
            #input
            maxlength="20"
            placeholder="{{ 'chat.nameOfRoom' | translate }}"
            formControlName="roomName"
          />
          <mat-hint align="end">{{ input.value?.length || 0 }}/20</mat-hint>
        </mat-form-field>
      </div>
      <div class="targetSelect">
        <span>{{ 'chat.scopeOfChangeNameOfRoom' | translate }}</span>
        <mat-radio-group
          aria-label="Select an option"
          value="me"
          formControlName="changeTarget"
        >
          <mat-radio-button value="me">{{
            'common.pronoun.me' | translate
          }}</mat-radio-button>
          <mat-radio-button value="all">{{
            'common.pronoun.all' | translate
          }}</mat-radio-button>
        </mat-radio-group>
      </div>
      <div *ngIf="data.roomInfo.isTimeRoom">
        <mat-form-field>
          <mat-label>{{ 'chat.setTimer' | translate }}</mat-label>
          <mat-select formControlName="timerInterval">
            <mat-option *ngFor="let timer of timerArray" [value]="timer.value">
              {{ timer.text }}
            </mat-option>
          </mat-select>
        </mat-form-field>
      </div>
    </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>