translation of survery file inside system module

src/app/system/manage-surveys/create-survey/create-survey.component.html

@@ -11,41 +11,41 @@
           <div fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
 
             <mat-form-field fxFlex="48%">
-              <mat-label>Key</mat-label>
+              <mat-label>{{'labels.inputs.Key' | translate}}</mat-label>
               <input matInput maxlength="32" required formControlName="key">
               <mat-error *ngIf="surveyForm.controls.key.hasError('required')">
-                Key is <strong>required</strong>
+                {{'labels.inputs.Key' | translate}} {{'labels.commons.is' | translate}} <strong>{{'labels.commons.required' | translate}}</strong>
               </mat-error>
             </mat-form-field>
 
             <mat-form-field fxFlex="48%">
-              <mat-label>Name</mat-label>
+              <mat-label>{{'labels.inputs.Name' | translate}}</mat-label>
               <input matInput maxlength="255" required formControlName="name">
               <mat-error *ngIf="surveyForm.controls.name.hasError('required')">
-                Name is <strong>required</strong>
+                {{'labels.inputs.Name' | translate}} {{'labels.commons.is' | translate}} <strong>{{'labels.commons.required' | translate}}</strong>
               </mat-error>
             </mat-form-field>
 
             <mat-form-field fxFlex="48%">
-              <mat-label>Country Code</mat-label>
+              <mat-label>{{ 'labels.inputs.Country Code' | translate }}</mat-label>
               <input matInput maxlength="2" required formControlName="countryCode">
               <mat-error *ngIf="surveyForm.controls.countryCode.hasError('required')">
-                Country Code is <strong>required</strong>
+                {{ 'labels.inputs.Country Code' | translate }} {{'labels.commons.is' | translate}} <strong>{{'labels.commons.required' | translate}}</strong>
               </mat-error>
               <mat-error *ngIf="surveyForm.controls.countryCode.hasError('pattern')">
-                Country Code <strong>must consist of 2 alphabetic characters</strong>
+                {{ 'labels.inputs.Country Code' | translate }} <strong>{{ 'labels.commons.must consist of 2 alphabetic characters' | translate }}</strong>
               </mat-error>
             </mat-form-field>
 
             <mat-form-field fxFlex="98%">
-              <mat-label>Description</mat-label>
+              <mat-label>{{ 'labels.inputs.Description' | translate }}</mat-label>
               <textarea matInput formControlName="description" cdkTextareaAutosize cdkAutosizeMinRows="2"></textarea>
             </mat-form-field>
 
             <div fxFlexFill fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px" *ngIf="!questionDatas.length">
-              <button type="button" mat-raised-button [routerLink]="['../']">Cancel</button>
+              <button type="button" mat-raised-button [routerLink]="['../']">{{'labels.buttons.Cancel' | translate}}</button>
               <button type="button" mat-raised-button color="primary" [disabled]="!(this.surveyForm.get('key').valid && this.surveyForm.get('name').valid && this.surveyForm.get('countryCode').valid)" (click)="addQuestion()">
-                Proceed
+                {{'labels.buttons.Proceed' | translate}}
               </button>
             </div>
 
@@ -64,41 +64,41 @@
             <div fxFlexFill fxLayoutGap="2%" fxLayout.lt-md="column" fxLayout="row wrap" [formGroupName]="questionIndex">
 
               <div fxFlex="98%" fxLayout="row wrap" fxLayoutGap="2%" fxLayoutAlign="space-between center">
-                <h2 class="mat-h2">Question {{ questionIndex + 1 }}</h2>
+                <h2 class="mat-h2">{{'labels.heading.Question' | translate}} {{ questionIndex + 1 }}</h2>
                 <button mat-raised-button color="warn" (click)="removeQuestion(questionIndex)" [disabled]="questionDatas.controls.length === 1">
                   <fa-icon icon="trash" class="m-r-10"></fa-icon>
-                  Delete Question
+                  {{'labels.buttons.Delete' | translate }} {{'labels.heading.Question' | translate}}
                 </button>
               </div>
 
               <mat-form-field fxFlex="48%">
-                <mat-label>Key</mat-label>
+                <mat-label>{{'labels.inputs.Key' | translate}}</mat-label>
                 <input matInput maxlength="32" required formControlName="key">
                 <mat-error *ngIf="question.controls.key.hasError('required')">
-                  Key is <strong>required</strong>
+                  {{'labels.inputs.Key' | translate}} {{'labels.commons.is' | translate}} <strong>{{'labels.commons.required' | translate}}</strong>
                 </mat-error>
               </mat-form-field>
 
               <mat-form-field fxFlex="48">
-                <mat-label>Text</mat-label>
+                <mat-label>{{'labels.inputs.Text' | translate}}</mat-label>
                 <input matInput maxlength="255" required formControlName="text">
                 <mat-error *ngIf="question.controls.text.hasError('required')">
-                  Text is <strong>required</strong>
+                  {{'labels.inputs.Text' | translate}} {{'labels.commons.is' | translate}} <strong>{{'labels.commons.required' | translate}}</strong>
                 </mat-error>
               </mat-form-field>
 
               <mat-form-field fxFlex="98%">
-                <mat-label>Description</mat-label>
+                <mat-label>{{ 'labels.inputs.Description' | translate }}</mat-label>
                 <textarea matInput formControlName="description" cdkTextareaAutosize cdkAutosizeMinRows="2"></textarea>
               </mat-form-field>
 
               <mat-divider [inset]="true"></mat-divider>
 
               <div fxFlex="98%" fxLayout="row" fxLayoutAlign="space-between center">
-                <h4 class="mat-h4">Options</h4>
+                <h4 class="mat-h4">{{'labels.heading.Options' | translate}}</h4>
                 <button type="button" mat-raised-button color="primary" (click)="addResponse(questionIndex)">
                   <fa-icon icon="plus" class="m-r-10"></fa-icon>
-                  Add Option
+                  {{'labels.buttons.Add' | translate}} {{'labels.inputs.Option' | translate}}
                 </button>
               </div>
 
@@ -109,27 +109,27 @@
                   <div fxFlexFill fxLayout="row wrap" fxLayoutGap="2%" [formGroupName]="responseIndex">
 
                     <mat-form-field fxFlex="43%">
-                      <mat-label>Text</mat-label>
+                      <mat-label>{{'labels.inputs.Text' | translate}}</mat-label>
                       <input matInput required formControlName="text">
                       <mat-error *ngIf="response.controls.text.hasError('required')">
-                        Text is <strong>required</strong>
+                        {{'labels.inputs.Text' | translate}} {{'labels.commons.is' | translate}} <strong>{{'labels.commons.required' | translate}}</strong>
                       </mat-error>
                     </mat-form-field>
 
                     <mat-form-field fxFlex="43%">
-                      <mat-label>Value</mat-label>
+                      <mat-label>{{'labels.inputs.Value' | translate}}</mat-label>
                       <input matInput required formControlName="value">
                       <mat-error *ngIf="response.controls.value.hasError('required')">
-                        Value is <strong>required</strong>
+                        {{'labels.inputs.Value' | translate}} {{'labels.commons.is' | translate}} <strong>{{'labels.commons.required' | translate}}</strong>
                       </mat-error>
                       <mat-error *ngIf="response.controls.value.hasError('pattern')">
-                        Value <strong>must be an integer between -9999 and 9999</strong>
+                        {{'labels.inputs.Value' | translate}} <strong>{{'labels.commons.must be an integer between -9999 and 9999' | translate}}</strong>
                       </mat-error>
                     </mat-form-field>
 
                     <div fxFlex="8%">
                       <div class="delete-wrapper">
-                        <button type="button" color="warn" mat-icon-button matTooltip="Delete" matTooltipPosition="above" (click)="removeResponse(getResponseDatas(questionIndex), responseIndex)" [disabled]="getResponseDatas(questionIndex).controls.length === 1">
+                        <button type="button" color="warn" mat-icon-button  [matTooltip]="('labels.buttons.Delete' | translate)" matTooltipPosition="above" (click)="removeResponse(getResponseDatas(questionIndex), responseIndex)" [disabled]="getResponseDatas(questionIndex).controls.length === 1">
                           <fa-icon icon="trash" size="lg"></fa-icon>
                         </button>
                       </div>
@@ -148,12 +148,12 @@
           <div>
 
             <mat-card-actions *ngIf="isLast" fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-              <button type="button" mat-raised-button (click)="cancelSurvey()">Cancel</button>
+              <button type="button" mat-raised-button (click)="cancelSurvey()">{{'labels.buttons.Cancel' | translate}}</button>
               <button type="button" mat-raised-button color="primary"(click)="addQuestion()">
                 <fa-icon icon="plus" class="m-r-10"></fa-icon>
-                Add Question
+                {{'labels.buttons.Add' | translate}} {{'labels.heading.Question' | translate}}
               </button>
-              <button mat-raised-button color="primary" [disabled]="!surveyForm.valid">Submit</button>
+              <button mat-raised-button color="primary" [disabled]="!surveyForm.valid">{{'labels.buttons.Submit' | translate}}</button>
             </mat-card-actions>
 
           </div>

src/app/system/manage-surveys/edit-survey/edit-survey.component.html

@@ -11,34 +11,34 @@
             <div fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
 
               <mat-form-field fxFlex="48%">
-                <mat-label>Key</mat-label>
+                <mat-label>{{'labels.inputs.Key' | translate}}</mat-label>
                 <input matInput maxlength="32" required formControlName="key">
                 <mat-error *ngIf="surveyForm.controls.key.hasError('required')">
-                  Key is <strong>required</strong>
+                  {{'labels.inputs.Key' | translate}} {{'labels.commons.is' | translate}} <strong>{{'labels.commons.required' |translate}}</strong>
                 </mat-error>
               </mat-form-field>
 
               <mat-form-field fxFlex="48%">
-                <mat-label>Name</mat-label>
+                <mat-label>{{'labels.inputs.Name' | translate}}</mat-label>
                 <input matInput maxlength="255" required formControlName="name">
                 <mat-error *ngIf="surveyForm.controls.name.hasError('required')">
-                  Name is <strong>required</strong>
+                  {{'labels.inputs.Name' | translate}}  {{'labels.commons.is' | translate}} <strong>{{'labels.commons.required' | translate}}</strong>
                 </mat-error>
               </mat-form-field>
 
               <mat-form-field fxFlex="48%">
-                <mat-label>Country Code</mat-label>
+                <mat-label>{{ 'labels.inputs.Country Code' | translate }} </mat-label>
                 <input matInput maxlength="2" required formControlName="countryCode">
                 <mat-error *ngIf="surveyForm.controls.countryCode.hasError('required')">
-                  Country Code is <strong>required</strong>
+                  {{ 'labels.inputs.Country Code' | translate }}   {{'labels.commons.is' | translate}} <strong>{{'labels.commons.required' | translate}}</strong>
                 </mat-error>
                 <mat-error *ngIf="surveyForm.controls.countryCode.hasError('pattern')">
-                  Country Code <strong>must consist of 2 alphabetic characters</strong>
+                  {{ 'labels.inputs.Country Code' | translate }} <strong>{{ 'labels.commons.must consist of 2 alphabetic characters' | translate }}</strong>
                 </mat-error>
               </mat-form-field>
 
               <mat-form-field fxFlex="98%">
-                <mat-label>Description</mat-label>
+                <mat-label>{{ 'labels.inputs.Description' | translate }}</mat-label>
                 <textarea matInput formControlName="description" cdkTextareaAutosize cdkAutosizeMinRows="2"></textarea>
               </mat-form-field>
 
@@ -57,41 +57,41 @@
               <div fxFlexFill fxLayoutGap="2%" fxLayout.lt-md="column" fxLayout="row wrap" [formGroupName]="questionIndex">
 
                 <div fxFlex="98%" fxLayout="row wrap" fxLayoutGap="2%" fxLayoutAlign="space-between center">
-                  <h2 class="mat-h2">Question {{ questionIndex + 1 }}</h2>
+                  <h2 class="mat-h2">{{'labels.heading.Question' | translate}} {{ questionIndex + 1 }}</h2>
                   <button mat-raised-button color="warn" (click)="removeQuestion(questionIndex)" [disabled]="questionDatas.controls.length === 1">
                     <fa-icon icon="trash" class="m-r-10"></fa-icon>
-                    Delete Question
+                    {{'labels.buttons.Delete' | translate }} {{'labels.heading.Question' | translate}}
                   </button>
                 </div>
 
                 <mat-form-field fxFlex="48%">
-                  <mat-label>Key</mat-label>
+                  <mat-label>{{'labels.inputs.Key' | translate}}</mat-label>
                   <input matInput maxlength="32" required formControlName="key">
                   <mat-error *ngIf="question.get('key').hasError('required')">
-                    Key is <strong>required</strong>
+                    {{'labels.inputs.Key' | translate}}  {{'labels.commons.is' | translate}} <strong>{{'labels.commons.required' | translate}}</strong>
                   </mat-error>
                 </mat-form-field>
 
                 <mat-form-field fxFlex="48">
-                  <mat-label>Text</mat-label>
+                  <mat-label>{{'labels.inputs.Text' | translate}}</mat-label>
                   <input matInput maxlength="255" required formControlName="text">
                   <mat-error *ngIf="question.get('text').hasError('required')">
-                    Text is <strong>required</strong>
+                    {{'labels.inputs.Text' | translate}}  {{'labels.commons.is' | translate}} <strong>{{'labels.commons.required' | translate}}</strong>
                   </mat-error>
                 </mat-form-field>
 
                 <mat-form-field fxFlex="98%">
-                  <mat-label>Description</mat-label>
+                  <mat-label>{{ 'labels.inputs.Description' | translate }}</mat-label>
                   <textarea matInput formControlName="description" cdkTextareaAutosize cdkAutosizeMinRows="2"></textarea>
                 </mat-form-field>
 
                 <mat-divider [inset]="true"></mat-divider>
 
                 <div fxFlex="98%" fxLayout="row" fxLayoutAlign="space-between center">
-                  <h4 class="mat-h4">Options</h4>
+                  <h4 class="mat-h4">{{'labels.heading.Options' | translate}}</h4>
                   <button type="button" mat-raised-button color="primary" (click)="addResponse(questionIndex)">
                     <fa-icon icon="plus" class="m-r-10"></fa-icon>
-                    Add Option
+                    {{'labels.buttons.Add' | translate}} {{'labels.inputs.Option' | translate}}
                   </button>
                 </div>
 
@@ -102,27 +102,27 @@
                     <div fxFlexFill fxLayout="row wrap" fxLayoutGap="2%" [formGroupName]="responseIndex">
 
                       <mat-form-field fxFlex="43%">
-                        <mat-label>Text</mat-label>
+                        <mat-label>{{'labels.inputs.Text' | translate}}</mat-label>
                         <input matInput required formControlName="text">
                         <mat-error *ngIf="response.get('text').hasError('required')">
-                          Text is <strong>required</strong>
+                          {{'labels.inputs.Text' | translate}}  {{'labels.commons.is' | translate}} <strong>{{'labels.commons.required' | translate}}</strong>
                         </mat-error>
                       </mat-form-field>
 
                       <mat-form-field fxFlex="43%">
-                        <mat-label>Value</mat-label>
+                        <mat-label>{{'labels.inputs.Value' | translate}}</mat-label>
                         <input matInput required formControlName="value">
                         <mat-error *ngIf="response.get('value').hasError('required')">
-                          Value is <strong>required</strong>
+                          {{'labels.inputs.Value' | translate}}  {{'labels.commons.is' | translate}} <strong>{{'labels.commons.required' | translate}}</strong>
                         </mat-error>
                         <mat-error *ngIf="response.get('value').hasError('pattern')">
-                          Value <strong>must be an integer between -9999 and 9999</strong>
+                          {{'labels.inputs.Value' | translate}}<strong>{{'labels.commons.must be an integer between -9999 and 9999' | translate}}</strong>
                         </mat-error>
                       </mat-form-field>
 
                       <div fxFlex="8%">
                         <div class="delete-wrapper">
-                          <button type="button" color="warn" mat-icon-button matTooltip="Delete" matTooltipPosition="above" (click)="removeResponse(getResponseDatas(questionIndex), responseIndex)" [disabled]="getResponseDatas(questionIndex).controls.length === 1">
+                          <button type="button" color="warn" mat-icon-button  [matTooltip]="('labels.buttons.Delete' | translate)" matTooltipPosition="above" (click)="removeResponse(getResponseDatas(questionIndex), responseIndex)" [disabled]="getResponseDatas(questionIndex).controls.length === 1">
                             <fa-icon icon="trash" size="lg"></fa-icon>
                           </button>
                         </div>
@@ -141,12 +141,12 @@
             <div>
 
               <mat-card-actions *ngIf="isLast" fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-                <button type="button" mat-raised-button (click)="cancelSurvey()">Cancel</button>
+                <button type="button" mat-raised-button (click)="cancelSurvey()">{{'labels.buttons.Cancel' | translate}}</button>
                 <button type="button" mat-raised-button color="primary" (click)="addQuestion()">
                   <fa-icon icon="plus" class="m-r-10"></fa-icon>
-                  Add Question
+                  {{'labels.buttons.Add' | translate}} {{'labels.heading.Question' | translate}}
                 </button>
-                <button mat-raised-button color="primary" [disabled]="!surveyForm.valid">Edit Survey</button>
+                <button mat-raised-button color="primary" [disabled]="!surveyForm.valid">{{'labels.text.Edit Survey' | translate}}</button>
               </mat-card-actions>
 
             </div>

src/app/system/manage-surveys/manage-surveys.component.html

@@ -1,7 +1,7 @@
 <div class="container m-b-20" fxLayout="row" fxLayoutAlign="end" fxLayoutGap="20px">
   <button mat-raised-button color="primary" [routerLink]="['create']">
     <fa-icon icon="plus" class="m-r-10"></fa-icon>
-    Create Surveys
+    {{'labels.buttons.Create Surveys' | translate}}
   </button>
 </div>
 
@@ -19,42 +19,42 @@
     <table mat-table [dataSource]="dataSource" matSort>
 
       <ng-container matColumnDef="key">
-          <th mat-header-cell *matHeaderCellDef mat-sort-header> Key </th>
+          <th mat-header-cell *matHeaderCellDef mat-sort-header> {{'labels.inputs.Key' | translate}} </th>
           <td mat-cell *matCellDef="let survey"> {{ survey.key }} </td>
       </ng-container>
 
       <ng-container matColumnDef="name">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> Name </th>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{'labels.inputs.Name' | translate}} </th>
         <td mat-cell *matCellDef="let survey"> {{ survey.name }} </td>
       </ng-container>
 
       <ng-container matColumnDef="description">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> Description </th>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{ 'labels.inputs.Description' | translate }} </th>
         <td mat-cell *matCellDef="let survey"> {{ survey.description }} </td>
       </ng-container>
 
       <ng-container matColumnDef="countryCode">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> Country Code </th>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{ 'labels.inputs.Country Code' | translate }} </th>
         <td mat-cell *matCellDef="let survey"> {{ survey.countryCode }} </td>
       </ng-container>
 
       <ng-container matColumnDef="status">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> Status </th>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{ 'labels.inputs.Status' | translate }} </th>
         <td mat-cell *matCellDef="let survey">
-            <div [className]="!isActive(survey.validFrom, survey.validTo) === true ? 'disabled' : 'enabled'">
-                <fa-icon matTooltip="{{ !isActive(survey.validFrom, survey.validTo) === true ? 'Disabled' : 'Enabled' }}" matTooltipPosition="right" icon="circle" size="lg"></fa-icon>
+            <div [className]="!isActive(survey.validFrom, survey.validTo) === true ? ('labels.inputs.Disabled' | translate) : ('labels.inputs.Enabled' | translate)">
+                <fa-icon matTooltip="{{ !isActive(survey.validFrom, survey.validTo) === true ?  ('labels.inputs.Disabled' | translate) : ('labels.inputs.Enabled' | translate) }}" matTooltipPosition="right" icon="circle" size="lg"></fa-icon>
             </div>
         </td>
       </ng-container>
 
       <ng-container matColumnDef="action">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> Action </th>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header> {{'labels.inputs.Action' | translate}} </th>
         <td mat-cell *matCellDef="let survey">
           <button mat-button *ngIf="!isActive(survey.validFrom, survey.validTo)" color="accent">
-            <fa-icon icon="lock-open" class="m-r-10"></fa-icon>Activate
+            <fa-icon icon="lock-open" class="m-r-10"></fa-icon>{{'labels.buttons.Activate' | translate }}
           </button>
           <button mat-button *ngIf="isActive(survey.validFrom, survey.validTo)" color="warn">
-            <fa-icon icon="lock" class="m-r-10"></fa-icon>Deactivate
+            <fa-icon icon="lock" class="m-r-10"></fa-icon>{{'labels.buttons.Deactivate' | translate}}
           </button>
         </td>
       </ng-container>

src/app/system/manage-surveys/view-survey/view-survey.component.html

@@ -1,21 +1,21 @@
 <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column" class="container m-b-20">
   <button mat-raised-button color="primary" *mifosxHasPermission="'UPDATE_REPORT'" (click)="onEdit()">
     <fa-icon icon="edit" class="m-r-10"></fa-icon>
-    Edit
+    {{'labels.buttons.Edit' | translate }}
   </button>
 </div>
 
 <div class="container m-b-20">
   <mat-card>
     <mat-card-header fxLayout="column">
-      <mat-card-title>Survey</mat-card-title>
+      <mat-card-title>{{'labels.buttons.Survey' | translate }}</mat-card-title>
       <mat-divider [inset]="true"></mat-divider>
     </mat-card-header>
     <mat-card-content>
 
       <div fxLayout="row wrap" class="content">
         <div fxFlex="40%" fxFlex.lt-md="50%" class="header">
-          <b>Key:</b>
+          <b>{{'labels.inputs.Key' | translate}}:</b>
         </div>
 
         <div fxFlex="60%" fxFlex.lt-md="50%">
@@ -23,7 +23,7 @@
         </div>
 
         <div fxFlex="40%" fxFlex.lt-md="50%" class="header">
-          <b>Name:</b>
+          <b>{{'labels.inputs.Name' | translate}}:</b>
         </div>
 
         <div fxFlex="60%" fxFlex.lt-md="50%">
@@ -31,7 +31,7 @@
         </div>
 
         <div fxFlex="40%" fxFlex.lt-md="50%" class="header">
-          <b>Country Code:</b>
+          <b>{{ 'labels.inputs.Country Code' | translate }}:</b>
         </div>
 
         <div fxFlex="60%" fxFlex.lt-md="50%">
@@ -39,7 +39,7 @@
         </div>
 
         <div fxFlex="40%" fxFlex.lt-md="50%" class="header">
-          <b>Description:</b>
+          <b>{{ 'labels.inputs.Description' | translate }}:</b>
         </div>
 
         <div fxFlex="60%" fxFlex.lt-md="50%">
@@ -57,24 +57,24 @@
 <div class="container m-b-20">
   <mat-card class="questions">
     <mat-card-header fxLayout="column">
-      <mat-card-title>Questions</mat-card-title>
+      <mat-card-title>{{ 'labels.inputs.Questions' | translate }}</mat-card-title>
       <mat-divider [inset]="true"></mat-divider>
     </mat-card-header>
     <mat-card-content>
       <div class="survey_questions" *ngFor="let questionData of surveyData.questionDatas; index as i">
         <mat-card>
           <mat-card-content>
-            <div>Question: {{i+1}}</div>
+            <div>{{'labels.heading.Question' | translate}}: {{i+1}}</div>
             <div fxLayout="row" id="key_text">
               <div fxFlex="25%" fxFlex.lt-md="50%" class="header">
-                <b>Key:</b>
+                <b>{{'labels.inputs.Key' | translate}}:</b>
               </div>
 
               <div fxFlex="40%" fxFlex.lt-md="50%">
                 {{questionData.key}}
               </div>
               <div fxFlex="40%" fxFlex.lt-md="50%" class="header">
-                <b>Text:</b>
+                <b>{{'labels.inputs.Text' | translate}}:</b>
               </div>
 
               <div fxFlex="40%" fxFlex.lt-md="50%">
@@ -83,7 +83,7 @@
             </div>
             <div fxLayout="row" id="description">
               <div fxFlex="20%" fxFlex.lt-md="50%" class="header">
-                <b>Description:</b>
+                <b>{{ 'labels.inputs.Description' | translate }}:</b>
               </div>
 
               <div fxFlex="40%" fxFlex.lt-md="50%">
@@ -91,7 +91,7 @@
               </div>
             </div>
             <div fxLayout="column" id="questionaire">
-              <div><b>Option: </b></div>
+              <div><b>{{'labels.inputs.Option' | translate}}: </b></div>
               <table id="response">
                 <tr>
                   <th *ngFor="let column of displayedColumns">{{column | titlecase}}</th>