translation of manage hooks

src/app/system/manage-hooks/view-hook/view-hook.component.html

@@ -2,12 +2,12 @@
 
   <button mat-raised-button color="primary" [routerLink]="['edit']" *mifosxHasPermission="'UPDATE_HOOK'">
     <fa-icon icon="edit" class="m-r-10"></fa-icon>
-    Edit
+    {{'labels.buttons.Edit' | translate }}
   </button>
 
   <button mat-raised-button color="warn" (click)="delete()" *mifosxHasPermission="'DELETE_HOOK'">
     <fa-icon icon="trash" class="m-r-10"></fa-icon>
-    Delete
+    {{'labels.buttons.Delete' | translate }}
   </button>
 
 </div>
@@ -21,7 +21,7 @@
       <div fxLayout="row wrap" class="content">
 
         <div fxFlex="50%" class="mat-body-strong">
-          Hook Name:
+          {{ 'labels.inputs.Hook Name' | translate}}:
         </div>
 
         <div fxFlex="50%">
@@ -29,15 +29,15 @@
         </div>
 
         <div fxFlex="50%" class="mat-body-strong">
-          Status:
+          {{ 'labels.inputs.Status' | translate }}:
         </div>
 
         <div fxFlex="50%">
-          {{ hookData.isActive ? 'Active' : 'Inactive' }}
+          {{ hookData.isActive ? ( 'labels.inputs.Active' | translate ) : ('labels.catalogs.Inactive' | translate) }}
         </div>
 
         <div fxFlex="50%" class="mat-body-strong">
-          Activation Date:
+          {{'labels.inputs.Activation Date' | translate}}:
         </div>
 
         <div fxFlex="50%">
@@ -45,7 +45,7 @@
         </div>
 
         <div fxFlex="50%" class="mat-body-strong">
-          Updated on:
+          {{'labels.inputs.Updated on' | translate}}:
         </div>
 
         <div fxFlex="50%">
@@ -53,7 +53,7 @@
         </div>
 
         <div fxFlex="50%" class="mat-body-strong">
-          Events:
+          {{'labels.inputs.Events' | translate}}:
         </div>
 
         <div fxFlex="50%">
@@ -69,7 +69,7 @@
         </div>
 
         <div fxFlex="50%" class="mat-body-strong" *ngIf="hookData.name === 'Web'">
-          Content Type:
+          {{'labels.inputs.Content Type' | translate}}:
         </div>
 
         <div fxFlex="50%" *ngIf="hookData.name === 'Web'">
@@ -77,7 +77,7 @@
         </div>
 
         <div fxFlex="50%" class="mat-body-strong">
-          Payload URL:
+          {{'labels.inputs.Payload URL' | translate}}:
         </div>
 
         <div fxFlex="50%" *ngIf="hookData.name === 'Web'">
@@ -89,7 +89,7 @@
         </div>
 
         <div fxFlex="50%" class="mat-body-strong" *ngIf="hookData.name === 'SMS Bridge'">
-          Phone Number:
+        {{'labels.inputs.Phone Number' | translate}}:
         </div>
 
         <div fxFlex="50%" *ngIf="hookData.name === 'SMS Bridge'">
@@ -97,7 +97,7 @@
         </div>
 
         <div fxFlex="50%" class="mat-body-strong" *ngIf="hookData.name === 'SMS Bridge'">
-          SMS Provider:
+          {{ 'labels.inputs.SMS Provider' | translate }}:
         </div>
 
         <div fxFlex="50%" *ngIf="hookData.name === 'SMS Bridge'">
@@ -105,7 +105,7 @@
         </div>
 
         <div fxFlex="50%" class="mat-body-strong" *ngIf="hookData.name === 'SMS Bridge'">
-          SMS Provider Account ID:
+          {{'labels.inputs.SMS Provider Account ID' | translate}}:
         </div>
 
         <div fxFlex="50%" *ngIf="hookData.name === 'SMS Bridge'">
@@ -113,7 +113,7 @@
         </div>
 
         <div fxFlex="50%" class="mat-body-strong" *ngIf="hookData.name === 'SMS Bridge'">
-          SMS Provider Token:
+          {{'labels.inputs.SMS Provider Token' | translate}}:
         </div>
 
         <div fxFlex="50%" *ngIf="hookData.name === 'SMS Bridge'">

src/app/system/manage-hooks/view-hook/view-hook.component.ts

@@ -1,12 +1,13 @@
 /** Angular Imports */
 import { Component, OnInit } from '@angular/core';
-import { ActivatedRoute, Router } from '@angular/router';
 import { MatDialog } from '@angular/material/dialog';
+import { ActivatedRoute, Router } from '@angular/router';
 
 /** Custom Components */
 import { DeleteDialogComponent } from '../../../shared/delete-dialog/delete-dialog.component';
 
 /** Custom Services */
+import { TranslateService } from '@ngx-translate/core';
 import { SystemService } from '../../system.service';
 
 /**
@@ -28,11 +29,13 @@ export class ViewHookComponent implements OnInit {
    * @param {MatDialog} dialog Dialog Reference.
    * @param {SystemService} systemService System Service.
    * @param {Router} router Router for navigation.
+   * @param {TranslateService} translateService Translate Service.
    */
   constructor(private route: ActivatedRoute,
               private dialog: MatDialog,
               private systemService: SystemService,
-              private router: Router) {
+              private router: Router,
+              private translateService:TranslateService) {
     this.route.data.subscribe((data: { hook: any }) => {
       this.hookData = data.hook;
     });
@@ -46,7 +49,7 @@ export class ViewHookComponent implements OnInit {
    */
   delete() {
     const deleteHookDialogRef = this.dialog.open(DeleteDialogComponent, {
-      data: { deleteContext: `hook ${this.hookData.id}` }
+      data: { deleteContext: this.translateService.instant('labels.inputs.hook') +' ' + this.hookData.id }
     });
     deleteHookDialogRef.afterClosed().subscribe((response: any) => {
       if (response.delete) {