angular-t9n/src/app/target/unit/unit.component.html

A translation tool for Angular i18n

<h2>{{ (unit | async)?.id }}</h2>

<ng-container *ngIf="form | async as formGroup">
  <form [formGroup]="formGroup">
    <mat-form-field>
      <mat-label i18n>Description</mat-label>
      <input matInput formControlName="description" />
    </mat-form-field>

    <mat-form-field>
      <mat-label i18n>Meaning</mat-label>
      <input matInput formControlName="meaning" />
    </mat-form-field>

    <mat-form-field>
      <mat-label i18n>Source</mat-label>
      <textarea matInput formControlName="source" cdkTextareaAutosize></textarea>
      <button
        type="button"
        mat-icon-button
        matSuffix
        i18n-matTooltip
        matTooltip="Copy source to target"
        (click)="formGroup.get('target').setValue(formGroup.get('source').value)"
      >
        <mat-icon>file_copy</mat-icon>
      </button>
    </mat-form-field>

    <mat-form-field>
      <mat-label i18n>Target</mat-label>
      <textarea matInput formControlName="target" cdkTextareaAutosize></textarea>
    </mat-form-field>

    <mat-form-field>
      <mat-label>State</mat-label>
      <mat-select formControlName="state">
        <mat-option *ngIf="formGroup.get('state').value === 'initial'" value="initial" i18n
          >Initial</mat-option
        >
        <mat-option value="translated" i18n>Translated</mat-option>
        <mat-option value="reviewed" i18n>Reviewed</mat-option>
        <mat-option value="final" i18n>Final</mat-option>
      </mat-select>
    </mat-form-field>
  </form>
</ng-container>

<a mat-raised-button color="primary" routerLink="../.." [queryParams]="params | async">
  <mat-icon>keyboard_backspace</mat-icon> <ng-container i18n>Back</ng-container>
</a>