translation of rolesandpermissions

src/app/system/roles-and-permissions/view-role/view-role.component.html

@@ -1,22 +1,22 @@
 <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column" class="container m-b-20">
   <button mat-raised-button color="primary" (click)="editRoles(); backupCheckValues();" [disabled]="rolePermissionService.name === 'Super user'">
     <fa-icon icon="edit" class="m-r-10"></fa-icon>
-    Edit Role
+    {{ 'labels.text.Edit Role' | translate }}
   </button>
 
   <button *ngIf="!isRoleEnable(rolePermissionService.disabled)" mat-raised-button color="danger" (click)="disableRolesConfirmation()" [disabled]="rolePermissionService.name === 'Super user'">
     <fa-icon icon="lock" class="m-r-10"></fa-icon>
-    Disable Role
+    {{ 'labels.buttons.Disable' | translate }} {{ 'labels.inputs.Role' | translate }}
   </button>
 
   <button *ngIf="isRoleEnable(rolePermissionService.disabled)" mat-raised-button color="primary" (click)="enableRolesConfirmation()" [disabled]="rolePermissionService.name === 'Super user'">
     <fa-icon icon="lock-open" class="m-r-10"></fa-icon>
-    Enable Role
+    {{ 'labels.buttons.Enable' | translate }} {{ 'labels.inputs.Role' | translate }}
   </button>
 
   <button mat-raised-button color="warn" (click)="deleteRole()" [disabled]="rolePermissionService.name === 'Super user'">
     <fa-icon icon="trash" class="m-r-10"></fa-icon>
-    Delete Role
+    {{'labels.buttons.Delete' | translate }} {{ 'labels.inputs.Role' | translate }}
   </button>
 
 </div>
@@ -30,7 +30,7 @@
       <div fxLayout="row wrap" class="content">
 
         <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%">
@@ -38,7 +38,7 @@
         </div>
 
         <div fxFlex="40%" fxFlex.lt-md="50%" class="header">
-          <b>Description:</b>
+          <b>{{ 'labels.inputs.Role Description' | translate }}:</b>
         </div>
 
         <div fxFlex="60%" fxFlex.lt-md="50%">
@@ -62,13 +62,13 @@
       <div fxLayout="row" class="permissionSelected">
         <div fxFlex="75">
           <h3>
-            Permissions: <strong>{{ formatName(previousGrouping) }}</strong>
+            {{'labels.buttons.Permissions' | translate }}: <strong>{{ formatName(previousGrouping) }}</strong>
           </h3>
         </div>
 
         <div fxFlex= "25" fxLayout="row" fxLayout.xs="column" fxLayoutAlign="end" fxLayoutGap="5px" *ngIf="!isDisabled" class="selectDeselect">
-          <button mat-raised-button color="primary" (click)="selectAll()">Select All</button>
-          <button mat-raised-button color="default" (click)="deselectAll()">Deselect All</button>
+          <button mat-raised-button color="primary" (click)="selectAll()">{{'labels.buttons.Select All' | translate }}</button>
+          <button mat-raised-button color="default" (click)="deselectAll()">{{'labels.buttons.Deselect All' | translate }}</button>
         </div>
 
       </div>
@@ -110,8 +110,8 @@
 
     <div fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px" *ngIf="!isDisabled">
       <mat-card-actions>
-        <button type="button" mat-raised-button (click)="cancel(); restoreCheckboxes();">Cancel</button>
-        <button mat-raised-button color="primary" (click)="submit()">Submit</button>
+        <button type="button" mat-raised-button (click)="cancel(); restoreCheckboxes();">{{'labels.buttons.Cancel' | translate}}</button>
+        <button mat-raised-button color="primary" (click)="submit()">{{'labels.buttons.Submit' | translate}}</button>
       </mat-card-actions>
     </div>
 

src/app/system/roles-and-permissions/view-role/view-role.component.ts

@@ -1,12 +1,13 @@
 /** Angular Imports  */
 import { Component, OnInit } from '@angular/core';
-import { ActivatedRoute, Router } from '@angular/router';
-import { UntypedFormGroup, UntypedFormBuilder, Validators } from '@angular/forms';
+import { UntypedFormBuilder, UntypedFormGroup, Validators } from '@angular/forms';
 import { MatDialog } from '@angular/material/dialog';
-import { SystemService } from '../../system.service';
+import { ActivatedRoute, Router } from '@angular/router';
 import * as _ from 'lodash';
+import { SystemService } from '../../system.service';
 
 /** Custom Components */
+import { TranslateService } from '@ngx-translate/core';
 import { DeleteDialogComponent } from '../../../shared/delete-dialog/delete-dialog.component';
 import { DisableDialogComponent } from '../../../shared/disable-dialog/disable-dialog.component';
 import { EnableDialogComponent } from '../../../shared/enable-dialog/enable-dialog.component';
@@ -59,11 +60,13 @@ export class ViewRoleComponent implements OnInit {
    * @param {Router} router Router for navigation.
    * @param {FormBuilder} formBuilder Form Builder.
    * @param {MatDialog} dialog Shared Dialog Boxes.
+   * @param {TranslateService} translateService Translate Service.
    */
   constructor(private route: ActivatedRoute,
     private systemService: SystemService,
     private router: Router,
     private formBuilder: UntypedFormBuilder,
+    private translateService:TranslateService,
     public dialog: MatDialog) {
     this.route.data.subscribe((data: { roledetails: any }) => {
       this.rolePermissionService = data.roledetails;
@@ -246,7 +249,7 @@ export class ViewRoleComponent implements OnInit {
    */
   deleteRole() {
     const deleteRoleDialogRef = this.dialog.open(DeleteDialogComponent, {
-      data: { deleteContext: `role ${this.roleId}` }
+      data: { deleteContext: this.translateService.instant('labels.inputs.Role') + ' ' + this.roleId }
     });
     deleteRoleDialogRef.afterClosed().subscribe((response: any) => {
       if (response.delete) {
@@ -265,7 +268,7 @@ export class ViewRoleComponent implements OnInit {
    */
   enableRolesConfirmation() {
     const enableRoleDialogRef = this.dialog.open(EnableDialogComponent, {
-      data: { enableContext: `role ${this.roleId}` }
+      data: { enableContext: this.translateService.instant('labels.inputs.Role') + ' ' + this.roleId }
     });
     enableRoleDialogRef.afterClosed().subscribe((response: any) => {
       if (response.enable) {
@@ -284,7 +287,7 @@ export class ViewRoleComponent implements OnInit {
    */
   disableRolesConfirmation() {
     const deleteRoleDialogRef = this.dialog.open(DisableDialogComponent, {
-      data: { disableContext: `role ${this.roleId}` }
+      data: { disableContext: this.translateService.instant('labels.inputs.Role') + ' ' + this.roleId }
     });
     deleteRoleDialogRef.afterClosed().subscribe((response: any) => {
       if (response.disable) {