Add translations language for graph2D component

Frontend Angular 4/src/app/layout/plotter/graph2D/graph2D.component.html

 <!-- Buttons Controls -->
 <div class="buttons-control">
-	<button ngbPopover="Zoom +"
+	<button ngbPopover='{{ "i18n.action.zoom" | translate | titleCase }} +'
 			class="btn btn-sm btn-secondary btn-zoom-increase"
 			data-placement="bottom"
 			triggers="mouseenter:mouseleave"
 			(click)=zoomIn() >
 		<i class="fa fa-plus"></i>
 	</button>
-	<button ngbPopover="Zoom -"
+	<button ngbPopover='{{ "i18n.action.zoom" | translate | titleCase }} -'
 			class="btn btn-sm btn-secondary btn-zoom-decrease"
 			data-placement="bottom"
 			triggers="mouseenter:mouseleave"
 			(click)=zoomOut() >
 		<i class="fa fa-minus"></i>
 	</button>
-	<button ngbPopover="Centrar"
+	<button ngbPopover='{{ "i18n.action.center" | translate | titleCase }}'
 			class="btn btn-sm btn-secondary btn-zoom-center"
 			data-placement="bottom"
 			triggers="mouseenter:mouseleave"
 			(click)="recenterPlot()" >
 		<i class="fa fa-arrows"></i>
 	</button>
-	<button ngbPopover="Borrar"
+	<button ngbPopover='{{ "i18n.action.delete" | translate | titleCase }}'
 			class="btn btn-sm btn-secondary btn-trash"
 			data-placement="bottom"
 			triggers="mouseenter:mouseleave"
 			(click)="cleanPlot()" >
 		<i class="fa fa-trash"></i>
 	</button>
-	<button ngbPopover="Descargar PNG"
+	<button ngbPopover='{{ "i18n.action.download" | translate | titleCase }} PNG'
 			class="btn btn-sm btn-secondary btn-download"
 			data-placement="bottom"
 			triggers="mouseenter:mouseleave"
@@ -40,7 +40,7 @@
 			placement="bottom"
 			closePopoverDirective
 			[ngbPopover]=popoverCanvas
-			popoverTitle="Configuración"
+			popoverTitle='{{ "i18n.object.settings" | translate | titleCase }}'
 			#popover="ngbPopover"
 			tiggers="click">
 		<i class="fa fa-gear"></i>
@@ -65,7 +65,7 @@
 							class="form-control form-control-sm"
 							[checked]= settings.grid
 							(click)="toggleGrid()">
-						Grilla
+							{{ "i18n.object.grid" | translate | titleCase }}
 					</label>
 					<label>
 						<input 	
@@ -74,7 +74,7 @@
 							class="form-control form-control-sm"
 							[checked]= settings.axis 
 							(click)="toggleAxis()">
-						Ejes
+							{{ "i18n.object.axes" | translate | titleCase }}
 					</label>
 					<label>
 						<input 	
@@ -83,7 +83,7 @@
 							class="form-control form-control-sm"
 							[checked]= settings.tip
 							(click)="toggleTip()">
-						Tip
+							{{ "i18n.object.tip" | translate | titleCase }}
 					</label>
 					<label [class.disabled]="funciones.length === 0">
 						<input
@@ -91,14 +91,14 @@
 							[attr.disabled]="funciones.length === 0 ? '' : null"
 							[checked]=animation.boton
 							(click)="multiGraf(value)">
-						Multi gráfica
+							{{ "i18n.msg.figure.multiPlot" | translate | titleCase }}
 					</label>
 				</div>
 				<hr>
 				<div class="zoom-control setting-section">
 					<div [class.disabled]="funciones.length === 0" style="display: flex;">
 						<span style="margin-right: 8px; align-self: center;">
-							Zoom
+							{{ "i18n.action.zoom" | translate | titleCase }}
 						</span>
 						<input 
 							type="number" 
@@ -115,7 +115,7 @@
 				<hr>
 				<div class="animation-controls setting-section"
 					[class.disabled]="animation.data.length === 0">
-					<label>Velocidad de animación:</label>
+					<label>{{ "i18n.msg.figure.animationSpeed" | translate }}:</label>
 					<div>
 						<button class="btn btn-sm btn-secondary"
 								[attr.disabled]="animation.data.length === 0 ? '' : null"

Frontend Angular 4/src/app/layout/plotter/graph2D/graph2D.component.ts

@@ -2,6 +2,7 @@ import { Component, ViewChild, ElementRef } from '@angular/core';
 import { GHCIService } from '../../../shared/services/ghci.service';
 import functionPlot from 'function-plot';
 import { Animation, Setting, toJSON, triggerDownload } from './graph2D.helper';
+import { TranslateService } from '@ngx-translate/core';
 
 @Component({
     moduleId: module.id,
@@ -66,7 +67,7 @@ export class Graph2DComponent {
     public multiGraf = () => { 
         this.animation.boton = !this.animation.boton;
     }
-    public constructor(private ghciService: GHCIService) {
+    public constructor(private ghciService: GHCIService, public translate: TranslateService) {
         this.ghciServiceSub = ghciService.messages.subscribe(
             canvas => {
                 // Stop Animation

Frontend Angular 4/src/app/layout/plotter/graph2D/graph2D.module.ts

@@ -5,9 +5,19 @@ import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
 import { FormsModule } from '@angular/forms';
 import { Graph2DComponent } from './graph2D.component';
 import { DirectivesModule } from '../../../shared/directives/directives.module';
+import { I18nModule } from '../../../shared/modules/translate/i18n.module';
+import { TitleCaseModule } from '../../../shared/modules/titlecase.module';
 
 @NgModule({
-    imports: [FormsModule, RouterModule, CommonModule, NgbModule, DirectivesModule],
+    imports: [
+        FormsModule,
+        RouterModule,
+        CommonModule, 
+        NgbModule,
+        DirectivesModule,
+        I18nModule,
+        TitleCaseModule
+    ],
     declarations: [Graph2DComponent],
     exports: [Graph2DComponent],
 })