Separar todas las funciiens de graficar del componente angular

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

@@ -63,7 +63,7 @@
 							type="checkbox" 
 							name="grid"
 							class="form-control form-control-sm"
-							[checked]= settings.grid
+							[checked]= mateFunGraph2D.settings.grid
 							(click)="toggleGrid()">
 							{{ "i18n.object.grid" | translate | titleCase }}
 					</label>
@@ -72,7 +72,7 @@
 							type="checkbox"
 							name="axis"
 							class="form-control form-control-sm"
-							[checked]= settings.axis 
+							[checked]= mateFunGraph2D.settings.axis 
 							(click)="toggleAxis()">
 							{{ "i18n.object.axes" | translate | titleCase }}
 					</label>
@@ -81,7 +81,7 @@
 							type="checkbox"
 							name="tip"
 							class="form-control form-control-sm"
-							[checked]= settings.tip
+							[checked]= mateFunGraph2D.settings.tip
 							(click)="toggleTip()">
 							{{ "i18n.object.tip" | translate | titleCase }}
 					</label> -->
@@ -89,7 +89,7 @@
 						<input
 							type="checkbox"
 							[attr.disabled]="funciones.length === 0 ? '' : null"
-							[checked]=animation.boton
+							[checked]=mateFunGraph2D.animation.boton
 							(click)="multiGraf(value)">
 							{{ "i18n.msg.figure.multiPlot" | translate | titleCase }}
 					</label>
@@ -104,7 +104,7 @@
 							type="number" 
 							class="form-control form-control-sm"
 							[attr.disabled]="funciones.length === 0 ? '' : null"
-							[(ngModel)]="animation.zoo"
+							[(ngModel)]="mateFunGraph2D.animation.zoo"
 							[max]="1000000"
 							[min]="8"
 							(change)="setZoom()"
@@ -114,26 +114,26 @@
 				</div>
 				<hr>
 				<div class="animation-controls setting-section"
-					[class.disabled]="animation.data.length === 0">
+					[class.disabled]="mateFunGraph2D.animation.data.length === 0">
 					<label>{{ "i18n.msg.figure.animationSpeed" | translate }}:</label>
 					<div>
 						<button class="btn btn-sm btn-secondary"
-								[attr.disabled]="animation.data.length === 0 ? '' : null"
+								[attr.disabled]="mateFunGraph2D.animation.data.length === 0 ? '' : null"
 								(click)='decreaseSpeed()'>
 							<i class="fa fa-minus"></i>
 						</button>
 						<button class="btn btn-sm btn-secondary"
-								[attr.disabled]="animation.data.length === 0 ? '' : null"
+								[attr.disabled]="mateFunGraph2D.animation.data.length === 0 ? '' : null"
 								(click)='restoreSpeed()'>
 							<span>1x</span>
 						</button>
 						<button class="btn btn-sm btn-secondary"
-								[attr.disabled]="animation.data.length === 0 ? '' : null"
+								[attr.disabled]="mateFunGraph2D.animation.data.length === 0 ? '' : null"
 								(click)='increaseSpeed()'>
 							<i class="fa fa-plus"></i>
 						</button>
 						<span class="speed-value">
-							{{animation.speedX | number:'1.0'}}x
+							{{amateFunGraph2D.nimation.speedX | number:'1.0'}}x
 						</span>
 					</div>
 				</div>
@@ -141,10 +141,10 @@
         </ng-template>
 		
 		<!-- Animation -->
-		<div class="animation" *ngIf="animation.data.length>0">
+		<div class="animation" *ngIf="mateFunGraph2D.animation.data.length>0">
 			<button class="btn btn-sm btn-secondary btn-play"
 					data-placement="bottom"
-					*ngIf="!animation.playing"
+					*ngIf="!(mateFunGraph2D.animation.playing)"
 					(click)="runAnimation()" >
 				<i class="fa fa-play"></i>
 			</button>
@@ -158,7 +158,7 @@
 			<ngb-progressbar
 				class="progressbar"
 				type="info"
-				[value]="((animation.currentFrame+1)/animation.data.length)*100">
+				[value]="((mateFunGraph2D.animation.currentFrame+1)/mateFunGraph2D.animation.data.length)*100">
 			</ngb-progressbar>
 		</div>